指令：是Vue提供的模板语法，用于辅助开发者渲染页面的基本结构

Vue中的指令按照不同的用途分 6 类：
① 内容渲染指令
② 属性绑定指令
③ 时间绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

注意：指令是 vue 开发中最基础，简单的知识点。

1、内容渲染指令

v-text

v-text 会覆盖元素内部原有的内容

用法示例

<!--吧 username 对应的值，渲染到第一个 p 标签中-->
<p v-text="username"></p><!--把 gender 对应的值，渲染到第二个 p 标签中-->
<!--注意： 第二个 p 标签中的文本 ‘性别’ 会被覆盖掉-->
<p v-text="gender">性别</p>

{{}} 差值表达式

解决v-text覆盖内容问题
实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容
里面只能写一些简单的表达式

用法示例

<p>姓名：{{ username }}</p>
<p>性别：{{ gender }}</p>

v-html

可以渲染标签，也会覆盖元素内容

用法示例

<p v-html = "info"></p>

完整实验内容

<body><div id="app"><!-- 会覆盖元素内部的默认值 --><p v-text = "username"></p><p v-text = "gender">性别：</p><!-- 差值表达式，解决内容覆盖问题 --><hr><p>{{ username }}</p><p>性别：{{ gender }}</p><hr><!-- v-html 可以渲染标签内容 --><p v-text = "info"></p><p>{{ info }}</p><p v-html = "info"></p></div><!-- 导入Vue的库文件 --><script src="./lib/vue-2.6.12.js"></script><!-- 创建Vue的实例对象 --><script>const vm = new Vue({//告诉vm要控制哪个区域el: '#app',//data 要渲染的页面上的数据data: {username: 'zhangsan',gender: '女',info: '<h4 style="color:red; font-weight: bold;">欢迎来到黑马学习 vue.js</h4>'}});</script>
</body>

2、属性绑定指令

由于{{}}只能在内容区使用，不能在标签上使用
绑定属性使用 v-bind: 简写为:
用法示例

<input type="text" :placeholder="tips">//数据源
tips: '姓名'

完整实验

<body><div id="app"><input type="text" :placeholder="tips"><hr><img :src="photo" alt="" style="width: 150px;"><hr><!-- 差值的运算 --><div>1 + 2 的结果是：{{ 1+2 }}</div><!-- 差值中可以使用简单的方法 --><div>{{ tips }}翻转的结果是 ； {{ tips.split('').reverse().join('') }}</div><!-- 双引号里面的内容可以看作是 js 代码，所以需要加单引号说明是字符串 --><div :title="'box' + index">div</div></div><!-- 导入Vue的库文件 --><script src="./lib/vue-2.6.12.js"></script><!-- 创建Vue的实例对象 --><script>const vm = new Vue({//告诉vm要控制哪个区域el: '#app',//data 要渲染的页面上的数据data: {tips: '姓名',photo: 'https://cn.vuejs.org/images/logo.svg',index: 1}});</script>
</body>

3、事件绑定

v-on: 绑定事件简写@
事件处理函数需要绑定在methods节点下
<button v-on:click="sub"> - 1</button>

在method方法中如果要修改数据源可以用 this. 的方式获取并修改数据源的值

<body><div id="app"><p>count 的值是 ： {{ count }}</p><!-- <button v-on:click="add"> + 1</button> --><button v-on:click="sub"> - 1</button></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',//data 要渲染的页面上的数据data: {count: 0},methods: {//ES6 以后推荐使用下面的简写方式声明方法// sub: function(){//     console.log("ok");// },sub(){this.count--;console.log("触发了sub的处理函数");}}});</script>
</body>

案例
点击 +n 如果是奇数按钮变色

案例难点：

如何获取点击事件对象

如何从事件对象中获取触发事件对象的dom元素

如何添加背景颜色

<body><div id="app"><p>count 的值是 ： {{ count }}</p><!-- <button v-on:click="add"> + 1</button> --><button v-on:click="sub"> - 1</button><!-- 绑定事件的时候可以 传参 --><button v-on:click="add(1,$event)"> + n</button></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {count: 0},methods: {//如果方法没有传参，且该方法只有一个参数，默认会将事件对象 e 传输过来//如果传了参数，事件对象会被覆盖调，可以手动传 一个内置变量 $event//事件对象 中 有一个事件触发对象 e.target 可以拿到触发事件的对象DOM元素add(n,e){//console.log(vm === this) 这里的 this 就是vm实例对象this.count += n;console.log(e);// if(this.count % 2 === 0 ){//     e.target.style.backgroundColor = 'red';// } else {//     e.target.style.backgroundColor = '';// }const nowBgColor = e.target.style.backgroundColor;e.target.style.backgroundColor = nowBgColor === 'cyan' ? '':'cyan';},//ES6 以后推荐使用下面的简写方式声明方法// sub: function(){//     console.log("ok");// },sub(){this.count--;console.log("触发了sub的处理函数");}}});</script>
</body>

事件修饰符

案例需求

点击链接会跳转到百度，阻止默认行为并打印一句话

<body><div id="app"><!-- 事件绑定的修饰符： 阻止默认行为 --><a href="http://www.baidu.com" @click.prevent = "show">跳转到百度首页</a><hr><div style="height: 150px; background-color:orange; padding-left: 100px; line-height: 150px;"@click="divHandler"><!-- 阻止冒泡的属性 --><button @click.stop = "btnHandler">按钮</button></div></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {},methods: {/*不使用事件修饰符show(e) {e.preventDefault();console.log('点击了a 链接');},*///使用事件修饰符show(e) {console.log('点击了a 链接');},btnHandler(e){//e.stopPropagation();console.log("btnHandler");                   },divHandler(){console.log("divHandler")}}});</script>
</body>

按键修饰符

在监听键盘事件时，需要判断详细的按键，可以添加按键修饰符
案例

需求：输入框获取焦点的时候 esc 清空内容，enter 发送Ajax

如何绑定指定按键

如何获取事件触发的输入框dom

如何获取输入框中的值，并清空

<body><div id="app"><input type=" text" @keyup.esc="clearInput"><input type="text" @keyup.enter="submit"><input type="text" @keyup.enter="submit"  @keyup.esc="clearInput"></div><!-- 导入Vue的库文件 --><script src="./lib/vue-2.6.12.js"></script><!-- 创建Vue的实例对象 --><script>const vm = new Vue({//告诉vm要控制哪个区域el: '#app',//data 要渲染的页面上的数据data: {},methods: {clearInput(e){e.target.value='';console.log("clearInput");},submit(e){console.log("commit ajax")}}});</script>
</body>

4、v-model

对于表单元素

input
- type=“radio”
- type=“checkbox”
- type=“xxx”
textarea
select

双向数据绑定
内部会根据类型进行属性的绑定

<body><div id="app"><p>用户的名字是 {{ username }}</p><input type="text" v-model="username"><hr><select v-model="city"><option value="">请选择城市</option><option value="1">北京</option><option value="2">上海</option><option value="3">安徽</option></select></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {username: 'zhangsan',city: "2"}});</script>
</body>

v-model 的修饰符

number 的演示

<body><div id="app"><input type="text" v-model="n1"> + <input type="text" v-model="n2"> = <span>{{n1 + n2}}</span></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {n1: 1,n2: 2,}});</script>
</body>

<body><div id="app"><!-- v-model 的属性修饰符的添加 --><input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {n1: 1,n2: 2,}});</script>
</body>

trim 的演示

分析

如何获取input框中的值

如何使用模板字符串打印

如何去除首尾空格

<body><div id="app"><p>trim 演示</p><input type="text" v-model.trim = "username"> <button @click="showName">打印</button></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {username: "zs"},methods:{showName(){console.log(`用户名是： “${this.username}”`)}}});</script>
</body>

lazy

<body><div id="app"><p>lazy 演示</p><!-- 中间的变化过程不会同步过来，会在失去焦点的时候同步数据 --><input type="text" v-model.lazy = "username"> </div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {username: "zs"}});</script>
</body>

完整实验代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- v-model 的属性修饰符的添加 --><p>number 演示</p><input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span><br><br><hr><p>trim 演示</p><input type="text" v-model.trim = "username"> <button @click="showName">打印</button><br><br><hr><p>lazy 演示</p><!-- 中间的变化过程不会同步过来，会在失去焦点的时候同步数据 --><input type="text" v-model.lazy = "username"> </div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {n1: 1,n2: 2,username: "zs"},methods:{showName(){console.log(`用户名是： “${this.username}”`)}}});</script>
</body>
</html>

5、条件渲染指令

如果频繁的使用显示隐藏，使用 v-show
如果刚进入时不需要显示，后续也可能不会显示使用 v-if
在实际开发中不用考虑性能问题，直接使用v-if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body><div id="app"><p v-if="flag">这是被 v-if 控制的元素</p><p v-show="flag">这是被 v-show 控制的元素</p></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {flag: true}});</script>
</body>
</html>

v-else-if
v-else

v-else-if 必须配合 v-if 指令一起使用，否则它将不会被识别！

<body><div id="app"><div v-if="type === 'A'">优秀</div><div v-else-if="type === 'B'">良好</div><div v-else-if="type === 'C'">一般</div><div v-else>差</div></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {type: "A"}});</script>
</body>

6、循环渲染指令

v-for
示例

data: {list:[{id:1,name:'zs'},{id:2,name:'ls'}]
}<ul><li v-for="item in list">姓名是： {{item.name}}</li>
</ul>

案例：

如何添加bootstrap 样式

为什么添加key

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body><div id="app"><table class="table table-bordered table-hover table-striped"><!-- 表头 --><thead><th>索引</th><th>Id</th><th>姓名</th></thead><tbody><!-- v-for 循环的item,可以在自己的标签上使用，也可以在子标签中使用 --><!-- 使用v-for 就需要绑定一个 key --><tr v-for="(item,index) in list" :key="item.id" :title="item.name"><td>{{ index }}</td><td>{{ item.id }}</td><td>{{ item.name }}</td></tr></tbody></table></div><!-- 导入Vue的库文件 --><script src="./lib/vue-2.6.12.js"></script><!-- 创建Vue的实例对象 --><script>const vm = new Vue({//告诉vm要控制哪个区域el: '#app',//data 要渲染的页面上的数据data: {list: [{id: 1,name: '张三'},{id: 2,name: '李四'},{id: 3,name: '王五'}],username: 'zhangsan'}});</script>
</body>
</html>

就会出现这种问题,如果使用ID绑定就不会出现这种问题

实验代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 添加用户的区域 --><div><input type="text" v-model="name"><button @click="addNewUser">添加</button></div><!-- 用户列表区域 --><ul><li v-for="(user, index) in userlist" :key="user.id"><input type="checkbox" />姓名：{{user.name}}</li></ul></div><script src="./lib/vue-2.6.12.js"></script><script>const vm = new Vue({el: '#app',data: {// 用户列表userlist: [{ id: 1, name: 'zs' },{ id: 2, name: 'ls' }],// 输入的用户名name: '',// 下一个可用的 id 值nextId: 3},methods: {// 点击了添加按钮addNewUser() {this.userlist.unshift({ id: this.nextId, name: this.name })this.name = ''this.nextId++}},})</script>
</body></html>

代码地址
https://codechina.csdn.net/weixin_44235759/vue-instruction/edit

Vue ---- 指令相关推荐

Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue指令练习实例-学生信息录入
很好的一个可以感受Vue.js的MVVM模型,数据和模型双向绑定的实例练习. <!doctype html> <html lang="en"> <he ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...
VUE指令大全(详解)
大家好我是迁客,一个初入行的小白!痴迷技术,对programming有着极大的兴趣和爱好.从今天起,开始写自己个人成长的第一篇博客!既是对自己的一个学习技术的一个记录,也是督促自己,坚持下去!加油Fi ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...

Vue ---- 指令

1、内容渲染指令

2、属性绑定指令

3、事件绑定

事件修饰符

按键修饰符

4、v-model

v-model 的修饰符

5、条件渲染指令

6、循环渲染指令

Vue ---- 指令相关推荐

最新文章

热门文章