vue的指令學習記錄 vue-if | text | for | on | model …
目錄
預備
下載vue.js
vue.js官網下載地址
兩個版本均下載，下載下來的爲js文件。
引入vue.js
<script type = "text/javascript" src="xxx/vue.js"></script>
即可使用我們的vue.js了，開始愉快的學習（禿頭）吧
準備vue環境
使用的編輯器是vscode
vscode的控制檯（ ctrl+~ 打開）安裝下面服務
npm install live-server
之後控制檯輸入
live-server
運行服務，可以在地址127.0.0.1:8080下看的html運行結果
vue基本使用
head中script標籤引入vue.js
body中寫一個聲明必須要new一個 Vue的實例
{{}} 雙大括號等於是展示該變量信息
el是必須要寫的，對應 用於展示該vue對象的標籤的id
data是vue的數據域
computed是用於計算的函數域
methods是存儲方法的域
<div id = "app">
{{message}}
</div>
<script type = "text/javascript">
var _app = new Vue({
el:'#app',
data:{
message:"hello world!!!"
}
computed:{
sortItems:function(){
}
}
methods:{
addScore:function(){
}
}
})
</script>
完整的helloworld代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>helloworld 實例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type = "text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>helloworld 實例</h1>
<hr>
<div id = "app">
{{message}}
</div>
<a href="../index.html">back</a>
<script type = "text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"hello world!!!"
}
})
</script>
</body>
</html>
vue-if & vue-else-if & v-else & v-show
<div id = "app">
<div v-if="isLogin">你好 kirito</div>
<div v-else-if="isElse">elseif</div>
<div v-else>請登錄</div>
<div v-show="isShow">It's showtime</div>
</div>
<script type = "text/javascript">
var app = new Vue({
el:"#app",
data:{
isLogin:false,
isElse:false,
isShow:false
}
})
</script>
vue-if & vue-else-if & v-else
v-if: 當其值爲true時，顯示該標籤內容
v-else-if: 與v-if 搭配，當v-if爲false且本身爲true時，顯示該標籤
v-else: 與v-if搭配，不必賦值，顯示該標籤內容
遵循if - else的邏輯關係
v-show
<div v-show="isShow">It's showtime</div>
isShow爲true則顯示該標籤內容，與v-if有點相似
v-if: 判斷是否加載，可以減輕服務器的壓力，在需要時加載
v-show：調整css display屬性，可以使客戶端操作更加流暢
v-for
意如其名，循環輸出
//在一個無序列表中循環輸出li項，sortItems爲數組，在data數據域中
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
v-text & v-html
v-text會在渲染完成之後在顯示該值，而不會因爲渲染失敗而產生令人費解的{{xxx}}
v-html則是實現在字符串中輸入html的語法標籤如 h2並使之生效
<div id = "app">
<span>{{message}}</span>=<span v-text = "message"></span><br/>
<span v-html = "dodo"></span>
</div>
<a href="../index.html">back</a>
<script type = "text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"hello world!!!",
dodo:'<h2>hello world!</h2>'
}
})
</script>
v-on
on表示響應，可以是鼠標點擊(click)事件，也可以是鍵盤按下(keydown)和彈起(keyup)事件
對應被賦予的值應該爲函數名
<div id = "app">
本場比賽分數:{{ scores }}
<p>
<button v-on:click="addScore">加分</button>
<!--@等價於v-on: -->
<button @click="desScore">減分</button><br/>
<input type="text" v-on:keyup.enter="onEnter" v-model="scores2">
//keyup.enter表示回車鍵彈起時調用後面的onEnter函數
</p>
</div>
<script type = "text/javascript">
var app = new Vue({
el:'#app',
data:{
scores:0,
scores2:2
},
methods:{
addScore:function(){
this.scores++;
},
desScore:function(){
this.scores--;
},
onEnter:function(){
this.scores = this.scores + parseInt(this.scores2);
}
}
})
</script>
on應該調用methods中的函數
v-on: 等價於 @
v-model 數據源綁定
雙向綁定數據，修改輸入框中數據，顯示的文本會即時發生改變
<p>原始文本信息： {{message}}</p>
<h4>文本框</h4>
<p>v-model<input type="text" v-model="message"></p>
三個屬性
- v-model.lazy 鼠標失去焦點時才更新數據源，延緩更新
- v-model.number 當數據源是純數字時，輸入的必須也是數字否則不改變
- v-model.trim 去掉頭尾空格
還有其他應用場景
- 文本域
- 多選框綁定一個值
- 多選框綁定數組
- 單選框綁定
![vmodel3]()
v-bind
將標籤與變量綁定在一塊，也可以綁定class、對象，大概html所有元素均可
<p> <img v-bind:src="imgSrc" width="200px"></p>
...
<script type = "text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"hello world!!!",
imgSrc:"https://i0.hdslb.com/bfs/archive/acf2c0ea2d20ffc58b74c4d3870b06c4f6620313.jpg@880w_388h_1c_95q",
//加載不出來則需要更換圖片地址
}
})
</script>
v-bind: 等價於 :
v-pre&v-cloak&v-once
pre顯示原樣，不顯示標籤中的變量值
cloak渲染完成才顯示
once只渲染一次，在一些需要連續點擊改變值的情況下只能改變一次
<div id = "app">
<div v-pre> {{message}} </div> <!-- 原樣輸出 -->
<div v-cloak>渲染完成後，才顯示！ </div>
<div>{{message}}</div>
<div><input type="text" v-model="message"></div>
<div v-once>{{message}}</div> <!-- 只渲染一次 -->
</div>
<script type = "text/javascript">
var app = new Vue({
el:'#app',
data:{
message:"hello world!!!"
}
})
</script>
加油！
爲興趣所學，爲自己奮鬥。
學習資源參考：b站技術胖。