Vue:初学知识点总结

Vue的实例对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新。

Options:

options是 new Vue 的参数，我们一般称之为选项或者构造选项

options的五类属性：

数据：data、 props、 propsData、 computed、methods、 Watch

DOM: el、 template、 render、 renderError

生命周期钩子: beforeCreate、 created、beforeMount、 mounted、 beforeUpdate、 updated、activated、 deactivated、 beforeDestroy、 destroyed、errorCaptured

资源: directives、 filters、 components

组合: parent, mixins、 extends、 provide、 inject

el - 挂载点，将vue挂载到节点上

data - 内部数据，支持对象和函数，优先使用函数

methods - 方法事件处理函数或者是普通函数

components：Vue的组件要注意大小写

props - 外部数据，也叫属性，HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

computed - 计算属性，计算属性就是被计算出来的属性。计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例也就是说在computed中使用使用的 getter 和 setter 的 this 都是 实例对象。

watch - 监听/侦听
watch的用途就是当数据发生变化时，执行一个函数。
watch 是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。

computed 和 watch的区别

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。

模板语法

插值操作
1.Mustache语法（）
{{}}，只能在元素的content内使用
2.v-once：只能使用初始值，数据改变之后页面不会改变。
只是一个简简单单的指令，后面没有跟任何东西。
3.v-html
动态绑定操作
1.v-bind

一般只用get，不用set，如果之后重新赋值了属性，则会调用set改变属性的值。

ES6语法

在es5之前if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题。

建议：
在es6开发中，优先使用const，只有需要改变某一个标识符的时候才使用Let
注意点：
1.一旦给const变量的标识符赋值后，不能修改。
2.在使用const定义标识符，必须进行赋值。
3.常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

v-if与v-show区别：
当条件为false时，包含v-if指令的元素，根本就不会存在dom中
当条件为false时，v-show只是给我们的元素添加一个行内样式：display:none

选择方式：
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，使用v-if（大多时候使用v-if）

数值的响应式：
定义：随着数值内元素的改变，页面也会随之生成相应变化。
有响应式的方法:push(),pop(),shift(),splice(),sort()，reverse()
没有响应式的方法：通过索引改变数组内元素

表单绑定V-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定

组件化

全局组件与局部组件
全局组件在所有的实例中都可以使用，局部组件只有在它自己限定的组件中才能使用。

v-bind与v-on：props时不能用驼峰命名法

父组件访问子组件：
1.$children2.$ref
子组件访问父组件
不建议使用

插槽SLOT

抽取共性，保留不同。

作用域插槽：
父组件替换插槽的标签，但是内容由子组件提供

模块化开发

作用：既要提高代码复用，又要避免变量名命名冲突
常用的模块化规范：
CommonJS,AMD,CMD，ES6的Modules

https://www.cnblogs.com/landuo629/p/12426345.html

知识总结
一、计算属性
1.1计算属性的本质
fullname:{set(),get()}
1.2计算属性和Methods的对比
计算属性在多次使用时，只会调用一次，它是缓存的

二、事件监听
2.1事件监听基本使用
2.2.参数问题
btnClick 后可以省略小括号
btnClick(abc,event)_>$event
2.3修饰符
stop
prevent
.enter
.once
.native
三、条件判断
3.1 v-if/v-else-if/v-else
3.2 v-show
v-show和v-if区别
v-show是加了一个display:none的属性
v-if是决定标签是否渲染出来(是否存在）。
一般很少用v-show

四、循环遍历
4.1 遍历数组
4.2遍历对象
value
value,key
value,key index
4.3 数组哪些方法是响应式的

五、书籍案例（知识点较为全面）

六、v-model的使用
6.1v-model的基本使用
v-model => v:bind:value v-on:input

6.2v-model 和 radio/checkbox/select

6.3修饰符
lazy
number
trim

七、组件化开发
7.1认识组件化
7.2组件的基本使用
7.3全局组件和局部组件
7.4父组件和子组件
7.5组件注册的语法糖
7.6模板的分类写法
script
template
7.7数据的存放
子组件不能直接访问父组件
子组件中有自己的data，而且必须是一个函数。如果不是函数，组件实例之间相互就会影响了。
7.8父子组件的通信
父传子：props
子传父：$emit
7.9vue-cli跑起来
npm install
npm run server