Vue.js 基礎用法
入門案例
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 使用vue需要先引包
<div id="app">
{{message}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
</div>
new Vue({
// 可以直接運算和三元運算,注意不能使用if
el:'#app',
data:{
message:'hello world', //注意不要寫分號結尾
number:100
}
});
v-on 指令[簡寫 @]
- 可以用
v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼
v-on:click
<div id="app">
{{message}}
<button v-on:click="fun1('good')">點擊改變</button>
</div>
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
fun1:function(msg){
this.message=msg;
}
}
});
v-on:keyup
<div id="app">
<input type="text" v-on:keydown="fun1($event)">
<input type="text" @keydown.p.prevent="fun2" />
</div>
new Vue({
el:'#app',
methods:{
fun1:function(event){
var keyCode=event.keyCode;
if(keyCode<48 || keyCode>57){
event.preventDefault();// 不操作,也不會在input顯示
}
},
fun2:function(){
// 按下P鍵, 並且p不在input中輸入
alert("按下p");
}
}
});
v-on:mouseover
- Vue.js 爲 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或
event.stopPropagation()。
<div id="app">
<div v-on:mouseover="fun1" id="div">
<textarea v-on:mouseover.stop="fun2($event)">這是一個文件域</textarea>
</div>
</div>
new Vue({
el:'#app',
methods:{
fun1:function(){
alert("div");
},
fun2:function(event){
alert("textarea");
//阻止冒泡繼續向下傳播, 如果不加.stop則需要下一行代碼
// event.stopPropagation();
}
}
});
v-text與v-html
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
new Vue({
el:'#app',
data:{
message:"<h1>hello Vue</h1>"
}
});
頁面展示:
<h1>hello Vue</h1>
hello Vue
v-bind[簡寫 :冒號]
- 插值語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind指令
<div id="app">
<font size="5" v-bind:color="ys1">小紅</font>
<font size="5" :color="ys2">小綠</font>
<hr>
<a v-bind={href:"http://www.baidu.com/index/"+id}>itcast</a>
</div>
new Vue({
el:'#app',
data:{
ys1:"red",
ys2:"green",
id:1
}
});
v-model
- 如果用 value=“user.username” 則會原樣輸出user.username
用戶: <input type="text" name="username" v-model="user.username" /><p></p>
密碼: <input type="text" name="password" v-model="user.password" />
<input type="button" @click="reverse" value="test" />
new Vue({
el:"#app",
data:{
user:{
username:"小黑",
password:"羅小黑戰記"
}
},
methods:{
reverse:function(){
this.user.username="小黑-變身",
this.user.password="羅小黑戰記-大電影"
}
}
});
v-for
遍歷基本 -> 遍歷普通數組和json
<div id="app">
<ul>
<li v-for="(value,index) in names">{{value}}={{index}}</li>
<li v-for="(key,value,index) in user">{{value}}={{key}}={{index}}</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
names:['小黑',"小白","阿根"],
user:{
id:'1',
name:"小黑"
},
}
});
遍歷多個對象
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>id編號</td>
<td>名稱</td>
</tr>
<tr v-for="(user,index) in users">
<td>{{index}}</td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
</div>
new Vue({
el:'#app',
data:{
users:[
{ id:'1', name:"小黑"},
{ id:'2', name:"小白"},
{ id:'3', name:"阿根"},
{ id:'4', name:"老府"}
]
}
});
v-if與v-show
v-if 是根據表達式的值來決定是否渲染元素v-show 是根據表達式的值來切換元素的display css屬性
<div id="app">
<span v-if="flag">測試v-if</span>
<span v-show="flag">測試v-show</span>
<button @click="qiehuan">切換顯示/隱藏</button>
</div>
new Vue({
el:'#app',
data:{
flag:true
},
methods:{
qiehuan:function(){
this.flag=!this.flag;
}
}
})
Vue生命週期
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('創建vue實例前', this);
},
created: function() {
showData('創建vue實例後', this);
},
beforeMount: function() {
showData('掛載到dom前', this);
},
mounted: function() {
showData('掛載到dom後', this);
},
beforeUpdate: function() {
showData('數據變化更新前', this);
},
updated: function() {
showData('數據變化更新後', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue實例銷燬前', this);
},
destroyed: function() {
showData('vue實例銷燬後', this);
}
});
vm.$destroy();
- vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鉤子的內容
beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象created ：數據已經綁定到了對象實例，但是還沒有掛載對象beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點mounted:將el的內容掛載到了el，相當於我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們el的元素是一致的。在此之後，我們能夠用方法來獲取到el元素下的dom對象，並進 行各種操作當我們的data發生改變時，會調用beforeUpdate和updated方beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還沒有發生改變updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到dom上面，完成更新beforeDestroy,destroed :實例的銷燬，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動
