Vue 指令基础语法
文章目录
指令是带有 v-前缀的特殊属性,指令用于在表达式的值改变时,将某些行为应用到dom上.
1.v-text 输出文本指令
<div id="app">
<!-- 与下面文本插值效果一样 -->
<p v-text='name'></p>
<!-- 文本插值 -->
<p>{{name}}</p>
<!-- 某些情况下,这种文本插值更灵活 -->
<p>我的名字{{name}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'lechar'
}
});
</script>
v-text 绑定在html元素上, 文本插值{{}} 双大括号 可以在想要的html内容上直接输出
2.v-html 输出html代码
<div id="app">
<!-- 实际上v-text和v-html的区别,就是原生js中innerText和innerHTML的区别 -->
<p v-html='strHtml'></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'lechar',
strHtml: '<button>点击我</button>'
}
});
</script>
实际上v-text和v-html的区别,就是原生js中innerText和innerHTML的区别
3.v-show 切换元素的 display CSS 属性(显示隐藏)
<div id="app">
<!--
v-show指令:根据表达式的真假值,切换元素的display css属性
注意:一般用于bool类型,其他类型也可以,但是要注意类型的隐式转换
-->
<button v-show='isShow'>开始</button>
<button v-show='!isShow'>结束</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>
注意:一般用于bool类型,其他类型也可以,但是要注意类型的隐式转换
4.v-if 通过表达式的值来控制元素是否渲染
<div id="app">
<!-- v-if 的效果与 v-show 基本一样,但是原理上还是有本质区别 -->
<button v-if='isShow'>开始</button>
<button v-if='!isShow'>结束</button>
<button v-show='isShow'>显示</button>
<button v-show='!isShow'>隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>
5.v-if 和v-else 和v-else-if组合
<div id="app">
<p v-if='score>=90'>优秀</p>
<p v-else-if='score>=80'>良好</p>
<p v-else-if='score>=60'>及格</p>
<p v-else>差</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isShow: true,
score: 23
}
});
</script>
注意:v-else-if必须和v-if配合使用, v-else 必须和v-if或v-else-if配合使用 v-else-if可以链式调用
6.template 包裹元素,不会渲染到页面上
一般和v-if配合使用
作用:试想一下,v-if是一个指令,必须作用于元素上,如果我想控制一大片的代码块在if的条件中怎么办呢?比如如下代码
<style>
#app {
display: flex;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
background: pink;
}
</style>
<div id="app">
<div v-if="isShow">
<div class="box">第一</div>
<div class="box">第二</div>
<div class="box">第三</div>
</div>
<template v-if="isShow">
<div class="box">第四</div>
<div class="box">第五</div>
<div class="box">第六</div>
</template>
</div>
如上代码, template模块的,如果我使用div去包裹,会改变原有的样式布局,但是使用template是不会渲染到页面的,配合v-if使用,可以控制条件渲染的分组处理
7.v-if和v-show区别
-
v-if是真正的条件渲染,当条件为true时渲染元素，创建元素 。当条件为false时，不渲染元素,销毁元素
扫描二维码关注公众号，回复： 11355739 查看本文章
-
v-if有更高的切换开销,切换时要做销毁和创建操作,而 v-show 有更高的初始渲染开销,无论条件真假,都会渲染 如果需要频繁的切换显示隐藏,使用v-show更好点,其他情况时使用v-if
-
v-if可以搭配v-else和v-else-if使用 . v-show无法与其他指令搭配
-
v-if可以搭配template使用,v-show不能
8.v-for 主要用于循环数据
1.循环数组
第一种写法:
v-for="item in xxxx ";
item 是循环的每一项
in 固定写法
xxxx 循环体
第二种写法:
v-for="(item,index) in xxx";
item 是循环的每一项
index 下标
in 固定写法
xxxx 循环体
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
<ul>
<li v-for='(item,index) in list'>{{index+"-"+item}}</li>
</ul>
const vm = new Vue({
el: '#app',
data: {
list: ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'],
UserObj: {
name: 'liuqiao',
age: 28,
sex: '男',
}
}
});
2.循环对象
第一种写法:
v-for=“item in xxxx”
item 是循环的每一项
in 固定写法
xxxx 循环体
第二种写法:
v-for="(value, key, index) in xxxx"
value 对象的值
key 对象的属性
index 下标
in 固定写法
xxxx 循环体对象
<ul>
<li v-for='item in UserObj'>{{item}}</li>
</ul>
<ul>
<li v-for='(value,key,index) in UserObj'>
{{index}}-{{key}}:{{ value }}
</li>
</ul>
const vm = new Vue({
el: '#app',
data: {
list: ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'],
UserObj: {
name: 'liuqiao',
age: 28,
sex: '男',
}
}
});
3.循环字符串
v-for=“item in ‘张三’”
<ul>
<li v-for="item in '张三'">{{item}}</li>
</ul>
4.循环数字
v-for=“item in 10” => v-for=“item in [1,2,3,4,5,6,7,8,9,10]” 循环数字相当于循环这个数组 数字只能为正整数
<ul>
<li v-for="item in 10">{{item}}</li>
</ul>
9.v-on指令 用于事件绑定
语法: v-on:xxxx=‘yyyyy’ 如 v-on:click=‘show’
xxxx表示事件的类型 如click,mouseenter ,dblclick,mouseup等
yyyy表示事件的名字,必须在vue实例中methods定义了的
1.事件处理函数
v-on:click=‘show’
2.内联语句
v-on:click='show()'加了括号,不会立即执行
v-on绑定事件简写方式,一般使用这种
@click=‘show’
上述中,事件处理函数和内联语句的区别:
事件处理函数会自动接收到一个event对象(事件对象),内联写法不会
如果要想内联写法也会得到event对象,那么需要通过在括号中传递 event 比如 @click=‘show($event)’
<div id="app">
<!--
v-on指令 用于事件绑定
语法: v-on:xxxx='yyyyy' 如 v-on:click='show'
xxxx表示事件的类型 如click,mouseenter ,dblclick,mouseup等
yyyy表示事件的名字,必须在vue实例中methods定义了的
1.事件处理函数
v-on:click='show'
2.内联语句
v-on:click='show()'加了括号,不会立即执行\
简写@click='show'
-->
<button v-on:click='show'>按钮1</button>
<!-- 这里会自动接收到event对象 -->
<button @click='show'>按钮2</button>
<!-- 这里接收不到event对象 -->
<button @click='hide()'>按钮3</button>
<!-- 需要通过$event传递 -->
<button @click='hide($event)'>按钮4</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'lechar'
},
/**
* methods存放的是函数
* 1.里面的每一个函数,都可以通过vm 实例对象去访问 vm.fn()
*/
methods: {
show: function (event) {
console.log(event);
console.log('show方法');
},
//两种方式都可以,这是函数的简写形式
hide(event) {
console.log(event);
console.log('hide方法');
}
}
});
</script>
10 . v-on修饰符,又叫事件修饰符
语法:
v-on:eventName 修饰符1.修饰符2.修饰符3=‘处理方法’ 如v-on:stop.prevent=‘show’ 支持链式操作
@eventName 修饰符
常见修饰符:
-
stop: 阻止冒泡
-
prevent: 阻止默认行为
-
capture:让事件行为是一种捕获行为
-
self:当事件绑定在事件本身上才触发, 和事件委托类似,事件源找到触发的元素
-
keyCode和keyAlias特定的键盘修饰符
keyAlias 有哪些内置的呢：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
还可以通过 Vue.config.keyCodes 来自定义键码别名
Vue.config.keyCodes.f1 = 13
-
once 只绑定一次事件
-
left 绑定鼠标左键
-
right 绑定鼠标右键
-
middle 绑定鼠标滚轮键
-
passive !!! 演示不出来。!!!
系统修饰符
-
ctrl
-
shift
-
alt
-
meta windows上就是windows图标的那个。mac上 command 键
-
exact 精准匹配你的左手是否听从指挥
<div id="app">
<!-- stop阻止冒泡 -->
<div class="box" @click='show'>
<button @click.stop='hide'>按钮一</button>
</div>
<!-- prevent阻止默认行为 -->
<div class="box">
<a href="http://www.baidu.com" @click.prevent='show'>百度</a>
</div>
<!--capture 事件捕获行为,由外到里逐级触发 -->
<div class="box" @click.capture='show'>
<button @click='hide'>按钮二</button>
</div>
<!-- self 只在绑定的当前元素触发 -->
<div class="box" @click.self='show'>
<button>按钮三</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
methods: {
show: function (event) {
console.log(event);
console.log('show方法');
},
//两种方式都可以,这是函数的简写形式
hide(event) {
console.log(event);
console.log('hide方法');
}
}
});
</script>
以下是键码示例
<div id="app">
<!--
同时按 ctrl + 点击
左手 ctrl 键只要按住了就好了，不限制你其余的4个手指去按别的系统键
ctrl + shift + 点击 也能触发
-->
<button @click.ctrl="fn3">点我</button>
<!--
只能 ctrl + 点击
ctrl + shift + 点击 这样就不能触发了
-->
<button @click.ctrl.exact="fn3">点我</button>
<button @click.once="fn3">点我，只触发一次</button>
<input type="text" placeholder="请输入" @keyup="fn1($event)" />
<!-- {keyCode} -->
<input type="text" placeholder="请输入" @keyup.13="fn2($event)" />
<!-- {keyAlias} 键码别名 -->
<input type="text" placeholder="请输入" @keyup.f1="fn2($event)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.config.keyCodes.f1 = 13;
var vm = new Vue({
el: "#app",
methods: {
fn1(event) {
console.log(event.keyCode);
if (event.keyCode === 13) {
alert("按了回车键");
}
},
fn2() {
alert("按了回车键");
},
fn3() {
console.log("fn3");
},
},
});
</script>
11.v-bind 将数据绑定到元素的属性上,如:title,style,id,class
语法:
v-bind:xxx=‘yyyy’
xxxxx表示属性
yyyyy表示数据
可以简写
:xxx=‘yyyy’
<div id="app">
<p v-bind:title='UserObj.name'>v-bind演示</p>
<!-- 简写方式,去掉v-bind -->
<p :title='UserObj.name'>v-bind简写</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
list: ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'],
UserObj: {
name: 'liuqiao',
age: 28,
sex: '男',
}
}
});
</script>
```