vue基础知识笔记

vue 容器（html）+实例（vue对象）
mixin：全局混入，可以定义全局变量和方法，和钩子函数，所有的mc和mv都能用

插件：能增强vue的全局功能，增加vue对象的功能，如过滤等使用：Vue.use（插件js名字）相当于java里面的重写install（Vue）｛｝方法，在这个方法里面增加东西然后暴露
v-bind绑定标签属性中的之后，冒号里面就可以执行js表达式了
v-bind：单向绑定
v-model：双向绑定（注意只能应用在表单内元素上）输入类 默认收集的就是表单的value值

data两种写法：对象式和函数式
箭头函数没有this，就会往外找，就找到了全局的window
所以data函数不能写成箭头函数
所以由vue管理的函数都不要写成箭头函数，一但写成箭头函数，this就不是vue实例了
mvvm模型：
m：模型（model） 对应data中数据
v：视图（view） 模板
vm：视图模型 vue实例对象
1、数据绑定
2、dom监听

Object.defineProperty（person，｀age｀，｛｝）给对象单独赋值，这里添加了一个age这个属性，这个值不能枚举（遍历） 可以用来给对象和另一个属性值做关联
1、让enuemrabe的值变成true就可以遍历
2、writable变成true就可以修改
3、configuration变成true就可以被修改
4、get()方法 当有人读取person 的age属性值时，就会触发get方法
5、set()和get相同

数据代理：通过一个对象代理对另外一个对象的属性操作
vm_data和我们写的data是同一个
vue数据可以直接取data数据的原因就因为把data中的数据直接在vue中定义后通过数据代理连接起来了

v-on：XXX @XXX 绑定事件

vue事件修饰符：
prevent阻止默认事件
stope阻止事件冒泡
事件只触发一次

方法里面传入参数，默认会得到调用该参数的dom，可以得到比如value值

按键事件 event.key code 可以得到按键编码 event.key得到按键名字 vue给常用按键取了别名 注意tab键必须配合keydown使用
系统修饰键：Ctrl alt shift meta
一般配合keydow使用
配合keyup使用，要加上其他键然后松开才触发
如果两个键都要要，就用@keyup.Ctrl.y 就表示ctrl+y才触发该事件

插值语法调方法｛｛方法（）｝｝加入了括号，就会得到方法的返回值

计算属性：computed：属性名：｛｝要配一个对象，默认会是一个处理计算所得的值放在vm上面，所以是对象，里面有get和set方法，get方法返回值就是属性值 方法被调用时机。set中改值只有改get中依赖中的值才能正真改掉值：具有缓存
1、初次读取该属性值
2、所依赖的属性发生改变时
简写：只有只用get方法时可以用简写

监视属性：watch
方法：handler（newvalue,oldvalue）
immediate:true 初始化时调用下

深度监视：vue自带的属性配置，对象里面的属性都是带引号的，简写可以不带，但属性本身是对象，要取里面的值就要加上引号了
deep：true 监视多级结构中所有属性的变化
当属性监视只需要handler的时候，就可以简写

计算属性和监视属性都是vue设计的对已有的数据进行操作的设计
计算属性和监视属性对比：
1、监视属性可以用异步操作
2、计算属性不能异步操作，因为计算属性要有返回值，到异步操作后返回值就返回给异步任务了
定时器函数，如果不写成箭头函数，里面的this就会是window，因为它是浏览器定时器管理模块控制的，不受vue控制。
所以定时器里面要调vue 的 this就要写成箭头函数，那它就没有this就向外找，就会找到vue了
不被vue管理的函数：定时器函数、ajax函数、promise函数 进量都写成箭头函数 这样this只向的就会是vm了

样式： 正常样式class=｀basick｀
变化样式 :class=a
basick是写好的样式对象名字
然后a被绑定了，可以从vue中取 最后会自动合在一起
1、还可以是样式名字数组
2、可以是样式绑定的对象写法，个数样式名字确定，但是动态决定用不用

样式还阔以直接在标签里的style赋值

条件渲染：
1、v-show 最终调整的就是display属性
2、v-if 结构都会没有 v-else-if如果前面成立，后面就不会走了 v-else 就可以不加判断了，前面都没走，就会直接走else了 中间不能有打断
注意js中等于要写三个 ===

template标签，可以作为一个大箱子，抱住里面东西，渲染成功后，不影响结构 只能配合v-if

列表渲染：v-for
可以遍历数组和对象、字符串、指定次数
很重要的关键字属性:key=｀｀，用于给节点做标识
key是vue虚拟dom和真实dom对比复用的默认重要对比字段，如果自己不写，就会默认用index

vm数据代理原理：
通过代理对象的set（）自动检测的 会影响页面的渲染
所以当一开始没有在data中加的属性用方法加上去的话，必须要用vue的set方法或者vue.$set，才能提现到页面上注意数组元素：要改变数组的值响应在页面上，只有调用vue内置的数组方法或者用vue.set或者vue.$set()但这两个方法不能用在vm根数据身上，如data上，方法才行想直接通过index改变，vue页面是不会改变的，没有对应的set
收集表单数据
v-model:默认是收集value的值
1、radio遇到单选框的时候，没有默认value值，要在标签上自己加上
2、checked多选框也要自己配置value值，不配就会默认绑定chcke（判断是否勾选了），重要：v-moudel绑定的类型要是一个数组

表单中的按钮，只要点击，就会触发表单提交，所以
1、可以给按钮配置个点击提交的方法，@click事件
2、给表单绑定表单提交事件@submit
v-moudel也具有修饰符 如v-moudel.number表示提交数字类型数据
v-moudel.lazy表示最后写完才收集表单信息

第三方库：bootcdn

过滤器:
1、js关键字filters
2、视图层是通过|连接如｛｛time | timeformate(YYYY-MM-DD) | mySlent ()｝｝
filters对象里放的方法就是timeformate和mySlent方法，默认传的第一个参数就是time值，第二个就是方法里面的值了，然后是一级一级顾虑，有多少方法就执行多少个
配置全局的过滤器：vue.filter

vue内置指令：
v-text：向其所在文本中渲染内容，没有｛｛｝｝好用
v-html：支持结构的解析 如能写html标签让网页识别该标签 这样存在危险行为() 容易导致xss攻击 永远不要在用户提交的内容上使用html
v-cloak：没有值，当vue创建容器并接管容器后，就会去掉该标签属性
v-once:没有值，初次动态渲染后，就视为静态内容了
v-pre:加上后，vue就不会解析值了

$mount也可以指定标签绑定vue