1.v-bind 绑定 语法糖是 :冒号
常用于绑定一些 标签属性 等
<img :src="imgUrl"> // <img v-bind:src="imgUrl">
注意加冒号 里面解析的是js语法 不加 解析的是 字符串 如果想要解析成数字 最好还是加冒号
2.v-if // v-show
都可以用于 元素的显示和隐藏
v-if 是利用元素的创建和删除 导致 元素隐藏的
v-show 是利用 display:none//block 使元素显示隐藏 面试经常问道
3.v-model 表单元素双向绑定
<input type="text" v-model="username">
4.v-html / v-text
v-text 只能解析里面文本
v-html 能解析 里面的 html代码片段
5. v-if // v-else
用来控制元素 显示 v-if 显示的话 v-else 就不显示 反之亦然
6.v-once
元素 只渲染一次
7.v-for 遍历对象或者数组 很常用
<ul>
<li v-for="item in listItem" :key="item.id">{{item.name}} </li>
<ul>
8. v-cloak 隐身衣
ajax请求数据的数据 前台还没有数据 不能让用户看到空白的页面
[v-cloak]{
display:none; // 在数据回来渲染完成之后 自动去掉这个属性
}
<div id="app" v-cloak> </app>
7.v-on 事件绑定 语法糖 @
给元素绑定事件
<button @click="click">点击</button>
事件修饰符
.stop 阻止事件继续传播
.prevent 阻止元素默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
如果是封装的一个组件 想要触发原生的点击方法 则是
@click.native="" 这样绑定在组件上面
好了 暂时到此结束了