学习笔记Vue（二）—— 常用指令
1.v-pre
让标签中的html模板不进行编译，就是两个花括号中的内容不再当作一个变量，而是整体就看做是一个字符串。
<!-- v-pre 不编译两个花括号中的内容 -->
<span v-pre>{{'a'}}</span>
2.v-cloak
有的时候可能由于网络原因，vue加载的比较慢，最开始html里绑定的数据是不存在的，等待vue加载完毕后才显示出来，这样就会有一个“闪现”行为，可以使用v-cloak解决
css中设置v-cloak 为display：none
[v-cloak]{
display: none;
}
<!-- 防止改变元素值时 “闪现” -->
<span v-cloak>{{name}}</span>
3.v-once
v-once 控制该标签内的html模板，只显示第一次的值，不会再被改变
<body>
<!-- 始终显示第一次的值，不再更改 -->
<span v-once>{{name}}</span>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'grandma',
}
});
vm.name = 'kkk'; //虽然改成了kkk，但span里仍显示 grandma
</script>
</body>
4.v-html
绑定含有html的字符串，但要注意XSS攻击
XSS攻击：别人恶意的把你的html字符串修改成他的版本，渲染到界面执行
<body>
<!-- 绑定html字符串 注意XSS攻击-->
<span v-html = 'dom'></span>
<script>
var vm = new Vue({
el: '#app',
data: {
dom: '<div><h4>Hello World</h4></div>',
}
});
</script>
</body>
5.v-text
绑定text，会覆盖标签里的全部内容
6.v-if
v-if等于一个布尔值，可以是变量或者函数的返回值，true则增加这段dom，false则移除，
注意与v-show区分，v-show是dom本来就存在，只是没有显示，v-if是不存在，后添加上的dom
使用template标签，控制多个标签的显示和隐藏会更好，template标签不会出现在dom结构里
<body>
<!-- v-if 同 ng-if -->
<template v-if='isTrue'>
<div>
<h1>用template控制多个标签的显示和隐藏</h1>
<span>hahahhhahahahha</span>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {
isTrue :true
}
});
</script>
</body>
7.v-else
v-else 必须和v-if搭配使用，中间不能有“第三者”，当if里的值为false时，v-else执行
8.v-show
用法和v-if相似，但在template标签上v-show不生效
9.v-bind
v-bind是一个强大的指令，他可以绑定属性的值，使这个属性的值可以由你改编成任何你想要的值。
简写： :class=’’ :src=’’
比如：
<body>
<div id="app">
<img v-bind:src="imgUrl" />
<!-- v-bind 简写 只剩一个： 绑定多个class值，要写在数组里 -->
<img :src="imgUrl" alt="" :class="[redClass, blueClass]"/>
<!-- flag为true，则有yellow类名，否则没有 -->
<div :class="{yellow: flag}"></div>
<div :style="{color:color,background:'blue',width:'100px',height:'100px'}">redword</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
imgUrl:"http://pic.58pic.com/58pic/13/93/09/83F58PICUiG_1024.jpg",
redClass: "red",
blueClass: "blue",
flag: true,
color: 'red',
divColor:'red'
}
})
10.v-on
v-on 给标签绑定事件，如click事件
简写，@click = “fun()”
<body>
<div id="app">
<button v-on:click="change('red')">red</button>
<button v-on:click="change('green')">green</button>
<button @click="change('blue')">blue</button>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
imgUrl:"http://pic.58pic.com/58pic/13/93/09/83F58PICUiG_1024.jpg",
redClass: "red",
blueClass: "blue",
flag: true,
color: 'red',
divColor:'red'
},
methods: {
change(color){
// this 相当于vm 如果写箭头函数，this就是window了！ 不要随便用箭头函数
this.divColor = color;
}
}
})
</script>
</body>
11.v-for
类似angular的v-repeat，可以循环生成很多相同结构的html标签
可以绑定一个key值，key值必须唯一
但如果使用template标签，template标签上不能使用key值
<body>
<!-- v-for 同 ng-repeat-->
<!-- key值必须是唯一的 -->
<div id="app">
<div v-for="(item, index) in personArr" :key="item.id">{{item.name}}</div>
<div v-for="(value,key) in person">{{value}}</div>
<div v-for="v in 8">{{v}}</div>
<div v-for="v in 'abscdsd'">{{v}}</div>
<!-- template 不能写key值 -->
<template v-for="(item, index) in arr">
</template>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
arr:[1, 2, 3],
personArr:[
{
id: '12321',
name: 'cg'
},
{
id: '22321',
name: 'ctg'
},
{
id:'11111',
name: 'dg'
}
],
person: {
name:'zml',
age:'18',
height:'175'
}
}
});
</script>
</body>
12.v-model （双向数据绑定）
视图改变，vue中变量的值也改变，
变量值改变，视图也会改变
<body>
<!-- v-model 双向数据绑定 value 和 input的语法糖 -->
<div id="app">
<input type="text" v-model="content">
<span>{{content}}</span>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
content: 'abcdef'
}
});
</script>