Vue中的基本指令操作v-xxx 指令
2020-07-27 21:19
513 查看
Kite学习历程的第三十七天
目录
- Kite学习历程的第三十七天
- 1. v-text , v-html指令
- 2. v-bind 指令
- 3. v-model 指令
- 4. v-on 指令
- 5. v-for指令
- 6. v-if, 和 v-show指令
- v-else和v-else-if指令
1. v-text , v-html指令
v-html: 可以在翻译data中数据是将 样式正确耳朵显示
v-text: 则会将样式代码显示出来
<!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> <!-- 1. 插值表达式 : 只能使用在标签体中 1.1 花括号 1.2 插值闪烁 --> <body> <div id="app"> {{msg}} {{1 + 1}} {{hello()}} <br/> <span v-html = "msg"></span> <br/> <span v-text = "msg"></span> <br/> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { msg: "<h1> hello <h1>" }, methods: { hello(){ return "world" } }, }); </script> </body> </html>
2. v-bind 指令
可以用于css属性, style样式的绑定,对属性进行增强
<!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> <!-- 给html的属性进行绑定: 属于单项绑定 --> <div id = "app"> <a v-bind:href="link">跳转到百度</a> <!-- class, style 的属性进行增强 使用方法: {class名称:加上vue中的data属性值,data属性定义为:true or false} --> <span v-bind:class="{active:isActive,'text-danger':hasError}">你好css</span> <span v-bind:style="{color: color1,fontSize: size}">你好style</span> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { // 跳转地址 link: "http://www.baidu.com", isActive: true, hasError: true, color1: 'red', size: '36px' } }); </script> </body> </html>
3. v-model 指令
主要用于表单项,或者自定义组件,是一个双向绑定的指令
<!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> <!-- v-model 主要用于表单项,自定义组件 --> <!-- 通过vue打印选中的多选框中的内容 --> <div id = "app"> 精通的编程语言:<br/> <input v-model = "language" type = "checkbox" value="Java" >Java<br/> <input v-model = "language" type = "checkbox" value="PHP" >PHP<br/> <input v-model = "language" type = "checkbox" value="C++" >C++<br/> 选中的语言:<br> <!-- 通过,为连接符 --> {{language.join(",")}} </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { language: [] } }); </script> </body> </html>
4. v-on 指令
主要用于响应事件:
v-on 可以使用@进行代替
事件修饰符
stop: 阻止事件冒泡到父元素
prevent:阻止默认事件发生
capture:使用事件捕获模式
self: 只有元素自身触发事件才可以进行执行(冒泡或者捕获都不执行)
once:只执行一次
<!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> <!-- v-on: 使用于响应事件 v-on可以使用@符号进行替换--> <div id = "app"> <!-- 事件中直接书写js片段 --> <button @click="num++">点赞</button> <button @click.ctrl="num=10">点赞变为10</button> <!-- 事件中指定一个回调函数,必须是vue实例中定义的函数 --> <button @click="cancle">取消</button> <h1>有{{num}}个赞</h1> <!-- 事件修饰符 stop: 阻止事件冒泡到父元素 prevent:阻止默认事件发生 capture:使用事件捕获模式 self: 只有元素自身触发事件才可以进行执行(冒泡或者捕获都不执行) once:只执行一次 --> <div style="border: 1px solid red; padding: 20px;" @click.once="hello"> 大Div <div style="border: 1px solid blue; padding: 20px;" @click.stop="hello"> 小Div <a href="http://www.baidu.com" @click.prevent.stop = "hello">跳转百度</a> </div> </div> </div> <!-- 按键修饰符: --> <input type="text" v-model = "num" @keyup.up="num+=2" @keyup.down="num-=2"><br/> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { num: 1, qq: "http:www.qq.com" }, methods: { cancle(){ this.num--; }, hello(){ alert("我被点击了!"); } }, }); </script> </body> </html>
5. v-for指令
<!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"> <ul> <!-- : key 来区分不同的元素,注意:要具有唯一性 --> <li v-for="(user, index) in users" :key="user.name"> 当前索引:{{index}}====>姓名: {{user.name}}====》 性别:{{user.gender}}====》年龄: {{user.age}}<br> <!-- 1. 显示user信息:v-for="item in items" --> <!-- 2. 获取数组下标:v-for="{item, index} in items" --> <!-- 3. 遍历对象: v-for= "vlue in object" v-for= "(value, key) in object" v-for= "(value, key, index) in object" 前面为键值对的值,后面为属性 --> 当前对象信息: <span v-for="(v, k, i) in user">Key: {{k}} ===> value: {{v}} ===> 索引:{{i}}</span> <!-- 4. 遍历对象的时候都加上:key来进行区分不同的数据,提高vue的渲染效率 --> </li> </ul> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data:{ users: [ {name:"柳岩", gender: "女", age: 122}, {name:"柳岩2", gender: "女", age: 132}, {name:"柳岩3", gender: "女", age: 142}, {name:"柳岩4", gender: "女", age: 112}, {name:"柳岩5", gender: "女", age: 12} ] } }); </script> </body> </html>
6. v-if, 和 v-show指令
<!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> <!-- v-if: 条件判断。当得到的结果为true时,所在的元素才会被渲染 v-show: 当前得到的结果为true时,所在的元素才会被显示 --> <div id = "app"> <button @click="show = !show">点我!</button> <!-- 1. 使用v-if显示 : 当show为true时显示,false不显示--> <h1 v-if="show"> if=看到我</h1> <!-- 2. 使用v-show显示 : 修改style上的标签--> <h1 v-show="show"> show=看到我</h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { show: true } }); </script> </body> </html>
v-else和v-else-if指令
<!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"> <button v-on:click="random=Math.random()">点我呀!</button> <span>{{random}}</span> <h1 v-if="random>=0.5"> 看到我啦! >=0.5 </h1> <h1 v-else-if="random>=0.2"> 看到我啦! >=0.2 </h1> <h1 v-else-if="random>=0.2"> 看到我啦! >=0.2 </h1> <h1 v-else=> 看到我啦! >=0.2 </h1> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: {random: 1} }); </script> </body> </html>
相关文章推荐
- Vue-Cli搭建前的基本操作
- vue.js的基本操作
- shell 环境下MySQL的基本操作指令总结
- linux基本命令(3)-文件目录操作指令
- Vue学习笔记 1 - 基本指令
- 2016-10-23Linux初步入门基本操作指令一
- sqlite 基本操作指令
- VUE之内置指令(基本、条件、列表渲染)
- vue指令以及dom操作详解
- Orcal数据库的基本指令操作
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- vue指令以及dom操作
- MySQL数据库基本操作指令
- MongoDB适用和不适用场景以及安装,操作基本指令
- 黑马程序员_mac OS X系统的基本操作指令
- [DataBase] SQL Server基本操作指令
- Vim 编辑器的使用(一)基本的指令操作集合
- python-pip操作基本指令介绍
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
- vue.js 学习笔记1——Vue基本认识与基本指令