Vue
1.指令
1.v-mode v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model） <input type="text" v-model="nnn"> <button @click="rever">反转</button> rever:function(){ this.content = this.content.split("").reverse().join("") }, 2. v-for v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或json(同angular中的ng-repeat),需要注意从vue2开始取消了$index v-for = “(item,index) in 数组名” Item 代表数组中的每一项 index 代表索引 Key 代表对应的键名(1、key来给每个节点做一个唯一标识2、key的作用主要是为了高效的更新虚拟DOM)案例——选项卡
1.HTML结构
<div id="app"> <div class="tab"> <!-- tab栏 --> <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </ul> <!-- 对应显示的图片 --> <div class="current"><img src="img/apple.png"></div> <div class=""><img src="img/orange.png"></div> <div class=""><img src="img/lemon.png"></div> </div> </div>2.数据准备
list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }]3.v-for数据渲染
div id="app"> <div class="tab"> <ul> <!-- 1、绑定key的作用 提高Vue的性能 2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ， index 也是唯一的 3、 item 是 数组中对应的每一项 4、 index 是 每一项的 索引 --> <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :key='item.id' v-for='(item, index) in list'> <!-- : 是 v-bind 的简写 绑定属性使用 v-bind --> <img :src="item.path"> </div> </div> </div> <script> new Vue({ // 指定 操作元素 是 id 为app 的 el: '#app', data: { list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> 3.v-show / v-hide v-show 显示内容 （同angular中的ng-show） v-hide 隐藏内容（同angular中的ng-hide) <p v-show>12345456677</p> <p v-hide>1234545</p> 4.v-if v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误 <p v-if='flag==0'>asdaavdsf</p> <p v-else-if='flag==1'> 56861</p> <p v-else>vjjhh</p> data:{ flag:0, } 5.v-bind v-bind 动态绑定 作用： 及时对页面的数据进行更改 ***注意**：v-bind:class指令可以与普通的class特性共存 v-bind 中支持绑定一个对象 ，如果绑定的是一个对象则键为对应的类名，值为对应data中的数据* 绑定class v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。 绑定对象和绑定数组的区别{ 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据 - 绑定数组的时候数组里面存的是data 中的数据 } 绑定style 有些时候我们需要绑定内置样式，这个时候我们可以使用v-bind:style绑定属性。 <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <script> var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true, } }) </script> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> <ul class="box" :class="[classA, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <script> var vm= new Vue({ el:'.box', data:{ classA:‘textColor‘, classB:‘textSize‘ } }) </script> <div v-bind:style="styleObject">绑定样式对象</div>' <!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) --> <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div> <!--组语法可以将多个样式对象应用到同一个元素 --> <div v-bind:style="[styleObj1, styleObj2]"></div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px', background:'red' }， activeColor: 'green', fontSize: "30px" }, styleObj1: { color: 'red' }, styleObj2: { fontSize: '30px' } </script> v-on v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面案例——简单计算器
<div id="add"> <h1>简单计算器</h1> <p>数值A：<input type="text" v-model="num1"></p> <select v-model="flag"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <p>数值B：<input type="text" v-model="num2"></p> <button @click="sum">计算</button> <p>计算结果：<span v-text='num'>{{num}}</span></p> </div> ```## 标题 ```javascript <script> var vm = new Vue({ el:'#add', data:{ num1:'', num2:'', num:'', flag:'' }, methods:{ sum(){ this.num = eval(this.num1+this.flag+this.num2); } } }) </script> v-text / v-html v-text 解析文本 v-html 解析html标签 v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型 '[{red:"isred"},{blue:"isblue"}]' v-once 进入页面时 只渲染一次 不在进行渲染 v-cloak 防止闪烁 v-pre 把标签内部的元素原位输出