使用vue脚手架

一、 初始化脚手架

        1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
        2. 文档: https://cli.vuejs.org/zh/
        3.具体操作步骤

        全局安装@vue/cli
        npm install -g @vue/cli

        切换到要创建项目的目录，然后使用命令创建项目
        vue create xxxx

        启动项目
        npm run serve

二.ref 与 props

• ref

1. 作用：用于给节点打标识
2. 读取方式：this.$refs.xxxxxx

• props

1. 作用：用于父组件给子组件传递数据
2. 读取方式一: 只指定名称
props: ['name', 'age', 'setName']
3. 读取方式二: 指定名称和类型
props: {name: String,age: Number,setNmae: Function}
4. 读取方式三: 指定名称/类型/必要性/默认值
props: {name: {type: String, required: true, default:xxx},}

三、 混入

• Vue 插件是一个包含 install 方法的对象
•  通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

四.插件

•  Vue 插件是一个包含 install 方法的对象
•  通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

五.Todo-list 案例

                
六. Vue 中的自定义事件

• 绑定事件监听

        <Header @addTodo="addTodo"/>
或者
        <Header ref="header"/>
        this.$refs.header.$on('addTodo', this.addTodo)

• 触发事件

this.$emit('addTodo', todo)

•  Vue 原型对象上包含事件处理的方法

1) $on(eventName, listener): 绑定自定义事件监听
2) $emit(eventName, data): 分发自定义事件
3) $off(eventName): 解绑自定义事件监听
4) $once(eventName, listener): 绑定事件监听, 但只能处理一次

•  所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象

所有组件对象都能看到 Vue 原型对象上的属性和方法
 Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus 这个属性
对象

• 全局事件总线

 包含事件处理相关方法的对象(只有一个)
 所有的组件都可以得到

• 指定事件总线对象

new Vue({
beforeCreate () { //
尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.$globalEventBus = this
},
}).$mount('#root')

• 绑定事件

this.$globalEventBus.$on('deleteTodo', this.deleteTodo)

• 分发事件

this.$globalEventBus.$emit('deleteTodo', this.index)

• 解绑事件

this.$globalEventBus.$off('deleteTodo')