Vue_2.0

---

---

文章目录

Vue_2.0@[toc]循环v-for纯数字遍历 属性绑定双向绑定.lazy.number.trim 计算属性computed区别 监听属性watch 过滤器

循环

v-for

<div id="div1"> <table align="center" > <tr class="firstLine"> <td>name</td> <td>hp</td> </tr> <!--这里的迭代不一定是hero 随意一个能表示意思的就可以--> <tr v-for="hero in heros"> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr> </table> </div> <script> //搞个数组 var data = [ {name:"盖伦",hp:341}, {name:"提莫",hp:225}, ]; new Vue({ el: '#div1', data: { heros:data//这里不能加;的 } }) </script> <!--这里迭代的过程还可以加个下标inddex（不一定是index，i也可以--> <tr v-for="hero,index in heros"> <td>{{index}}</td> <td>{{hero.name}}</td> <td>{{hero.hp}}</td> </tr>

纯数字遍历

<div id="div1"> <div v-for="i in 10"> {{i}} </div> </div> <script> new Vue({ el: '#div1' }) </script>

---

属性绑定

<!-- 完整语法 --><v-bind:href > <!-- 缩写 -->< :href > <!-- v-blind: 用于绑定属性 可以使后面属性中的js表达式合法 --> <!-- 通俗的说 就是如果不绑定这个属性 鼠标放到这个按钮上提示的就是mytitle这个字符串 而不是js中的mytitle的值hhh --> <div id="div1"> <input type="button" value="按钮" v-bind:title="mytitle"> </div> <script> new Vue({ el: '#div1', data:{ mytitle:'hhh' } }) </script>

button标签显示的内容可以使图片等非文字元素，但type=button元素不行，因为type=button本身就是标签中元素的一个值，不可以像button标签一样嵌套类似img的标签（奇怪的知识增加了↑

---

双向绑定

之前绑定属性，把Vue对象数据显示在视图上，那我们想把视图上的数据放到Vue对象上就可以用到这个（比如input）

<div id="div1"> hero name: <input v-model="name"> <button @click="Click">提交数据</button> </div> <script> new Vue({ el: '#div1', data:{ name:"hhh" }, methods:{ Click:function(){ alert(this.name); } } }) </script> <!--灵活运用--> <div id="div1"> <table align="center"> <tr> <td> <input v-model="input" placeholder="输入数据"> </td> <td> <p>{{ input }}</p> </td> </tr> <tr> <td> <select v-model="selected"> <option disabled value="">请选择</option> <option>AD</option> <option>ADC</option> </select> </td> <td> <p>{{ selected }}</p> </td> </tr> </table> </div> <script> new Vue({ el: '#div1', data: { input:'', selected:'' } }) </script>

.lazy

上述的这种v-model绑定是同步绑定 一旦数据变化就绑定，我们可以加一手.lazy 监听这个改变 当失去焦点才绑定数据

<input v-model.lazy="input" placeholder="输入数据"> <p>{{ input }}</p> 这样的话 只有离开输入框 绑定的地方数据才会改变

.number

有时候，拿到了数据需要进行数学运算， 为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，所以就可以通过.number方式确保绑定到的是数字类型了。

<input v-model="input1" type="number" placeholder="输入数据"> <input v-model.number="input" type="number" placeholder="输入数据"> //首先type=“number”保证输入的一定是数字 再来看区别： 第一个绑定的数据是string类型的 第二个是number类型的

.trim

去掉绑定数据前后的空白

---

计算属性

computed

进行运算时，我们的常规做法是

￥: <input type="number" v-model.number = "rmb"/> <td align="center"> $: {{ rmb/exchange }} </td> <script> new Vue({ el: '#div1', data: { exchange:6.4, rmb:0 } }) </script>

当运算过程复杂以后，我们可以用method方法来封装调用

￥: <input type="number" v-model.number = "rmb" /> <td align="center"> $: {{ getDollar() }} </td> <script> new Vue({ el: '#div1', data: { exchange:6.4, rmb:0 }, methods:{ getDollar:function() { return this.rmb / this.exchange; } } }) </script>

但是我们还可以把运算过程放到computed里面去（调用的时候不用加() 它不是一个方法 而是把计算好的东西赋给dollar）

￥: <input type="number" v-model.number = "rmb" /> <td align="center"> $: {{ dollar }} </td> <script> new Vue({ el: '#div1', data: { exchange:6.4, rmb:0 }, computed:{ dollar:function() { return this.rmb / this.exchange; } } }) </script>

区别

computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。 而methods每次都会重新调用

---

监听属性

watch

监听某个值，当其发生变化执行相应的操作

（和computed的区别是：watch更适用于监听某一个值的变化并作出操作，比如请求后台接口，而computed适用于计算已有的值并返回结果—还有种说法就是watch适合处理一个数据影响多个数据 computed适用于 一个数据受多个数据影响）

<td align="center"> ￥: <input type="number" v-model.number = "rmb" /> </td> <td align="center"> $: <input type="number" v-model.number = "dollar" /> </td> <script> new Vue({ el: '#div1', data: { exchange:6.4, rmb:0, dollar:0 }, watch:{ rmb:function(val) { this.rmb = val;//val是输入的值 this.dollar = this.rmb / this.exchange; }, dollar:function(val) { this.dollar = val; this.rmb = this.dollar * this.exchange; }, } }) </script>

---

过滤器

<script> new Vue({ el: '#div1', data: { data:'' }, filters:{ //首尾字母大写 capitalize:function(value) { if (!value) return '' //如果为空，则返回空字符串 value = value.toString() return value.charAt(0).toUpperCase() + value.substring(1,value.length-1)+value.charAt(value.length-1).toUpperCase() } } }) </script>

这里过滤器是定义在Vue对象里的。 但是有时候，很多不同的页面都会用到相同的过滤器，如果每个Vue对象里都重复开发相同的过滤器，开发维护都不方便。 我们还可以通过全局过滤器的方式，只定义一次过滤器，然后就可以在不同的Vue对象里使用了。

<script> Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) </script>

---