Vue核心技术

模板语法

• Vue的文件结构
  template模板+script+style
• 插值语法
  {{msg}}：msg在data定义，可以是字符串，数据，js表达式
• 指令
  (指令缩写)：v-on:click$⟹$@click，v-bind:href$⟹$:href

计算属性和监听属性

• computed(异步场景)
• watch(数据联动)
• computed属性只有在方法里面对应的Vue实例对象对应的属性发生变化时才会重新渲染(外部的属性发生变化不会重新渲染，但是实际上时变化了)
• watch一般监听一个变量，而computed监听多个本实例内的变量

条件渲染，列表渲染class与style绑定

• v-if+v-else-if+v-else+v-show
• v-for:默认是对每个循环的部分生成一个div，当然也可以自己指定装载每部分的容器
• 用 :class或者:style进行动态的绑定，在data里面写上绑定的对象，用其他Vue的函数对其进行修改

Vue-cli

• 快速创建工程的两种方法：
  vue create命令行命令和vue ui的可视化界面
• 工程化项目的目录结构
  组件目录(最重要的src和public)+package.json

组件化思想

• 组件状态管理：vuex
• 多组件的混合使用，多页面，复杂业务(vue-router)
• 组件间的传参，消息，事件管理(props,emit/om,bus)

Vue风格指南

• 好习惯，少走坑
• 写出自己看得懂的代码
• 写出别人看得懂的代码
• 具体请参考官方文档

vue-router

在router.js文件下写入相应的配置(@代表src目录)
使用<router-link to="xxx"></router-link>标签来链接相应的路由

vuex

• 多个视图依赖于同一状态(例：菜单导航)

• 来自不同视图的行为需要变更同一状态(例：评论弹幕)

• 为Vue.js开发的状态管理模式

• 组件状态集中管理

• 组件状态改变遵循统一的规则

• store.js里面使用vuex
  三种状态state mutation action
  在state里面写数据，在mutation里面写相应的方法

  在所有的需要引用的文件中引入store，再使用store的state里的数据，修改状态：store.commit(function_name);

如何进行调试

• Vue的Chrome插件
• console.log()，alert()，debugger
• vm实例，window对象绑定