2018-05-15 Vue语法以及表单

一）

1. vue通过实例化
   语法
   new Vue({
   el:'',
   data:"{
   },
   methods:{
   方法名:function(){
   }
   }
   })
   el:元素id或者class或者一切能选到元素的选择器名称，
   data:属性对，
   methods:方法

栗子：

site : {{site}}

url : {{url}}

{{details()}}

2. 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

3. Vue.js 模板语法
   Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
   Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
   结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
   1）插值：{{meg}}
   2）html：v-html="msg"
   3）属性：v-bind:class="{'class1':class1}"
   v-bind栗子：http://www.runoob.com/try/try.php?filename=vue2-v-bind

v-bind 单向绑定；v-model 双向绑定
v-model 修饰符
.lazy 不实时监听更改数据，而是有缓存，之后更改
.number 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
.trim 自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

4. 条件判断 v-if
   通过控制true/false来控制是否显示==插入元素
   v-else-if
   另外一种条件分支
   .....
   v-else
   最后一种条件分支

5. v-show 指令来根据条件展示元素,相当于控制display:none/block

6. v-for="site in sites"
   site：sites中的值，而不是key，是value；
   site 中的参数（value）/ （value,key） / (value,key,index)

7. 计算属性关键词: computed。
   computed: {
   // 计算属性的 getter
   方法名: function () {
   // this 指向 vm 实例
   return this.message.split('').reverse().join('')
   }
   }
   过滤属性关键词：filters。
   filters: {
   方法名: function (value) {

   }
   }

8. computed vs methods
   我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
   可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

9. watch监听
   vm.$watch('kilometers', function (newValue, oldValue) {
   // 这个回调将在 vm.kilometers 改变后调用
   document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
   })

10. v-bind:class="{键值对}"
    动态改变元素样式
    1）绑定对象
    2）绑定数组
    3）三元表达式

11. v-bind:style
    绑定style属性样式（也是以对象形式展现）