Vue.js简单知识点总结

1、在接触Vue 之应该明白三个名称：挂载点，模板，实例

先写一个Vue实例吧

new Vue({
    el:'#root',
    template:'<h1>{{ms}}</h1>',
    data:{
        msg:"hellow world",
    }
})

上述整体来看，可以看作是一个实例。

挂载点:上面的“el”就可以看作是一个挂载点。其挂在id为root的标签上

模板:其中的template就是模板，对于父类的实例来看，可以不写模板，但是也可以将挂载点的内容如上写在模板里

 

2、接着要明白几个常用的语法内容了

v-text：书写格式为  <div v-text=“msg”></div>

v-html:书写格式为 <div v-html="msg"></div>

上面两种方法都可以将我们的内容成功的输出，差别在于如果msg中写了代码是如何的情况

v-text会将代码转义，也就是原封不动的将代码也输出，v-html则相反

v-on：clikck=“handleClick”

这是事件绑定的方法  ，同时也可以简写为 @click="handleClick"

v-bind是对于数据的绑定，同时可以简写为 ：

v-model对于数据的双向绑定，目前无简写

 

3、计算属性以及监听器

computed:{
   fullname:function () {
       return this.first+" "+this.last;

   }
},

上面的computed需要写在实例中

watch:{
    fullname:function () {
        this.count++;

    }

}

这个是监听器，

上诉代码的意思是，如果fullname发生变化，count的数据将会增加