Vue初出茅庐（二）

Vue_2.0

---

---

循环

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>

---