Mustache语法
- 又称大胡子语法 就是用两个大括号来包裹变量 从而挂钩Vue去解析里面的代码
- 比如
<h2>{{message}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName}} + ' ' + {{lastName}}</h2>
<h2>{{first}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>
v-once指令 (不是很常用)
- 在某些情况下, 有一些元素我们不想它响应式地根据数据的改变而改变的时候, 给这个元素加上v-once指令后, 它就只会渲染一次, 之后就不会再渲染
<div id="app">
<h2>{{message}}</h2> // 这个元素会动态响应渲染
<h2 v-once>{{message}}</h2> // 这个元素不会动态响应渲染
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
v-html指令
- 有时候服务器端传过来的数据并不是一个字符串 而是一个html标签, 这个时候就可以用v-html指令来渲染这个标签
- v-html指令不用Mustache语法, 这是为了安全的考虑 而且这个指令一般用于信任的数据
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
url: "<a href='http://www.baidu.com'>百度一下</a>"
}
})
</script>
v-test指令
- 因为会覆盖原来标签里面得内容,而且不能进行字符串的拼接, 所有很少使用
<div id="app">
<h2>{{message}}</h2>
<h2 v-test="message"></h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
v-pre指令
- 把标签里面的东西原封不动的显示在页面, 带有这个指令的标签不进行Vue的处理
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
v-cloak指令
- 在某些情况下, 浏览器可能会直接显示出未经过Vue渲染的代码
- v-cloak指令会在vue渲染之前存在, 而在vue渲染之后自动删除
- 利用这个特性, 可以将代码通过CSS的属性选择器先把代码隐藏起来, 在vue渲染之后删除了这个指令, 代码自动就显示出来了, 增强用户体验, 但是以后vue的代码会有更好的方法解决这个问题,所以这个指令也不常用
v-bind指令
- 想要动态绑定标签的属性值, 不能直接用mustache语法, 而要用v-bind指令前缀
- v-bind指令的语法糖是 :
<div id="app">
<img v-bind:src="imgUrl" alt="">
<img :src="imgUrl" alt="">
<a v-bind:href="aHerf">百度一下</a>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
imgUrl: "https://cn.vuejs.org/images/logo.png",
aHerf: "https://www.baidu.com"
}
})
</script>
v-bind指令的对象语法 (用得较多)
- v-bind还可以动态地绑定class, 达到动态绑定样式的效果
- 动态绑定的class, 里面传入一个对象, 键值对的形式 {key:value},key是一个类名,value是一个布尔值, 为true则为这个class添加这个key, 反之则不添加
- 动态绑定的class, 和静态的class可以共存的, 动态绑定的class不会覆盖静态的class
<div id="app">
<h2 :class="{active : isActive, line : isLine}">你好呀</h2>
<h2 class="title" :class="{active : isActive, line : isLine}">你好呀</h2>
<button @click="btnClick()">按钮</button>
<h2 :class="getClasses()">你好呀</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses : function () {
return {active : this.isActive, line : this.isLine}
}
}
})
</script>
v-bind绑定class的数组写法 (不常用)
<div id="app">
<h2 :class="[active , line]">你好呀</h2>
<h2 :class="['active', 'line']"></h2>
<h2 :class="getClasses()"></h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
active: "aaa",
line: "bbb"
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
用v-bind动态绑定style (对象写法, 常用)
- 与动态绑定class写法差不多, 传入一个对象{key(属性名) : value(属性值)}
- 动态绑定的与静态编写的不会覆盖
<div id="app">
<h2 :style="{fontSize:'100px'}">你好呀</h2>
<h2 :style="{fontSize: finalSize, background : finalColor}">你好呀</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
finalSize: "100px",
finalColor: "red"
}
})
</script>
用v-bind动态绑定style (数组写法, 我感觉这个写法很蠢, 不常用)
- 在数组中传入一个一个的对象, 对象是键值对写法, 与对象写法一致
<div id="app">
<h2 :style=[baseStyle]>你好啊</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
baseStyle: {
backgroundColor: "red"
}
}
})
</script>