一.插值操作
1.Mustache (双大括号)
{{}}
例:
<div id="app"> <p>{{message}}</pp> <p>{{message}} 易烊千玺!</p> <p>{{counter * 2p> </div>3 <script> const app = new Vue({ el: '#app', data: { message: '黄子韬', counter: 100 }, }) </script>
页面渲染效果
黄子韬
黄子韬 易烊千玺
200
2.v-once
表示元素只渲染一次
3.v-html
v-html不仅可以渲染数据,而且可以解析标签
<div id="app">
<p v-html="msg"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "<h1 style='color:red'>这是一个h1元素内容</h1>"
}
});
</script>
页面效果:
这是一个h1元素内容
4.v-text
作用与Mustache一致 ,接受一个string类型
<div id="app">
<p>{{message}}</p>
<p v-text>{{message}}</p>
</div>3
<script>
const app = new Vue({
el: '#app',
data: {
message: '黄子韬',
},
})
</script>
页面渲染效果:
黄子韬
黄子韬
v-html与v-text区别:
v-text和{{}}表达式渲染数据,不解析标签。
v-html不仅可以渲染数据,而且可以解析标签。
5.v-pre
用于跳过这个元素和它的子元素的编译过程,显示原本Mustache语法
<div id="app">
<p>{{message}}</pp>
<p v-pre>{{message}}</p>
</div>3
<script>
const app = new Vue({
el: '#app',
data: {
message: '易烊千玺',
},
})
</script>
页面渲染效果
易烊千玺
{{message}}
6.v-clock
会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除
二.绑定属性
1.v-bind
用于绑定一个或多个属性值,或者像一个组件创建props值
用vue实例中的data绑定元素的src和href
v-bind语法糖 (:)更方便简洁
v-bind 绑定class (class后面是一个对象)
(1)直接通过{}绑定一个类
(2)也可以通过判断,传入多个值
(3)和普通的类同时存在,没有冲突
(4)如果过于复杂,可以放在一个methods或者computed中
v-bind绑定style
(1)对象语法
style="{key(属性名):value(属性值)}
style后面跟的是一个对象类型
key是css属性名称
value是具体赋的值,值可以来自data中的属性
(2)数组语法
style后面跟的是一个数组类型
可以写多个值以,隔开
三.计算属性
我们可能对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。
计算属性是写在实例的computed选项中的
每个计算属性都包含一个getter和setter
有了methods为什么还要在计算属性computed中写
因为计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。
四.事件监听
v-on
我们用一个监听按钮的点击事件,v-on:cilck=’counter++‘ 在metnods中定义
v-on也有语法糖 可以写成@click
v-on 参数 (1)如果该方法不需要额外参数,那么方法后可不添加(如果方法本身中有一个参数,那么会默认将原生事件evevt参数传递进去)
(2)如果需要同时传入某个参数,同时需要evevt时,可以通过$evevt传入事件
v-on修饰符
.stop 阻止事件冒泡
.self 当事件在该元素本身触发时才触发事件
.capture 添加事件侦听器是,使用事件捕获模式
.prevent 阻止默认事件
.once 事件只触发一次
五.条件判断
v-if v-else-if v-else
vue的条件指令可以根据表达式的值在Dom中渲染或销毁元素或组件
v-if:是惰性的,如果在初始渲染条件为false时,对应的元素及子元素不会渲染;直到条件第一次变为真时,才会开始渲染条件块。
v-if和v-show区别
v-if和v-show都可以决定一个元素是否渲染
当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏,v-show通过css中的display属性来控制
v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。