1.v-cloak 和 v-text
（1）使用v-clock 能够解决 插值表达式 闪烁的问题
（2）v-text主要用来更新textContent，可以等同于JS的text属性。默认 v-text 是没有闪烁问题的，v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个站位符，不会把整个元素的内容覆盖。
注：闪烁问题是指：在页面加载缓慢是出现闪烁,会出现以下内容
+++ {{msg}}++++
<div id="app">
<p v-cloak>+++ {{msg}}++++ <p>
<p v-text="msg">++++++++++</p>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'hello world'
}
})
</script>
效果图
2.v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
<div id="app">
<p v-html="msg">1111<p>
</div>
<script src="vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'<h1>hello world</h1>'
}
})
</script>
这个div 中 p 的内容将会替换成属性值msg，直接作为HTML进行渲染。
效果图
3.v-bind
v-bind用来动态的绑定一个或者多个属性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【 ：】
<div id="app">
<input type="button" value="按钮" :title="mytitle">
</div>
<script src="vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'<h1>hello world</h1>',
mytitle:'绑定属性title'
}
})
</script>
效果图
4.v-on
v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【 @ 】
<div id="app">
<input type="button" value="按钮" :title="mytitle" v-on:click="show">
</div>
<script src="vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'<h1>hello world</h1>',
mytitle:'绑定属性title'
},
methods:{
show:function(){//简写show(){}
alert('hello world')
}
}
})
</script>
事件修饰符
- stop 阻止事件继续传播,阻止事件冒泡
- prevent 事件不再重载页面
- capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
- self 只当在 event.target 是当前元素自身时触发处理函数
- once 事件将只会触发一次
- passive 告诉浏览器你不想阻止事件的默认行为
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
汇总：使用以上指令做个小demo，跑马灯效果制作
5.v-model
实现表单元素的数据双向绑定（唯一能实现双向数据绑定的指令），v-model只能应用在表单元素中（form fieldset legend label input textarea button select option）。
<div id="app">
<!-- 输入框 -->
<input type="text" v-model="msg">
<p>看变化：{{msg}}</p><br>
<!-- 复选框 -->
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label><br>
<!-- 多行文本 -->
<textarea v-model="msg" placeholder="add multiple lines"></textarea><br>
<!-- 多个复选框，绑定到同一个数组 -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>Checked names: {{ checkedNames }}</span><br>
<!-- 单选框 -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label><br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label><br>
<span>Picked: {{ picked }}</span><br>
<!-- 下拉选择框 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span><br>
</div>
<script src="vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'hello world',
mytitle:'绑定属性title',
checked:true,
checkedNames:[],
picked:'',
selected:'',
}
})
</script>
小项目练习：使用v-model实现计算器的demo
6.Vue通过属性绑定为元素设置class类样式
7.Vue中通过属性绑定为元素绑定style行内样式
8.v-for循环普通数组
9.v-for循环复杂数组
10.v-for循环对象
11.v-for迭代数字
12.v-for循环中key属性的应用
网友评论