Vue 指令
时间:2019-10-09
本文章向大家介绍Vue 指令,主要包括Vue 指令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
v-text = '变量名' & v-heml=" 'html标签' "
<!-- 1) v-text指令同插值表达式,渲染普通文本 v-text='变量名' ,变量需要data提供变量值 2) v-html指令可以渲染有html语法的文本,能够解析html语法 v-heml=" 'html标签' " , 不加引号就是变量 -->
<body> <div id="app"> <p>{{ info }}</p> <!-- 文本指令渲染变量 --> <p v-text="info">ok</p> <!-- 文本指令渲染常量(基础数据类型) --> <p v-text="123"></p> <p v-text="true"></p> <p v-text="'abc' + info"></p> <p v-text="[1,2,3]"></p> <!-- html标签指令 --> <p v-html="'<b style=`color:red`>html</b>'"></p> <p v-text="'<b>text</b>'"></p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ info:'xionger', } }) </script>
反引号补充:
<script> // 1) js多行字符串 反引号 `` // 2) 反引号字符串中可以直接填充变量,语法为 `${变量名}` let s1 = `第一行 第二行 结束行`; console.log(s1); let name = 'Owen'; let age = 17.5; let s2 = ` name: ${name} age: ${age} `; console.log(s2); </script>
- 事件指令 | v-on:事件名="函数名(参数...)" / @事件名="函数名(参数们)"
<!-- 1) 语法:v-on:事件名="函数名(参数...)" 2) 简写:@事件名="函数名(参数们)" 3) 用methods实例成员提供 事件函数 的实现 补充: @事件='方法' 默认传入事件对象 $event @事件='方法()' 不传递任何参数 @事件='方法(参数...)' 只传递自定义参数 @事件='方法($event, 参数...)' 自定义传参时传递事件对象 -->
<body> <div id="app"> <!--单击事件--> <p class="low-num" v-on:click="lowNum"> <span>点击减一:</span> <span>{{ num }}</span> </p> <!--双击事件--> <p v-on:dblclick="dblAction">双击</p> <!--悬浮事件--> <p @mouseover="overAction(10,$event)">悬浮</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ num:100, }, methods:{ lowNum:function () { // 在vue实例内部的方法中获取变量 this.num this.num -= 1; }, dblAction:function (ev) { alert('双击事件'); console.log(ev) }, overAction:function (a,b) { console.log(a,b) } } }) </script>
- 属性指令 | v-bind:属性名="变量" / :属性名="变量"
<!-- 1) 语法:v-bind:属性名="变量" 2) v-bind:属性名="变量" 简写 :属性名="变量" 3) 单值属性绑定: :title="变量" | :id="变量" | :自定义属性="变量" 4) style属性绑定: :style="字典变量" | :style="{css属性1:变量1, ..., css属性n:变量n}" 5) class属性绑定: :class="变量" | :class="[变量1, ..., 变量n]" | :calss="{类名:布尔变量}" -->
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> [index] { color: orange; } .ccc1 { background-color: yellowgreen; } .ccc2 { color: greenyellow; } .ccc3 { border-radius: 50%; } .ttt { background-color: gold; color: orange; } </style> </head> <body> <div id="app"> <!--1) 语法:v-bind:属性名="变量" --> <p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p> <p v-bind:index="p1">自定义属性也可以被vue绑定1</p> <!--2) v-bind:属性名="变量" 简写 :属性名="变量" --> <p :title="'文本提示'">悬浮文本提示</p> <!--3) style样式属性绑定 --> <p :style="myStyle">样式绑定1</p> <p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p> <!--4) class类属性绑定 --> <p :class="myc1">样式绑定3</p> <p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p> <!--案例:点击切换类名是否起作用--> <p @click="clickAction" :class="{ttt:yyy}">点击切换类</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ p1:'haha', myStyle: { backgroundColor: 'pink', color: 'deeppink', 'border-radius': '50%' }, c1: 'cyan', c2: 'tan', myc1: 'ccc ddd eee', myc2: 'ccc1', myc3: 'ccc2', myc4: 'ccc3', yyy:true, }, methods: { clickAction() { this.yyy = !this.yyy; } } }) </script> </html> 属性指令代码
<!-- 给自定义属性绑定变量 --> <p v-bind:abc="abc"></p> <!-- 以原字符串形式绑定全局属性 --> <p v-bind:title="'abc'"></p> <!-- 单类名绑定 --> <p v-bind:class="c1"></p> <!-- 多类名绑定 --> <p v-bind:class="[c2, c3]"></p> <!-- 类名状态绑定 --> <p v-bind:class="{c4: true|false|var}"></p> <!-- 多类名状态绑定 --> <p v-bind:class="[{c5: true}, {c6: flase}]"></p> <!-- 样式绑定 --> <div :style="div_style"></div> <div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div> <script type="text/javascript"> new Vue({ el:"#app", data: { abc: "abc", c1: "p1", c2: "p2", c3: "p3", div_style: { width: "200px", height: "200px", backgroundColor: "cyan" } } }) </script> <!-- v-bind: 指令可以简写为 : -->
- 表单指令 | v-model="控制vaule值的变量"
<!-- 1) 语法:v-model="控制vaule值的变量" 本质是控制value的值 2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值,值不会时时映射给绑定的变量) 3) v-model="变量" 绑定数据会时时更新(修改表单标签值,值会时时映射给绑定的变量) 4) 单独复选框作为确认框时,v-model绑定的变量为布尔类型变量 5) 单选框,v-model绑定的变量值是某一个选项的值(值是哪个选项的值,那个选项就被选中) 6) 多复选框,v-model绑定的变量值是一个列表(数组),存放复选框选项值(谁被选中就存放了谁) -->
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <form action=""> <!--1) 对表单标签value进行绑定操作变量,不能时时检测绑定的变量--> <input type="text" v-bind:value="info"> <input type="text" :value="info"> <p>{{ info }}</p> <hr> <!--2) 表单标签的值有 v-model="变量" 来绑定控制,操作的还是value,但是拥有时时变量值的检测 --> <input type="text" v-model="info"> <input type="text" v-model="info"> <p>{{ info }}</p> <br> <!-- 3) v-model操作单独复选框 - 确认框 --> <!-- v-model存储的值为true|false --> 是否同意: <input type="checkbox" name="agree" v-model="isAgree"> <p>{{ isAgree }}</p> <!-- 4) 单选框--> <!-- 单选框是以name进行分组,同组中只能发生单选 --> 性别: 男 <input type="radio" name="sex" value="male" v-model="mysex"> 女 <input type="radio" name="sex" value="female" v-model="mysex"> 哇塞 <input type="radio" name="sex" value="others" v-model="mysex"> <p>{{ mysex }}</p> <!-- 5) 复选框--> !-- v-model存储的值为存储值多复选框value的数组 --> 兴趣爱好: 男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies"> 女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies"> 哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies"> <p>{{ myhobbies }}</p> <input type="submit"> </form> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ info:123, isAgree:0, mysex:'male', // 单选框默认值 myhobbies:['female','others'] // 复选框默认值 } }) </script> </html> 表单指令代码
- 斗篷指令 | v-cloak
<!-- 避免页面闪烁 [v-cloak] {dispaly:none;} -->
<style type="text/css"> [v-cloak] { display: none; } </style> <div id="app" v-cloak> {{ msg }} </div> <script src="js/vue.min.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" } }) </script>
原文地址:https://www.cnblogs.com/waller/p/11643099.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- APP脱壳方法三
- Flink Checkpoint 原理流程以及常见失败原因分析
- Docker原理之 - OverlayFS设计与实现
- 有赞零售跨平台打印库方案
- [Go] Golang练习项目-GO语言实现快速排序-第一个数作为基准更容易理解
- 有赞移动基础设施建设的实践和思考
- 大数据理论篇HDFS的基石——Google File System
- 6. 二十不惑,ObjectMapper使用也不再迷惑
- 接口自动化对比工具实践
- 什么?Java9这些史诗级更新你都不知道?Java9特性一文打尽!
- 利用 Arthas 精准定位 Java 应用 CPU 负载过高问题
- 你想了解的JDK 10版本更新都在这里
- Linux Page Cache调优在 Kafka 中的应用
- 声明式 UIKit 在有赞美业的实践
- 一个@Transaction哪里来这么多坑?