目录
1. v-text = ‘message’
-
主要作用是设置标签内的文本为message
-
一般来说会用message取代标签内的所有内容
-
可以用{
{message}}插值表达式代替v-text
注：message可以是文本，变量，表达式
代码演示
<div id='app'>
<h2 v-text = 'message'></h2>
<h3>{{message}}</h3>
</div>
2. v-html = ‘message’
-
主要作用是设置标签内的HTML结构，类似于JS中的 innerHTML
-
v-html会把字符串解析为HTML代码（区别于v-text的文本）
-
解析文本内容使用v-text,需要解析HTML结构使用v-HTML
代码演示
<div id='app'>
<p v-html = 'message'></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message:"<strong> 这个就是v-html</strong>"
}
})
</script>
3. v-if & v-else-if & v-else
-
类似于逻辑结构，根据条件判断选择性的渲染DOM结构
-
表达式为true则渲染该节点的DOM结构，反之则反之
-
频繁切换可以用v-show，减小切换损耗
代码演示
<div id = "app">
<p v-if="isShow">我是一个p标签</p>
<p v-else-if="表达式">我是一个p标签</p>
<p v-else">我是一个p标签</p>
</div>
4. v-show
-
根据表达式的布尔值，通过style切换元素的display属性进行显示与隐藏
-
表达式为true则显示该节点，反之则反之
-
数据改变之后，对应元素的显示状态会同步更新
代码演示
<div id = "app">
<img src="地址" v-show="isShow">
<img src="地址" v-show="age>=18">
</div>
5. v-for
-
根据传入的数据生成对应的列表结构，数组经常和v-for结合使用
-
语法是
v-for=”(item,index) in List”
或
v-for=“item in List”
,其中item代表每一项，index代表索引 -
数组长度的更新会同步到页面上，是响应式的
代码演示
<div id="app">
<ul>
<li v-for="item in arr">元素：{{item}}</li>
<h2 v-for="(item,index) in student">{{index}}.{{item.name}}</h2>
</ul>
</div>
6. v-on
-
为元素绑定事件，可以用简写为@，事件绑定的方法写成函数调用的形式，可传入自定义参数及事件修饰符
-
绑定的方法写在methods属性中，方法内部可以通过this关键字访问data中的数据
-
事件的后面跟上修饰符，可以对事件进行限制，事件修饰符有多种，.enter 可以限制触发的按键为回车
代码演示
<div id = "app">
<input type="button" @click="doIt('nb',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:{
doIt:function(p1,p2){}
sayHi:function(){}
}
})
</script>
7. v-model
-
获取和设置表单元素的值（双向数据绑定）
-
绑定的数据会和表单元素值相关联
-
绑定的数据对应表单元素的值
代码演示
<div id = "app">
<input type="text" v-model="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
message:"这就是input标签的value值"
}
})
</script>
8. v-bind
-
设置元素的属性（比如：src,title,class），
-
完整格式为：
v-bind:属性名 = 表达式
，简写的话可以直接省略v-bind，只保留 :属性名 -
需要动态的增删class建议使用对象的方式
代码演示
<div id = "app">
<img v-bind:src="imgSrc"> //正常格式
<img :src="imgSrc"> //简写格式
<img :src="imgSrc" :class="{active:isActive}"> //对象的方式增删class
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
imgSrc:图片地址,
isActive:false
}
})
</script>
9. v-cloak
-
可以解决加载Vue页面时，页面的闪烁问题
-
在使用插值表达式时，在页面没有及时地返回数据时，页面会闪烁”{
{message}}” -
需要在全局样式下添加如下样式，需要在HTML节点上添加 v-cloak 属性
CSS代码演示
[v-cloak]{
display:none;
}
HTML代码演示
<div id="app" v-cloak>
{{message}}
</div>
10. v-pre
-
可以跳过Vue的编译，直接显示原始值，
-
如下代码会直接显示”{
{messag}}”
代码演示
<div v-pre>{{message}}</div>
11. v-once
-
只在第一次渲染时执行，在之后的执行中都会被当作静态内容，跳过之后所有的渲染过程
-
如下代码，开始显示1，点击后显示2，再次点击不会改变前端页面数值
代码演示
<div id = "app">
<h1>{{cnt}}</h1>
<button @click='cnt++'>点我cnt+1</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
cnt=1
}
})
</script>