Vue v-指令相關
1.v-text 設定標籤的內容
var app=new Vue({
el:"#app",
data:{
message:"ksjghksjgb!!!!!!",
info:"可就是不公開錦標賽的"
}
})
<h2 v-text="message"></h2>
<h2 v-text="info"></h2>
<h2>{{ message}}</h2>
這裡需要注意的是字串的拼接，在使用v-text時
<h2 v-text="message">這是文字</h2>
這種的插入是沒有效果的，而使用{{}}卻是可以的
<h2>{{ message}}這是文字</h2>
另外在內部進行拼接，即使用''單引號是都能實現的
<h2 v-text="message+'梳理客戶給'"></h2> <h2 v-text="info+'sldhgf'"></h2> <h2>{{ message+'skdlng'}}</h2>
2.v-html 設定元素的innerHTML
<p v-html="text"></p> <p v-text="text"></p> data:{ // text:"百度", text:"<a href='http://www.baidu.com'>百度</a>" }
或變為陣列
data:{
ima:[
"./img/img0.png",
"./img/img1.png",
"./img/img2.png",
"./img/img3.png",
],
當text只是簡單的文字的時候，v-html和v-text均只顯示文字，但是當text是<a>標籤的時候,v-html就成為了html
3.v-on 為元素繫結事件
Vue提供了可以使用@符號來代替v-on:的方法
<input type="button" value="單擊事件" v-on:click="dova"> <input type="button" value="雙擊事件" v-on:dblclick="dova"> <input type="button" value="簡寫" @click="dova"> dova:function () { alert("做！！！！"); },
注意當使用點選方法 ：function時
add:function (){}
需要用this.來代指當前指定的元素
<p @click="changeFood" v-text="food"></p> data:{ food:"雞蛋" }, changeFood:function () { this.food="好吃" }
v-on還提供函式呼叫方式的資料繫結，並可以傳入自定義引數
以下是官方文件的示例
<div id="app"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> var example1 = new Vue({ el: '#app', data: { counter: 0 } })
可以看到v-on:click="counter += 1"就是直接呼叫的函式方法
v-on還可以接收呼叫的方法
greet: function (event) { alert( this.name + '!') //使用this if (event) { alert(event.target.tagName) //輸出event的dom元素是何種型別 } }
v-on內聯Javascript語句，這裡也使用官方示例
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } })
點選按鈕可以發現只輸出了（）內的內容
v-on還提供了按鍵修飾符屬性
<input type="text" @keyup.esc="hi"> hi:function (){ alert("sdfsfsdf"); }
這裡使用@keyup來表明鍵盤事件，用 . 來連線具體的按鍵常用的有
.enter 或者.13.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right
此外還提供了系統修飾鍵
<input type="text" @keyup.alt.67="hi"> //Alt+c <div @click.ctrl="hi">Do something</div> //Ctrl+Click
即按住 alt 鍵加c才能觸發@keyup 或者按住ctrl再點選才能觸發
.67就表示的是C鍵的keycode
這裡貼出一個查詢網址，可以用來查詢按鍵的keycode http://keycode.info/
常用的修飾符按鍵有
.ctrl.alt.shift.meta
4.v-show 根據真假控制頁面元素顯示狀態（ture顯示，false隱藏）
有三種方式控制
（1）直接控制
<img src="img/die.jpg" v-show="true">
（2）方法控制
<input type="button" value="切換" @click="changeshow"> <img src="img/die.jpg" v-show="isshow"> methods:{ changeshow:function (){ this.isshow=!this.isshow; }
（3）條件控制
<img src="img/die.jpg" v-show="age>=20"> <input type="button" value="條件控制" @click="changeAge" > data:{ isshow:false, age:15 }, methods:{ changeAge:function (){ this.age++; }
5.v-if 根據表示式的真假，切換元素的顯示與隱藏，與v-show不同，它是直接操縱dom元素
使用方法和v-show相似，只是後臺操作元素方法不同，
v-show是隱藏掉，v-if是直接註釋掉程式碼
頻繁操作的元素使用v-show，反之使用v-if
6.v-bind 為元素繫結屬性 可以簡寫 使用：。例：:class、:src等
整個流程圖從@click點選事件開始。點選圖片，呼叫isNo方法，可以改變預設為false的isActive的值，當isActive的值為true時，class=“active”，然後.active生效，出現邊框
注意 這裡v-bland:class="isActive? ' active ':' ' " 理解為 isActive是true則class=“active” 否則為“” 使用的是三元運算子
另一種方法是使用物件的形式 v-bland：class=“{active：isActive}” 理解為 active這個類是否生效取決於isActive的值 建議使用這種方式
7.v-for 根據資料生成列表結構，響應式的更新
（item，index）in 資料 item代表每一項，index表示索引，in不能更改
<ul>
<li v-for="(item,index) in band"> //item可以改變，index表示索引數字，從0開始
{{item}}賽車{{index}} //跟上方的item對應即可
</li>
</ul>
<p v-for="item in gas">{{item.name}}</p> //輸出name
<p v-for="item in gas" :title="item.name">{{item.name}}</p>
var app=new Vue({
el:"#app",
data:{
band:["F1","F2","F3","F4","F5"],
gas:[
{name:"90號汽油"},
{name:"91號汽油"},
{name:"92號汽油"},
]
},
methods:{
add:function (){
this.gas.push({name:"93號汽油"}) //為陣列中新增元素此處固定
},
remove:function (){ //移除陣列中的元素，預設是從左移除
this.gas.shift();
}
}