vue常用指令列表
v-once
默认情况下,
vue事件是可以重复触发的,但是在特定的情况下, 我们只想要事件执行一次.所以就有了v-once
<div id="app">
<input type="text" placeholder="请输入数据" v-model="name">
<p v-once>{{ name }} <span>我会进行一次渲染</span></p>
<p>{{ name }} <span>我会进行多次渲染</span></p>
</div>
<script>
new Vue({
el: "#app",
data:({
name:"张三",
})
})
</script>
v-cloak
vue如果渲染的时候使用的是{{data}}进行渲染的话,在网络不好的情况,会显示{{data}},这样子的用户体验并不好,所以就有了 v-cloak 这个指令
<style>
[v-cloak] {
/* v-cloak 必须配合这个style 进行隐藏 */
display: none;
}
</style>
<div id="app">
<p v-cloak>{{ name }} <span>如果网络差,我则不会显示</span></p>
<p>{{ name }} <span>无论网络状态如何 ,我都会显示</span></p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: ({
name: "张三",
})
})
</script>
v-text and v-html
v-text 等同于 innerText
v-html 等同于 innerHTML
<div id="app">
<!-- 数据插值 : 把数据插入到指定位置 ,并且不会覆盖原有的内容 -->
<p>{{name}}</p>
<p>+++++n{{name}}+++++</p>
<!-- 数据插值 : 不会解析HMTL标签 -->
<p>{{span}}</p>
<!-- v-text 直接渲染数据, 并且会覆盖原有的数据 -->
<p v-text="name"></p>
<p v-text="name">++++++++++</p>
<!-- v-text 不会渲染 HTML 标签 -->
<p v-text="span"></p>
<!-- v-html 会覆盖原有数据, 并且可以渲染数据和html标签 -->
<p v-html="name">+++++++++</p>
<p v-html="span">+++++++++</p>
</div>
<script>
new Vue({
el: "#app",
data: ({
name: "张三",
span: "<span> 我是span标签 </span>"
})
})
</script>
v-if and v-else-if and v-else
<div id="app">
<!-- v-if 如果为假, 则压根不会创建元素 -->
<input type="text" v-model="age">
<!-- v-if 会接收数据模型中的数据 , 判断是否是真 ,为真就显示 -->
<p v-if="show">我会显示</p>
<p v-if="hidden">我不会显示</p>
<p>------</p>
<!-- v-if 可以接收行内表达式 -->
<p v-if="age >= 18">成年人</p>
<p v-if="age < 18">未成年</p>
<!-- 也可以接收直接传值 -->
<p v-if="true">我会显示</p>
<p v-if="false">我会显示</p>
<!-- v-if 也可以搭配 v-else 和 v-else-if 进行使用 -->
<!-- v-else-if如果不需要, 也是可以省略的 , 但是需要主要注意的是 ,else必须紧跟if后面 -->
<input type="text" v-model="abc">
<p v-if="abc === 'a'">a</p>
<p v-else-if="abc === 'b'">b</p>
<p v-else-if="abc === 'c'">c</p>
<p v-else>not abc</p>
</div>
<script>
new Vue({
el: "#app",
data: ({
show: true,
hidden: false,
age: 18,
abc: "a"
})
})
</script>
v-show
<div id="app">
<!-- v-show 和 v-if 特性相同, 而不同之处则是它无论条件是否成立 ,都会创建元素, 控制display,而v-if则会动态创建元素与否 -->
<p v-show="show">我会显示</p>
<p v-show="hidden">我不会显示</p>
<p v-show="true">我会显示</p>
<p v-show="false">我不会显示</p>
<input type="text" v-model="age">
<p v-show="age >= 18">我会显示</p>
<p v-show="age < 18">我不会显示</p>
</div>
<script>
new Vue({
el: "#app",
data: ({
show: true,
hidden: false,
age: 18
})
})
</script>
v-model
<div id="app">
<input placeholder="请输入数据" type="text" v-model="name">
<p>{{ name }}</p>
</div>
<script>
new Vue({
el: "#app",
data: ({
name: "张三",
})
})
</script>
v-for
<div id="app">
<!-- 单属性 -->
<!-- <li v-for="value in list">{{value}}</li> -->
<ul>
<!-- 遍历数组 -->
<li v-for="(value,index) in listArr">{{index}}---{{value}}</li>
</ul>
<ul>
<!-- 遍历对象 -->
<li v-for="(value,key) in listObj">{{key}} --- {{value}}</li>
</ul>
<ul>
<!-- 遍历字符 -->
<li v-for="(value,index) in 'abcdefghijklmn'">{{index}}---{{value}}</li>
</ul>
<ul>
<!-- 遍历数字 -->
<li v-for="(value,index) in 10">{{index}}---{{value}}</li>
</ul>
</div>
<!-- v-for 相当于 js 中的 for in 循环 -->
<!-- v-for 可以循环遍历 数组 / 对象 / 字符 / 数字 -->
<script>
new Vue({
el: "#app",
data: ({
listArr: ["张三", "李四", "王五", "赵六"],
listObj: {
name: "张三",
age: "18",
sex: "男"
}
})
})
</script>
v-bind
<div id="app">
<!-- value 绑定 -->
<input type="text" v-bind:value="name">
<input :value="name" type="text">
<input :value="age + 10 " type="text">
</div>
<!-- v-bind 可以给元素的属性动态绑定数据 -->
<!-- v-bind 取值特点: 只要是一个合法的 js 表达式即可 -->
<!-- v-bind 可以简写为 : -->
<script>
new Vue({
el: "#app",
data: ({
name: "张三",
age: 18,
})
})
</script>
v-bind绑定类名
<style>
.size {
font-size: 25px;
font-weight: bold;
}
.color {
color: red;
}
.active {
background: skyblue;
}
</style>
<div id="app">
<!--v-bind 动态绑定类名 -->
<p :class="['size','color','active']">我是段落</p>
<!--v-bind 按需加载类名-->
<p :class="['size','color', flag ? 'active' : '' ]">按需加载active</p>
<!--v-bind 对象方式按需加载-->
<p :class="['size','color',{active:false}]">对象当时按需加载</p>
<!--v-bind 获取data中的对象进行加载-->
<p :class="obj">获取data中的对象</p>
</div>
<!--
应用场景
1. 从服务器端获取样式返回给前端控制界面
2. 按需加载类名
3. v-bind 无论绑定什么 ,一切都是为了动态控制
-->
<script>
new Vue({
el: "#app",
data: ({
flag: true,
obj: {
size: true,
color: true,
active: false
}
})
})
</script>
v-bind绑定样式
<div id="app">
<!--动态绑定 style-->
<!--注意点 : key和value最好都用引号包裹起来, 否则 如果 key 带有 - 会导致无效 -->
<p :style="{color:'red'}">我是段落1</p>
<p :style="{'color':'red'}">我是段落2</p>
<!--带 - 的 key -->
<!--第一种方式, 用引号包裹住 key -->
<p :style="{'font-size':'50px'}">我是段落3</p>
<!--第二种方式, 把 key 转换为驼峰 -->
<p :style="{fontSize :'50px'}">我是段落4</p>
<!--
总结上两点 :
key 值可以不用 引号包裹起来, 但是 如果遇到带 - 的key 就必须转换为 驼峰命名法
value 值必须用引号包裹起来, 无论怎么写的情况下,都需要
-->
<!--从model中引入-->
<p :style="obj">我是段落5</p>
<!--从model中引入多个对象-->
<p :style="[obj,obj1]">我是段落6</p>
</div>
<script>
new Vue({
el: "#app",
data: ({
obj: {
'color': 'red',
'font-size': '50px',
'font-width': '700'
},
obj1: {
'background': 'skyblue'
}
})
})
</script>
v-on
<div id="app">
<!--v-on 基础使用-->
<!--click是事件名称 ，后面必须是 函数名称，函数名称的（）可写可不写-->
<button v-on:click="myFn()">我是按钮</button>
<!--v-on简写 -->
<button @click="myFn()">我是按钮</button>
</div>
<script>
new Vue({
el: "#app",
data: ({}),
//methods钩子 , vue 中所以需要执行的方法 ,都写在 methods 中
methods: {
myFn() {
alert("123");
}
}
})
</script>
v-on事件修饰符
<style>
.a {
width: 300px;
height: 300px;
background: red;
}
.b {
width: 200px;
height: 200px;
background: blue;
}
.c {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="app">
<!--
.once - 只触发一次回调。
.prevent - 调用 event.preventDefault()。
.stop - 调用 event.stopPropagation()。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.capture - 添加事件侦听器时使用 capture 模式。
-->
<!--默认可以重复执行-->
<button @click="myFn">可以重复执行</button>
<!-- .once 让函数只执行一次 -->
<button @click.once="myFn">只执行一次</button>
<!-- a标签默认事件会跳转 -->
<a @click="myFn" href="https://www.baidu.com">我是有默认事件的</a>
<!-- .prevent 阻止默认事件 -->
<a @click.prevent="myFn" href="https://www.baidu.com">我的默认事件被阻止了</a>
<hr>
<!--嵌套关系默认是会有冒泡事件-->
<div @click="myFnA" class="a">
<div @click="myFnB" class="b">
<div @click="myFnC" class="c"></div>
</div>
</div>
<hr>
<!--阻止冒泡事件 -->
<div @click.stop="myFnA" class="a">
<div @click.stop="myFnB" class="b">
<div @click.stop="myFnC" class="c"></div>
</div>
</div>
<hr>
<!--让鼠标只有点击在他本来的元素的时候 ,才触发事件, 阻止冒泡和捕获-->
<div @click.self="myFnA" class="a"> <!-- 只添加了给A ,所以冒泡不会给到 A-->
<div @click="myFnB" class="b">
<div @click="myFnC" class="c"></div>
</div>
</div>
<hr>
<!--把默认的事件冒泡事件改变为 事件捕获-->
<div @click.capture="myFnA" class="a">
<div @click.capture="myFnB" class="b">
<div @click.capture="myFnC" class="c"></div>
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: ({}),
methods: {
myFn() {
alert("123");
},
myFnA() {
console.log("A");
},
myFnB() {
console.log("B");
},
myFnC() {
console.log("C");
},
}
})
</script>
v-on按键修饰符
<div id="app">
<!--
vue 提供了很多默认的按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
-->
<!--使用按键修饰符进行触发事件-->
<input @keyup.enter="myFn" type="text" value="按enter键触发">
<!--使用任意按键触发事件-->
<input @keyup="myFn" type="text" value="按任意键触发">
<!--自定义按键触发事件 例如 F2-->
<!--格式: keyup.keyCode码 -->
<input @keyup.113="myFn" type="text" value="按F2触发事件">
<!--但是直接写 keyCode码 并不好识别是按了什么按键, 所以可以使用别名代替-->
<input @keyup.f2="myFn" type="text" value="按F2触发事件">
<!--按键组合修饰符-->
<!-- Alt + C -->
<input @keyup.ctrl.c="clear" value="按 Ctrl + C 触发事件">
</div>
<script>
//定义全局 按键修饰符 别名
Vue.config.keyCodes.f2 = 113;
Vue.config.keyCodes.c = 67;
new Vue({
el: "#app",
data: ({
name: "张三"
}),
methods: {
myFn() {
alert(this.name);
},
clear() {
alert("不允许复制");
}
}
})
</script>
v-on注意点
<div id="app">
<!--
1.使用v-on的时候 , 调用函数名称后面的 () 可写, 可不写 ,但是如果要传递参数,则必须写
-->
<button @click="myFn">我没有写()</button>
<button @click="myFn()">我写了()</button>
<!--
2. 使用v-on传参数的格式
-->
<button @click="param('李四')">点击我 , 会传参李四</button>
<!--传递原生事件对象 -->
<button @click="event('李四',$event)">点击我 , 会传递李四和原生事件对象</button>
<!--
3.在 vue 中想使用data 中的数据, 必须加上 this .
-->
</div>
<script>
new Vue({
el: "#app",
data: ({
name: "张三"
}),
methods: {
myFn() {
alert(this.name);
},
param(name) {
alert(name);
},
event(name, event) {
console.log(name);
console.log(event);
}
}
})
</script>
自定义全局指令
<div id="app">
<p v-color="'red'">我是段落</p>
<input type="text" v-focus value="页面渲染后聚焦">
<div v-wh="200"></div>
<p v-demo="{text:'我是一个文本',color:'blue'}"></p>
</div>
<script>
/*
自定义指令格式:
Vue.directive('名称',{回调函数})
directive接收两个参数
第一个参数 : 名称 (不需要加 v-)
第二个参数 : 业务逻辑回调函数
*/
/*
生命周期钩子
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
*/
Vue.directive('color', {
//el代表所绑定的元素
bind: function (el, obj) {
// el.style.color = "red";
el.style.color = obj.value;
}
});
Vue.directive('wh', {
// binding 代表传进来的参数
bind: function (el, binding) {
el.style.width = binding.value + "px";
el.style.height = binding.value + "px";
el.style.background = "red"
}
});
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
Vue.directive('demo', {
bind: function (el, binding) {
el.innerHTML = binding.value.text;
el.style.color = binding.value.color;
}
});
new Vue({
el: "#app",
data: {},
methods: {}
})
</script>
自定义局部指令
<div id="app">
<p v-color="'red'">我是段落</p>
</div>
<script>
new Vue({
el: "#app",
data: {},
methods: {},
directives: {
'color': {
bind: function (el, obj) {
el.style.color = obj.value;
}
}
}
})
</script>
