Vue.js深入浅出

后端MVC与前端MVVM
M从服务器里拿到数据
VM分割了M和V，把M渲染到V中
V就是页面
MVVM 让开发更方便，VM提供了数据的双向绑定
基本语法

v-cloak：display：none，设置样式，解决元素在未加载js时闪烁的问题
v-text和插值表达式，都会把msg:

11

解析成普通文本，这个时候要用到v-html
v-text 和v -html都会覆盖原来的内容，而插值表达式不会
v-bind ：告诉我们提供绑定属性的一个指令，告诉我们这是一个属性，要去绑定数据，替换title

会把后面的属性当作一个变量，可以写成字符串

可以被简写为:

v-on 用来绑定事件，调用的方法从method里找
v-on:“click”="" 可以缩写为 @click = “”
v-on 事件修饰符 @click.stop

capture:从外往里触发事件
self和stop：self只阻止自己身上的冒泡行为

数据双向绑定v-model
而v-bind只能单向绑定

input里修改后，h4里也会变
v-model只能用于表单元素中

class的使用

也可以间接使用对象

对象就是无序键值对的集合，如果属性带-一定要在外面加‘’

使用内联样式


v-for 遍历数组




遍历对象
v-for迭代数字，从1开始

会输出

现在key属性是必须的，跟踪每一个节点的身份，只能使用数字或者字符串
v-if 和 v-show
v-if有较高的切换性能消耗（每次重新创建）
v-show有较高的初始性能消耗

过滤器：对model中的数据格式化

可以使用多个过滤器

私有过滤器
自动在前面补位 padStart
按键修饰符，数字代码也可以 keyup.13
定义全局按键修饰符

自定义指令
全局指令：js动作放在inserted中，css样式 html 放在bind中
指令传参数

定义私有指令
自定义指令简写，等于写到bind和update里去
生命周期

生命周期函数：

• beforeupdate 数据中是新数据，但是页面上仍是老数据
  

修改name使得有多个transition动画


组件化：从ui界面进行划分，方便ui组件的重用
模块化：从代码逻辑进行划分，方便代码分隔开发

子组件和父组件
子组件默认无法访问父组件data上的值和method的方法，但是可以用属性绑定v-bind传递，要在props数组中定义

props中所有的数据都是通过父组件传过来的，子组件data中的数据是自身私有的
data中的数据可读可写，props中只读

ref组件引用

前端路由和后端路由

redirect

router来显示布局

↑left main都是字符串，只有当:name的时候才需要考虑是字符串还是变量，否则都是字符串

compute method 和 watch

webpack config 配置
https://www.cnblogs.com/singledogpro/p/12030550.html

webpack-dev-server

Babel

第一个包负责转化，不知道高级语法和低级语法间的对应关系
第二个包负责翻译字典？高级到低级

webpack解析vue

export 用花括号接受
export default 可以直接用变量来接受

scoped 样式只在组件范围内有效