Vue快速上手（学习笔记）

写作目的：记录在快速体验Vue之后，总结出的Vue的15样核心功能，提供飞速了解Vue的语法的媒介

第一次使用完Vue的感受：模板语法和小程序的模板语法十分接近，但组件是小程序没有的，这点和React相似，但是Vue提供中文教程，对中文开发者十分友好~~~

1. vue的模板语法，包括：{{js表达式}}, v-开头的指令，如v-bind, v-on, v-model, v-if等，以下详细介绍

2. 声明响应式状态，在模板中渲染动态文本 <h1> {{title}} </h1>//响应式状态的变化能够出发html页面更新

3. 绑定动态属性：<h1 v-bind : id = ‘title’ > //title是组件状态里的一个属性

4. 绑定事件/监听dom或子组件触发的事件：v-on: click=‘increment’// methods:{ increment(){ this.count++}}

5. 数据双向绑定：<input v-model = ‘text’ /> //将动态属性中text的值与input的值同步

6. 条件渲染: v-if, v-else, v-if-else

7. 列表渲染： v-for=‘todo in todos’ //todo可当做本地变量、在元素作用域中使用

8. 计算属性：computed: { filteredTodos(){返回通过其他响应式属性计算得出的值} } //在组件中添加计算属性filteredTodos

9. 模板引用: <p ref=‘p’> hello </p> //将DOM元素暴露在this.$refs上，用来操作<p>

10. 生命周期钩子：mounted, created, updated

11. 侦听器：watch: { todoId(new){抓取新的todo项目} } //侦听响应式状态todoId的变化

12. 注册子组件：components: { ChildComp }

13. Props：在子组件上中声明props: {} 用于接受父组件传递的数据，可以是动态数据

14. 子组件触发事件：this.$emit(事件名称，传给父组件上的事件监听器的参数)

15. 插槽：子组件通过<slot>渲染父组件传递的插槽内容，可以重复使用<slot>便可重复渲染插槽内容

Vue快速上手🔗

PS: 找工作加油！！！