• v-text：更新元素的textContent
• v-html：更新元素的innerHTML。注意：不会编译成Vue模板
• v-show：根据表达式的结果，切换元素display: block or none
• v-if：根据表达式的结果，选择性的渲染元素节点。注意：当和v-for一起使用时，v-for的优先级高
• v-for：基于元素多次渲染元素或者模板快
• v-on：缩写@，事件监听器，用在普通元素上，只能监听原生DOM事件，用在自定义元素上，可以监听字定义事件
• v-model：在表单控件或者组件上创建双向绑定
• v-bind：缩写:，动态绑定一个或者多个attribute，或者一个组件prop到表达式
• v-slot：提供具名插槽或需要接收 prop 的插槽
• v-else-if、v-else…

• v-show：仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；
• v-if：会控制这个 DOM 节点的存在与否。

当我们需要经常切换某个元素的显示/隐藏时，使用 v-show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v-if 更加合理。

当一个 vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。

每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

注意：在 Vue3.0 中使用的是 ES6 的 Proxy 代理 data 选项的属性，而不是Object.definedProperty

1、计算属性 computed 适用的情形

我们可能会有这样的需求，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性。

2、监听器 watch 适当的情形

watch 函数适用于，当数据发生变化时，执行异步操作或较大开销操作的情况。

v-model，v-on，v-bind 这一类的指令很经常使用，但有时候也不能满足我们的需求，比如我们想要通过 v-focus (这个指令是 vue 不提供的)实现表单的焦点获取，就会遇到无指令提供的窘况。

这个时候我们可以自定义指令，有个地方要注意下，如果使用了未定义的指令，vue 会提出警告，程序依然会正常运行。

• 比如定义一个全局可用的 focus 实现 input 选中，全局的东西如 JS 中的全局变量，一般不会用。
  
• 定义局部指令，局部指令只在组件内部有效，超出组件范围则无效，类似局部变量的作用。
  
• vue给自定义指令提供了几个函数钩子，用于实现自定义指令的功能
  • bind: 指令第一次绑定到元素时调用，
  • inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  • update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
  • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  • unbind: 指令与元素解绑时调用。

参考链接

• router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter) 和 VueRouter 构造函数得到一个 router 的实例对象，这个对象中是一个全局的对象，它包含了所有路由许多关键的对象和属性。
  举例：history 对象

• $router.push({path:‘home’}); 本质是向 history 栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录
  方法：
  $router.replace({path:‘home’});//替换路由，没有历史记录

• route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name,path,params,query 等

我们可以从vue devtools中看到每个路由对象的不同

参考文章

• 父组件->子组件
  使用props，使用时直接：this.$refs.dataList 。

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性
3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

• 子组件->父组件
  父组件在使用子组件处用v-on监听，子组件通过$emit触发。

1.在子组件中创建一个按钮，给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
4.保存修改的文件，在浏览器中点击按钮

• 非父子组件
  简单用bus；复杂用vuex

  第一步，在main.js中新new一个Vue对象var bus = new Vue()
  export default bus
  第二步：在组件中引入bus的引用import bus from '../../main'
  第三步：通过emit触发事件传值，在另一个组件中的mounted中用emit触发事件传值，
  在另一个组件中的mounted中用emit触发事件传值，
  在另一个组件中的mounted中用on监听事件从而获取值
  组件1：bus.$emit(‘clickPtest’,‘rrrrrrrrrrrrrr’)组件2：mounted () {
  bus.$on(‘clickPtest’,function (msg) {
  console.log(msg)
  })
  },
  

参考链接

参考链接

参考链接

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

核心概念1: State
state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

核心概念2: Getters
我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

核心概念3: Mutations
我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

核心概念4: Actions
actions 类似于 mutations，不同在于：actions提交的是mutations而不是直接变更状态，actions中可以包含异步操作, mutations中绝对不允许出现异步actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象