vue-basic

vue 基础知识

文本：{{}}值会变  <span v-once>{{msg}}</span> 值永远不变  <input v-model="model">双向数据绑定

原始html  <span v-html="rawHtml"></html> 会把rawHtml里面内容样式渲染之后输出

属性 <span v-bind:id="changeId"></span> <button v-bind:disabled="flag"></button>

使用js表达式 只能用于完整的单个表达式 三目运算符等  {{ok ? 1:2}}  赋值和流控制不能使用

指令 带有v-的指令 <span v-if="seen"></span> 根据seen的值来增加或移除span

参数  一些指令能接收一个参数: <a v-bind:href="url"> 动态更新url 绑定href 
 <a v-on:clcik="doSometning"> 监听doSometning事件
 
修饰符 <form v-on:submit.prevent="onSubmit"> ... </form> .prevent点击触发提交事件后 触发.prevent   修饰符告诉 v-on 指令，在触发事件后调用 event.preventDefault()

computed属性和watch属性
对于复杂的逻辑 应该要用computed,或method
computed
<p>计算后的翻转 message 是：{{ reversedMessage }}</p>
var vm = new Vue({
el: '#example',
data: {
  message: 'Hello'
},
computed: {
  // 一个 computed 属性的 getter 函数
  reversedMessage: function () {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
  }
}
})

methods 使用时多了一个()
<p>翻转 message 是："{{ reverseMessage() }}"</p>
methods: {
reverseMessage: function () {
  return this.message.split('').reverse().join('')
}
}
区别 computed 属性会基于它所依赖的数据进行缓存 只要所依赖的数据没变 它就就会去缓存中取数据
computed: {
now: function () {
  return Date.now()
}
}
这个 now就会一直不变 因为Date.now()不是一个响应式的依赖数据 还可以在computed中设置get和set
computed:{
      /*设置getter和setter*/
      fullName:{
          get:function () {
              return this.firstName+","+this.lastName;
          },
          set:function (newVlaue) {
              var names =  newVlaue.split(',')
              this.firstName = names[0];
              this.lastName = names[names.length-1]
          }
      }

  },
而methods 是每当重新触发渲染时，就会执行