v-model（数据绑定）
v-model常用于表单数据的双向绑定，它本质上是一个语法糖。它主要的有两种应用：
- 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用
<div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.value"> --> <!--语法糖--> <p>{{ test}}</p> </div> <script> new Vue({ el: '#app', data: { test: '欢迎来到侠课岛' } }); </script>text.png
下拉框：
<div id="app">
<select v-model="selected">
<option value="设计">Phtotshop</option>
<option value="编程">programming</option>
<option value="插画">Illustration</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
select.png
单选按钮：
<div id="app">
<input type="radio" id="man" value="男" v-model="picked">
<label for="man">男</label>
<br>
<input type="radio" id="woman" value="女" v-model="picked">
<label for="woman">女</label>
<br>
<input type="radio" id="other" value="其他" v-model="picked">
<label for="other">其他</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
radio.png
复选框：
<div id="app">
<input type="checkbox" id="one" value="课程一e" v-model.lazy="checkedNames">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="课程二" v-model.lazy="checkedNames">
<label for="two">选项二</label>
<input type="checkbox" id="three" value="课程三" v-model.lazy="checkedNames">
<label for="three">选项三</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
checkvalue.png
- 也可以和.lazy、.trim、.number这些修饰符一起使用
.lazy
<input v-model.lazy="test" >
.number，自动将用户的输入值转为数值类型
<input v-model.number="test" type="number">
.trim，自动过滤用户输入的首尾空白字符
<input v-model.trim="test" >
v-for（循环）
格式： v-for=“字段名 in(of) 数组 or json
<div id="main">
<p>{{ message }}</p>
<ul>
<li v-for="(item,index) in fruit">{{ item }} {{ index }}</li>
</ul>
</div>
<script>
new Vue({
el: '#main',
data: {
message: 'Welcome XKD!',
fruit: [
'Apple',
'Grape',
'Pitaya',
'Banana',
'watermelon',
'Pomegranate'
]
}
})
</script>
v-for.png
v-show 和 v-if（显示与隐藏）、v-else-if、v-else
v-show 通过值来判断是否加载并显示；
v-if 通过值来判断是否加载；
v-else-if ，充当 v-if 的“else-if 块”，可以连续使用；
v-else ，表示 v-if 的“else 块” ，必须连用，否则无效不会识别。
v-show 和 v-if两者区别在于：
- v-if 控制元素隐藏的时候，它会删除dom节点，而v-show并不会，v-if还可以和v-else-if 和 v-else，这两者是必须和v-if连用，不能单独使用。
- 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
v-show：
<div v-show="isShow">我只是用来控制 display 的属性值</div>
<script>
var vm = new Vue({
el: "#main",
data: {
isShow: true
}
});
</script>
v-if：
<div id="main">
<div v-if="isShow">显示或隐藏</div>
</div>
<script>
var vm = new Vue({
el: "#main",
data: {
isShow: fasle
}
});
</script>
v-else-if：
<div v-if="type === 'A'">程序员</div>
<div v-else-if="type === 'B'">设计师</div>
<div v-else-if="type === 'C'">运营者</div>
<div v-else>互联网工作人</div>
<script>
var vm = new Vue({
el: "#main",
data: {
type: 'A'
}
});
</script>
v-else：
<div v-if="isTrue">侠课岛</div>
<div v-else>还是侠课岛</div>
<script>
var vm = new Vue({
el: '#main',
data: {
isTrue: true
}
})
</script>
v-bind（动态绑定）
及时对页面的数据进行更新修改。
- v-bind:id 简写为 :id
- v-bind:disabled 简写为 :disabled
- v-bind:href 简写为 :href
- v-on:click 简写为 @click
v-on（绑定事件）
指令绑定事件后，就会监听相应的事件。
v-on:click：
<div id="main">
<h3>已点击 {{count}} 次</h3>
<button @click="count++">Click Me!</button>
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
count: 0
}
});
</script>
v-on:keyup：先显示值，再弹出层
<div id="main">
<input v-on:keyup.13="keyup" type="text">
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
},
methods: {
// enterClick: function () {
// console.log("enterClick");
// }
keyup(e) {
alert(JSON.stringify(e));
}
}
});
</script>
v-on:keydown：在框中输入先弹出层，再显示输入的值
<div id="main">
<input v-on:keydown="keydown">
</div>
<script>
var vm = new Vue({
el: '#main',
data: {
},
methods: {
keydown(e) {
alert(JSON.stringify(e));
}
}
});
</script>
v-text 和 v-html（解析文本）
v-text：
<span v-text="dangerHTML"></span>
dangerHTML: '<span onclick="alert(123)">123</span>'
不管是什么，全都解析成文本，里面的HTML标签也全部转义掉：
v-text.png
v-html：
<span v-html="dangerHTML"></span>
dangerHTML: '<span onclick="alert(123)">123</span>'
v-html.png
v-bind:class
-
对象：{ red:ifAbledRed }
v-bind-class1.png - 三目运算符：ifAbledRed ? "red" : "blue"
- 数组：[{red:"ifAbledRed"},{blue:"ifAbledBlue"}]
v-once
只渲染一次，不再进行渲染。
<p v-once>{{ message }}</p>
v-cloak（防止闪烁）
v-cloak一般是配合 [v-cloak] {display: none; }css 一起使用的。
<p v-cloak>{{ message }}</p>
下面是一个闪烁的截图代码，当我们给如下红色代码块外加一个setTimeout时间延迟时，然后再去执行我们会发现在网页上什么都没有，会有一个时间的停留，因此提供了一个v-cloak的方法来解决这个问题。
v-cloak.png
v-pre
原位输出标签内部的元素。
