一、引入
第一步：導入vue.js文件
第二步：創建一個Vue實例
var 變量 = new Vue({
el: 選擇器,//表示，我們當前new的這個vue實例，要控制頁面上的那個區域
data:{//存放的是el中要用的數據
msg：'歡迎學習Vue'//通過Vue提供的指令，很方便的就能把數據渲染到頁面上，程序員不再手動操作Dom元素
}
});
二、使用
1、data屬性
v-cloak屬性：可以解決差值表達式閃爍的問題：可以放任何位置
v-text屬性：是沒有閃爍問題：會覆蓋原本里面的內容
v-html屬性：可以識別HTML標簽
v-bind屬性：是Vue中提供綁定屬性的指令
注意1、v-band:屬性可以簡寫為:屬性 ：v-band:title="title + 'aaa'"等價於:title="title + 'aaa'"
2、v-band:中可以寫符合js的表達式：例如v-band:title="title + 'aaa'"
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '124',
msg2: '<h1>我說H1，我很大</h1>',
title: "這是我自己寫的title"
}
});
</script>
3、methods屬性
v-on屬性：事件綁定機制
方法一：<input type="button" value="點擊" v-on:mouseenter="fn">
方法二：<input type="button" value="點擊" @mouseenter="fn">
var vm = new Vue({
el: '#app',
data: {
msg: '124',
msg2: '<h1>我說H1，我很大</h1>',
title: "這是我自己寫的title",
},
methods: {
fn: function() {
alert(444);
}
}
});
注意：方法屬性的調用：如果當前Vue實例想調用其內部的屬性和方法等,必須通過this關鍵字來獲取,this表示當前new的Vue實例對象
4、事件訪問修飾符
使用位置：<input type="button" value="點擊" name="" id="" @click.訪問修飾符="btnHandler">
.stop：阻止冒泡行為
.prevent：阻止默認行為
.capture：事件捕獲機制，從外往里執行
.self：被修飾的元素只能通過自己來觸發事件，只會阻止自己的冒泡行為，不會阻止別的元素
.once：只觸發一次事件函數
5、v-model：雙向數據綁定：（頁面）（vue實例），任意一端數據發生變化時則另一端也改變
三、操作class屬性
<!-- 第一種使用 -->
<h1 :class="['red','thin','italic']">這是一個很大很大的h1，大到你無法想象！！！</h1>
<!-- 使用三元表達式 -->
<h1 :class="['thin','italic',flag?'active':'']">這是一個很大很大的h1，大到你無法想象！！！</h1>
<!-- 在數組中使用對象代替三元表達式，提高代碼的可讀性 -->
<h1 :class="['thin','italic',{'active':flag}]">這是一個很大很大的h1，大到你無法想象！！！</h1>
<!-- 直接使用對對象，對象的屬性是類名，屬性值是布爾類型的標識符，由於數對象可以帶引號，也可以不帶引號 -->
<h1 :class="{active:true,red:false,thin:false}">這是一個很大很大的h1，大到你無法想象！！！</h1>
注意：這個放的可以把整個對象放到data中寫；
四、操作行內的style屬性
第一種：<h1 :style="{color:'red','font-weight':200}">這是一個h1</h1>
第二種：<h1 :style="styleobj">這是一個h1</h1>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleobj:{'color':'red','font-weight':200}
}
});
</script>
第三種：<h1 :style="[styleobj,styleobj2]">這是一個h1</h1>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleobj:{'color':'red','font-weight':200},
styleobj2:{'font-style':'italic'}
}
});
</script>