vue-basic

vue 基础知识

文本：{{}}值会变  {{msg}} 值永远不变  双向数据绑定

原始html   会把rawHtml里面内容样式渲染之后输出

属性  

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

指令 带有v-的指令  根据seen的值来增加或移除span

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

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

methods 使用时多了一个()
翻转 message 是："{{ reverseMessage() }}"
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 是每当重新触发渲染时，就会执行