Vue.js 笔记

定义一个Vue对象

new Vue({
  el:"#id",
  data:{
    foo:xxx,
    bar:xxx
  },
  methods:{
    method1:function(){
      
    },
    method2:function(){
      
    }
  },
  watch:{
    "foo":function(value,oldValue){
    
    }
  },
  components:[aaaa,bbbb]
})

其中el代表这个Vue对象会作用在哪个元素上，el后面是一个表达式。
data代表model，里面的对象和值可以在画面上渲染
methods里面的函数相当于事件，可以与页面元素绑定
watch是对model的监听，当值发生变化时做一些动作
components 导入其他组件

Vue的指令

• v-text
• v-html
  绑定元素的内容
• v-bind:属性名 可简写为 :属性名
  绑定属性
• v-model 用于表单元素双向绑定
• v-on:事件名 可简写为@事件名 如@click
  绑定事件，还可在事件名后面加上修饰符 如 @keyup.enter 指按enter时触发的事件
  还可以加.stop .prevent 表示阻止默认事件响应和冒泡，还有一些其他修饰符
• v-if v-show
  条件显示，两者区别是 if将不输出dom元素，show无论何时都输出，只是用css隐藏
• v-for
  循环

跟Angular差不多

Vue的组件

props属性，定义可以向组件内传的值
$emit函数，用于向组件外部发射事件
slot 允许父组件向子组件内部固定位置插入元素

另外还有broadcast和dispatch，需要通过events来捕捉