学习Vue.js的基本指令

学习Vue.js

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

vue基本指令

• v-clock：能解决插值表达式闪烁的问题 eg : <p>{{msg}}</p>，加载慢时会有短暂的{{ }}显示
• v-text：没有闪烁问题 <h4 v-text = "msg"></h4>
• v-html：可以解析标签
• v-bind：在vue中，提供用于绑定属性的指令 eg：<input type="button" v-bind:title="msg"> ,v-bind可以简写为： eg：<input type="button" :title="msg">
• v-on：用于事件的绑定机制 eg：<input type="button" v-on:click="method()">,方法可以加括号或者不加，加括号是为了方便传参，同样v-on也有可以简写为@ <input type="button" @click="method()">
• v-model：指令可以实现数据的双向绑定，一般用于表单，单选框，复选框等
• v-for：循环遍历

1. 迭代数组

   <ul>
      <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
   </ul>

2. 迭代对象中的属性

	<!-- 循环遍历对象身上的属性 -->
    <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

3. 迭代数字

    <p v-for="i in 10">这是第 {{i}} 个P标签</p>

• v-if 和 v-show：都是控制元素的显示跟隐藏
  v-if：每次都会重新删除或创建元素
  v-show：只是切换了元素的display:none样式
  v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。