【Vue自学笔记（二）】Vue指令
Vue指令就是一群以v开头的指令，来实现一系列的绑定、操作。是对底层实现的封装，让HTML的编辑更加方便，丰富，也更加适合Vue。
v-text：设置标签的文本值(textContent)
<body>
<div id='app'>
<h2 v-text = "message+'!'">me</h2>
<h2>message:{{message+"!"+'!'}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue'
}
})
</script>
</body>
效果
v-text的值会覆盖标签的内容，同时可以做更多的扩展，让内容不再是静态的，可以跟随data中的值进行改变。{{}}也称插值表达式，是v-text的简写。
v-html：设置标签的innerHTML
<body>
<div id='app'>
<p v-html = "message">message</p>
<p v-text = "message">message</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "<a href='#'>message</a>"
}
})
</script>
</body>
效果
v-html和v-text的区别就是innerHTML和innerText的区别，v-html会将标签内容的html语言进行翻译，而v-text不会。
v-on：为元素绑定事件
<body>
<div id='app'>
<input type="button" value="v-on指令" v-on:click="dolt">
<input type="button" value="简写指令" @click="dolt">
<input type="button" value="双击事件" @dblclick="dolt">
<p @click ="changeText">{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '西兰花炒蛋'
},
methods: {
dolt: function () {
alert("test")
},
changeText:function(){
this.message+="好好吃！"
}
}
})
</script>
</body>
在Vue中，不需要取操作Dom元素，只需要更改数据，页面就会同步修改。方法的内部可以通过this来获得属性。由于是动态效果，还需要大家动手去试试，主要效果就是点击追加显示内容。@是简写
还可以传递自定义参数
<body>
<div id='app'>
<input type="button" value="点击" @click="dolt(666,'老铁')">
<input type="text" @keyup.enter="sayHi">
<p @click ="changeText">{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '西兰花炒蛋'
},
methods: {
dolt: function (p1,p2) {
console.log("just do it")
console.log(p1)
console.log(p2)
},
changeText:function(){
this.message+="好好吃！"
},
sayHi:function(){
console.log("吃了没 ")
}
}
})
</script>
</body>
非常简单，也和java很相似。v-on是Vue指令中非常重要的一个部分，这里介绍的很简单， 更复杂、更详细的内容，可以阅读文档https://cn.vuejs.org/v2/api/#v-on
v-show：根据表达值的真假，切换元素的显示和隐藏
<body>
<div id='app'>
<img src="img/123.jpg" alt="" v-show="true">
<img src="img/123.jpg" alt="" v-show="message">
<img src="img/123.jpg" alt="" v-show="age>=18">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: true,
age:16
}
})
</script>
</body>
可以直接传入true或者false，也可以传入data中的属性，还可以传入一个表达式。
v-if
<body>
<div id='app'>
<p v-show="true">123</p>
<p v-show="message">123</p>
<p v-show="age>=18">123</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: true,
age: 16
}
})
</script>
</body>
if和show实现的效果一样，只是底层不同，if是通过dom树上操作元素的存在与否实现展示或者不展示。而show是通过display：none修饰的添加与否实现展示或者不展示。实际开发中需要频繁操作的元素用v-show，反之用v-if，因为操作dom树是一种对资源消耗更大的方法。
v-bind：设置元素的属性(比如src,title,class)
<body>
<div id='app'>
<img v-bind:src="imgSrc" v-bind:title="imgTitle+'!'">
<img :src="imgSrc" v-bind:title="imgTitle+'!'">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "img/123.jpg",
imgTitle:"title",
isActive:false
}
})
</script>
</body>
简单理解，就是把标签的属性也使用data中的参数进行管理，简写就是:。
v-for：根据数据生成列表结构
<body>
<div id='app'>
<input type="button" value="添加参数" @click="add">
<input type="button" value="移除参数" @click="remove">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{index+1}}:hello!{{item}}
</li>
<li v-for="(item,index) in arrObj">
{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
arr: [1, 2, 3, 4, 5],
arrObj: [{ name: "Jack" }, { name: "Tom" }]
},
methods:{
add:function(){
this.arrObj.push({name:"lucy"})
},
remove:function(){
this.arrObj.shift()
}
}
})
</script>
</body>
(item,index) in arrObj是固定搭配。in不可改变，是关键字。()中如果有一个参数，则代表arrObj中的元素；如果有两个参数，则第一个代表arrObj中的元素，第二个代表元素的下标。item和index都是见名知意的命名，但是可以改变。
v-model：获取和设置表单元素的值(双向数据绑定)
<body>
<div id='app'>
<input type="text" v-model="message" @keyup.enter="sayHi">
<p @click="changeText">click</p>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '西兰花炒蛋'
},
methods: {
dolt: function (p1, p2) {
console.log("just do it")
console.log(p1)
console.log(p2)
},
changeText: function () {
this.message += "123"
},
sayHi: function () {
alert(this.message)
}
}
})
</script>
</body>
简单来说，就是将输入框和data中的元素进行绑定。data发生改变，输入框中的内容也会随之改变。反之亦然。
