vuejs

挂载点：<div id="name"> vue会处理挂载点下的内容

模板：挂载点下的内容  template

实例：vue实例如下

new Vue({
    el:"#root",
    data:{
    msg:"world",
    },
    methods:{
        handle： function(){
        }
    }
})

v-text和v-html区别

v-html：能将html标签进行转义

v-text：会进行转义

点击事件：v-on:click=" "或@click

数据绑定：v-bind:title="属性名"或:title=" ",现在vue实例中定义所绑定的属性

双向数据绑定：v-model

计算属性：在Vue实例中定义computed:{ add:function(){ return this.a+this.b;}      }  (和react的reselect相似）

侦听器：在Vue实例中定义watch：{要监听属性名: function(){}}监听某一数据的变化做出相应处理

v-if:将元素从DOM树移除

v-show:不移除dom元素，只是添加display:none，性能更高

<v-for="item of list" :key="">   {{item}}  :key提高渲染的效率，key唯一 

功能todolist:

            将数据添加到list     list.push()

            拆分组件

//全局组件
Vue,component('todo-item',{
        prors:['content'] ,//传递参数
        template:'<li>item</li>'
})
//引用
<todo-item :content="item"></todo-item>


//局部组件
var TodoItem = {
      template:'<li>item</li>'
}
//在vue实例中定义
Vue.component:{
'todo-item': TodoItem
}
//引用
<todo-item></todo-item>

实例模板与组件

每个组件都是一个Vue实例

el标签：设置挂载点，将挂载点下的内容当成实例（template）

删除功能：通知父组件调用this.$emit('delete'，this.index)  @delete='handleDelete' 

父组件通过属性方式向子组件传递数据

子组件发布事件给父组件

安装、使用vue-cli

官方文档

创建基于webpack的vue项目：vue init webpack my-project

运行：npm run dev

在写组件数据时需将数据写成函数：

export default{
    data () {
         return {
            value: ''
        }
    }
}

给样式添加作用域：<style scoped><style>