VUE的指令
2018-11-22 08:42:38来源：博客园 阅读 ()
vue所有的指令都是以 " v-" 开头。
v-html：类似于 js中的innerHTML 。可以解析模板中的标签。
v-text：类似于 js中的innerText。将模板中的数据以字符串的形式输出。不会解析模板中的标签。等价于 {{ }} :防止刷新时{{ }}出现在页面上
v-show：通过控制css的display来控制元素的实现和隐藏。如果是频繁切换则推荐用此方法。节约性能。
v-if：当属性值为true时，则显示当前的元素，为false，那么显示v-false的元素。如果是偶尔切换，甚至不切换，则建议使用这个。减缓首次加在压力，提高性能。
v-else-if：配合着 v-if 使用，当条件不成立时，执行这步。
v-else ：当以上条件都不成立时，执行这一步。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <div v-if="mag<0">小于0</div> 10 <div v-else-if="mag<10">0-9</div> 11 <div v-else>大于10</div> 12 </div> 13 </body> 14 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15 <script> 16 var vm=new Vue({ 17 el:"#app", 18 data:{ 19 mag:15 20 }, 21 }) 22 </script> 23 </html>
v-once:只绑定一次，当数据再次发生变化，也不会导致页面刷新，写在不想刷新的标签上。
v-bind：单向数据绑定
1 <!--完整写法--> 2 <a v-bind:href="url">1111</a> 3 <!--简写--> 4 <a :href="url">2222</a>
一般用于class的获取
1 <ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}"> 2 <li>学习Vue</li> 3 <li>学习Node</li> 4 <li>学习React</li> 5 </ul>
1 var vm= new Vue({ 2 el:‘.box‘, 3 data:{ 4 isColor:true, 5 isSize:true 6 } 7 })
v-on: 绑定事件。
1 <!--完整写法--> 2 <button v-on:click="doThis"></button> 3 <!--简写--> 4 <button @click="doThis"></button>
监听DOM事件，函数需要定义在methods中，不能和data中的内容重名，不能使用箭头函数
- 如果在绑定时，
fn不带（），那么函数会默认接收一个事件对象e，mouseEvent，如果绑定时带有小括号，那么默认接收事件对象， - 既需要事件对象，又需要参数，需要在绑定的小括号中加一个$event,后面才是真正的实参
v=for:循环
循环数组
1 <!--html--> 2 <div v-for="item in arr">{{item}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 arr:[1,2,4,574,45,448] 5 }, 6 })
效果如下：item 代表每一项
循环字符串
1 <div v-for="item in str">{{item}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 str:"fdhsde" 5 }, 6 })
效果如下 ： item 代表着每一个字符
循环对象
<div v-for="(item,key,index) in obj">{{item}}--{{key}}--{{index}}</div>
1 var vm=new Vue({ 2 el:"#app", 3 data:{ 4 obj:{ 5 name:"qi", 6 age:"22", 7 } 8 9 }, 10 })
效果如下： 第一个参数是 属性值 ，第二个参数是 属性名，第三个参数是索引。
循环数字
1 <div v-for="item in 6">{{item}}</div>
效果如下 ：
v-cloak ：用于元素加载数据比较多时，vue解析时间比较长，为了防止{{}}出现，给该元素加上v-cloak属性，直到vue中把DOM数据插入到真实DOM中时，让当前的元素显示；
1 <div class="#app" v-cloak> 2 <p>{{value.name}}</p> 3 </div>
1 [v-cloak] { 2 display: none; 3 }
但是有的时候会不起作用，可能的原因有二：
1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级
1 [v-cloak] { 2 display: none !important; 3 }
2、样式放在了@import引入的css文件中
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中
v-model：只用于表单元素忽略了value。checkbox selected，将数据绑定的视图上，视图修改会影响数据的变化（双向数据绑定）
- 单选框中使用v-model ：会将都绑定val的划分成一组，只能选择其中一个
- 在复选框中，如果只有一个，v-model 会将值默认转换成布尔类型的值
- 如果v-model 在复选框中同时绑定一个值，那么会把这几个进行分组，把选中的值，同一放进数组中
- 如果多个input框同时绑定一个相同的v-model，通过是否在数组中进行选中或者不选择，各自来控制自己的状态
- 用于下拉框那么select上v-model绑定的值：跟option中的value属性有关 ，那么如果没有value属性，那么会取option标签中的内容
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- vue.js开发环境搭建教程 2020-03-16
- Vue input控件通过value绑定动态属性及修饰符的方法 2020-03-05
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
- vue-cli中打包图片路径错误的解决方法 2020-01-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
