3.Vue学习：Vue指令
注意点：
Vue实例里面的 el 、methods、 data不可以更改，写错会报错
1、v-text设置标签文本值：如果标签里面原来有值会被覆盖
<div id="first">
<h2 v-text="message + '!'"></h2>
<h2 v-text="info + '!' "></h2>
<h2> {{ message + '!'}}</h2>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: '#first',
data: {
message: 'hello word!',
info: '你好!'
}
})
</script>
2、v-html：如果data数据是纯文本，作用和v-txet一样，如果里面数据是标签，可以解析
3、v-on：绑定事件指令：可以使用@符号替代
传递自定义参数，事件修饰符
①、事件绑定的方法写成函数调用，可以传入自定义参数。
②、定义方法时需要定义形参来接收传入的实参。
③、事件的后面可以跟上 .修饰符 ，对事件进行限制。
④、.enter 可以限制触发的按键为回车。
<div id="app">
<input type="button" value="点我" @click="active(666, '铁汁')">
<input type="text" @keyup.enter="sayHi">
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
active: function (p1, p2) {
console.log(p1);
console.log(p2);
},
sayHi: function () {
alert('吃了吗？')
}
}
})
</script>
<div id="first">
<input type="button" value="点我" v-on:click='doIt'>
<input type="button" value="点我" @click='doIt'>
<h2 @click='change'>{{ message }}</h2>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: '#first',
data: {
message: 'hello word!',
},
methods: {
doIt: function () {
alert('hello word')
},
change: function () {
this.message += '你好' // this关键字获取data中的数据
}
}
})
</script>
4、v-show：切换元素的显示状态：true/false
①、可以直接写：v-show=‘true’。
②、使用表达式：v-show=‘age > 18’。
5、v-if：根据表达式的真假切换显示状态，和show类似。
①、两者的不同：v-show改变的是display，标签依然还是在页面中，只是看不到；v-if是直接将标签从页面中删除。
②、使用场景：如果是要频繁切换显示状态的就用show。
6、v-bind：设置元素的属性：src、title、class等
①、v-bind可以简写为冒号 :
②、改变元素class建议写法：{active：isActive}：是否增加类名取决于后面的真假
<body>
<div id="first">
<img v-bind:src="imgSrc" alt="">
<br>
<img :src='imgSrc' alt="" :title="imgTitle" :class='{active:isActive}' @click='change'>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: '#first',
data: {
imgSrc: "http://www.itheima.com/images/logo.png",
imgTitle: "黑马程序员",
isActive: false
},
methods: {
change: function () {
this.isActive = !this.isActive
}
}
})
</script>
</body>
7、v-for：根据数据生成列表结构
<div id="first">
<input type="button" value="添加" @click='add'>
<input type="button" value="减少" @click='remove'>
<ul>
<!-- <li v-for='item in arr'>
中国城市: {{item}}
</li> -->
<li v-for='(item,index) in arr'>
{{ index + 1}} 中国城市: {{item}}
</li>
</ul>
<h2 v-for="it in food" :title='it.name'>
{{it.name}}
</h2>
</div>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
var app = new Vue({
el: '#first',
data: {
arr: ['北京', '上海', '江苏', '广州'],
food: [
{ name: '西红柿炒蛋' },
{ name: '蛋炒西红柿' }
]
},
methods: {
add: function () {
this.food.push({ name: '番茄炒蛋' })
},
remove: function () {
this.food.shift();
}
}
})
</script>
8、v-model：设置以及获取表单元素的值：实现表单元素数据的双向绑定。
表单中的值改变，绑定的值也会同时改变，
绑定的值改变，表单中的值也会同时改变。
①、可以便捷的设置和获取表单元素的值。
②、绑定的数据会和表单元素的值相关联。
③、绑定的数据 <------> 表单元素的值。
