#vue
- 一个构建是用户界面的框架 + 是一个构建用户界面的框架
- 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似
- 数据驱动+组件化的前端开发（核心思想）
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 更容易上手、小巧
1.vue指令v-for参考
（1）v-for --循环（用来遍历数组或者对象的）
例： <li v-for="good in goods"> 【此处可以用of代替，但in是最稳妥的，in null不会报错】
<li v-for="(good,index) in goods">
<li v-for="value in object">【基于js中json对象遍历：可以直接object.keys(json名)，object.values（json名）,注意返回的是列表】
<div v-for="(value, key) in object">
<div v-for="(value, key, index) in object">
(2)v-bind --绑定属性；模板传参（简写：）
例： <div :class={"container":true}>
(3)v-on --绑定事件（简写@）
例：<button v-on:click="changeInfo">修改</button>
(4)v-if --控制隐藏、显示（本质不是隐藏显示，是销毁和重建）
(5)v-model --表单元素双向绑定
例： v-model.lazy.strim='v'[lazy不在双向绑定，trim去首尾空格]
？？？？(6)v-once --插值（只插一次，后面与之无关）；方法只执行一次（@click.once='方法或方法名'）
？？？？(7)v-html
(8)v-text --标签里的文本内容（不会暴露源码）
？？？？(9).prevent --阻止默认事件（相当于js中preventDefault）
2.vue属性方法参考 参考2
methods：自定义方法
computed：计算属性（只有变量值发生变化才会重新计算，否则就从缓存中拿，所以效率比method高）
(1)computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，
然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
(2)computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的
某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，
只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。
这里的这个总金额使用computed属性来进行计算是最好的选择
例：computed:{
fullName:{ #fullName不是方法名，html中的变量名如<div>{{fullName}}</div>
get:function () {
return this.firstName+" "+this.lastName
},
set:function (newValue) { #<div>{{fullName=Tom Green}}</div>调用set
var names=newValue.split(' ');
this.firstName=names[0];
this.lastName=names[names.length-1]
}
}
}
watch：侦听【可以侦听数组，二维数组；并不能侦听json，除非deep：true即深度侦听】[尽量多用computed]
(1)watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控单个变量，也可以是整个对象
(2)watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据
filter：（局部、私有）过滤器 --<h1>{{article.title | shortTitle(8)}}</h1> [shortTitle是filter中的方法的方法名]【用于显示，并不修改原数据】
全局过滤器--所有Vue实例对象都可以使用,但是注意一定要置于VUE构建对象之前
例（局部过滤器）：
Vue.filter('more',function (data,len) {
if (!data)
return ''
data = data.toString()
return data.substr(0,len)+'...';
})
//调用
<h1>{{input_content|more(20)}}</h1>
3.class和style样式绑定 参考
：class="[类名变量1，类名变量2，...]" --数组，将类名变量指向data中的值（data中的值才是真正的类名）（只有一个时就不必中括号）
:class="{'类名1'：true，'类名2'：false}" --json，json里的key就是类名；对应的value是true或者false，
一般将true放在data中的变量里，value指向这个变量
：style="{'属性名1'：属性值}" --json，通常将属性值放在data中的变量里，属性值指向这个变量
：style="[style1,style2]" --数组，style1，style2是一整套的样式，对应data中的style1：{}
注意:
1. vue的优先级比较高， <div :style="{}" style=""> 绑定的样式冲突会覆盖原生的style，不冲突会叠加;
2. 在自定义组件的时候，在组件<my-coponent class="foo bar">或者<my-coponent :class="{foo:true bar：true}">,
在组件的根元素上<div class="mydiv">或者vue绑定,渲染时效果<div class="foo bar mydiv">
4.条件渲染与列表渲染
（1）条件渲染v-if【切换开销较大】 参考
v-if 例 <div v-if="id==3">
v-else-if(vue2版本新增的)
v-else
注意：v-if是一个指令必须依附在一个元素上，如果想要渲染多个元素，可以用template（虚拟容器）[相当于js中创建节点时documentFragment]包裹多个元素，
相对用div的好处不会多嵌套一个元素；
本质上，可以看作是组件或者说模板销毁重建，但为了效率，相同元素会被复用
（1-2）v-if用key管理可复用的元素，v-for使用key就地补丁策略 参考v-if参考v-for
在v-if和v-else时为了效率，v-if和v-else有相同的元素时，会复用该元素（不会将该元素销毁重建，只是换了里面的内容），如果不想复用某个元素时，可以在v-if和v-else中给这个元素加上一个不同的key
（2）条件渲染v-show【初始渲染开销较大】参考
例 <h1 v-show="ok">Hello!</h1>
注意：不支持template可以用div，也不支持v-else
（2-2）–v-if和v-show
v-if ： 是“真正的”条件呈现，因为它确保条件块内的事件侦听器和子组件在切换期间被正确销毁并重新创建(虽然有部分会被复用)。【切换开销较大】
是惰性的，只要v-if为真，v-else就不会执行或者说被忽略，只有v-else条件变成真，才会被渲染
v-show：始终渲染元素并保留在DOM中; v-show只切换display元素的CSS属性（即显示或隐藏）。
（3）列表渲染v-for
例 <template v-for="good in goods">
<template v-for="(good,index) in goods">
另有感：[其实在只有一个变量时可以用of（只有一个时in和of都是可以的，而且在v-model时绑定value值，当在select下拉列表下，value为空会绑定innerText，这大概也算是vue的一种代码保护和完善机制吧），虽然js中的数组遍历是in是下标，of是元素，但js和vue是不同的一套模式，（每一种同类型的语言的本质、思想是很相似的，一通百通，但每门语言有自己的表现方式，不要局限之前的，方能不迷惑成大道）]
（3-2）v-if和v-for同时使用
v-for的优先级高于v-if当它们位于同一节点（元素）上时，会先执行v-for在执行v-if
比如说：有一个列表，列表里有6个商品
1.渲染商品价格>3000的【这时v-if和v-for应在同一节点，v-if在前会报错】
<ul >
<li v-for="good in goods" v-if="good.price>3000">
<h1>good.name</h1>
<h1>good.price</h1>
</li>
</ul>
2.当列表的长度大于8时，才渲染商品【此时v-if必须在v-for前一个节点，为了效率】
<ul v-if="goods.length>8">
<li v-for="good in goods">
<h1>good.name</h1>
<h1>good.price</h1>
</li>
</ul>
5.数组更新检测（array change detection）参考
变异方法（Vue包装观察到的数组的变异方法，因此它们也会触发视图更新）：
push() --往数组最后面添加一个元素，成功返回当前数组的长度
pop() --删除数组的最后一个元素，成功返回删除元素的值
shift() --删除数组的第一个元素，成功返回删除元素的值
unshift() --往数组最前面添加一个元素，成功返回当前数组的长度
splice() --有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）
sort() --使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() --将数组倒序，成功返回倒序后的数组
非变异方法(它们不会改变原始数组但总是返回一个新数组。使用非变异方法时，可以使用新数组替换旧数组)：
filer()
concat()
slice()
6.事件处理之event参考，默认事件与添加事件参考
method中的方法没有传参时，直接写e，或者event是可以的：
<button @click="change" id="btn001">del</button>
<!--此时$event不可以省略-->
<button @click.once="add('+',$event)" id="btn002">add</button>
methods:{
change:function (e) { #不传参时，可以的，html标签是无参，如上@click="change"
console.log(e.target.id)
},
add:function (val,event) { #html标签是@click="add('+',$event)"
console.log(val)
console.log(event.target.id)
},
}
7.事件修饰符参考
.stop --阻止单击事件继续传播(即阻止冒泡，js中有个xx.stop)
.prevent --阻止默认事件（比如a标签的默认事件href跳转，添加事件先执行，默认事件后执行，checkbox例外）
.capture --添加事件监听器？？？？时使用事件捕获模式,即元素自身触发的事件先在此处理，然后再交由内部元素进行处理
.self --只有在event.target是当前元素时触发事件
.once --事件只触发一次（原生js实现让单击事件只执行一次，在方法内部最后写：this.null）
？？？？.passive --告诉浏览器不要阻止默认事件【提高移动端的性能】【不能与.prevent一起使用】
修饰符可以串联如@click.submit.prevent='方法名'--提交事件不再重载页面
8.按键修饰符keyup 参考
例：<input v-on:keyup.enter="submit"> --按enter键提交
<input v-on:keyup.page-down="onPageDown">
<input v-on:keyup.13="submit"> --keycode也支持，但不推荐使用，
有的浏览器不支持，有一些key在ie9中有不一致的值，但可以通过全局
组件config.keyCodes对象定义自定义键修饰符别名：Vue.config.keyCodes.f1 = 112
9.exact修饰符（系统修饰键）参考
.exact允许控制由精确的系统修饰符组合触发的事件
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
###10.鼠标按钮修饰符（系统修饰键）
.left .right .middle[均是2.2.0新增](这些修饰符会限制处理函数仅响应特定的鼠标按钮)
11.v-model及v-model常用修饰符（本质是v-bind和v-on的语法糖）表单输入绑定参考官网 语法糖
（1.1） v-model 会忽略所有表单元素的 value、checked、selected初始值，而是把 Vue 实例的数据作为数据来源。
所以需要在data中写其初始值，再在html中用变量指向它
例：
<input type="text" v-model="v" value="usrname"> #此处input的内容是v（data中的数据）
<input type="checkbox" v-model="chk"> #此处的chk是data中的chk变量，变量值是true或者false
（1.2）v-model在不同表单元素下
text 和 textarea 元素使用 value 属性和 input 事件；
radio使用value和change事件；
checkbox 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
（2）v-model常用修饰符：
.lazy--让v-model和change事件同步【即输入完毕，失去焦点data中的数据才会同步】[在默认情况下，v-model 在每次 input 事件触发后将输入框的值与data数据进行同步【正在input里输入的时候就会同步】]
例：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number--自动将用户的输入值转为数值类型
例：
<input v-model.number="age" type="number">
#因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim--去首尾空
12.组件【实例和对象的区别？？？？】
组件实例[Vue.component('组件名'，{})]和项目实例(new Vue({}))的写法略有不同：
组件
data：{
return{
key(变量名):value(变量值)
}
}
项目
data:{
key:value
}
Vue.component('todo-item', {
data:function () {
return{
list:[
{name:'三星',price:10000},
{name:'oppo ',price:10000}
]
}
},
template: `
<ul>
<li v-for="g in list">
<h1>{{g.name | caption}}</h1>
<h5>{{g.price}}</h5>
</li v-for="g in list">
<button class="btn" @click="change">change....</button>
</ul>
`,
methods:{
change:function () {
alert('conponents')
}
},
filters:{
caption:function (val) {
return val.charAt(0).toUpperCase()+val.slice(1)
}
}
});
13.data为什么要函数+return1参考博客2参考官方文档
1)不使用return包裹的数据会在项目的全局可见，会造成变量污染；
2)使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
即因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！
通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
data: function () {
return {
count: 0
}
}
template可以写在外面也可以写在Vue.component()里面
14.定义全局组件，及使用，应用场景
15.不相关组件传值
16.父子组件传值与单向数据流参考
父传子：v-bind+props
注意：1.pros要设置required：true
2.子组件不能直接修改父组件的值：
可以将父组件的传过来的值包装成对象，然后在子组件中修改对象的属性，父组件，子组件的该属性都会被修改
(因为对象是引用类型，指向同一个内存空间)
子传父：
单向数据流：props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接修改父组件中的数据
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
