Vue01- 指令,过滤器,样式
[题外话：ES6的新特性](https://www.jianshu.com/p/ac1787f6c50f)
MVVM模式
实例：
项目的目录结构：
项目的运行方式：
数据代理
let a={x:1,y:2};
let b={z:1};
Object.defineProperty(b,'x',{
get(){
return a.x;
},
set(value){
a.x=value
}
})
通过修改b中的x属性就可以修改a中的x.
vue使用同样的原理: 当我们在vue实例中定义data时, data中的数据就会被以同样的方式被copy到vm(vue实例, 也是mvvm中的vm)上, 在vue实例的_data就是定义的data.
这解释了为什么vue中在data中设置了数据, 可以通过this.???调用, this指的就是vm, 即vue的实例, vm中被同步了data中的数据, 一旦发生修改data中的数据会被修改则是因为使用了数据代理.
指令
v-cloak
该指令其本质上是保持在元素上直到关联实例结束编译，保持期间运行指令定义的逻辑。
v-text
<div v-html="msg">ddddd</div>
<script>
var vw=new Vue({
data:{
msg: '<h1>zzzzzz</h1>'
}
})
</script>
v-html也会直接覆盖标签中的文本，但是它在解析时会将h1这样的元素当成html内容，不会原样解析，这是v-text或插值表达式不能做到的，这两者是直接解释。
v-bind
**注意：v-bind：可以被简写为 ：，它会把后面的属性值中的内容理解为js处理，所以 ：title=“mytitle+‘123’” 是可以被解释为mytitle变量值与123的字符串拼接。**
插值表达式通常用于指定标签内部的显示, v-bind用于标签属性的指定.
插值表达式中可以使用vue实例中的任何一个属性字段.
v-on
该指令用于绑定事件,**缩写为 @**。
<input type="button" v-on:click="show">
<script>
var vm=new Vue({
el: '..........',
data:{
...........
},
methods:{
show: function (){
alert("Hello!");
}
}
})
</script>
这里值得一提的另一件事:
<input type="button" v-on:click="show(33333)">
<script>
var vm=new Vue({
el: '..........',
data:{
...........
},
methods:{
show(value){
alert(value);
}
}
})
</script>
JS中的函数调用默认会传入一个event作为隐藏参数, 即
<input type="button" v-on:click="show">
<script>
var vm=new Vue({
el: '..........',
data:{
...........
},
methods:{
show(event){
alert(event.target); //这里的target就会显示上面那个button.
}
}
})
</script>
但一旦我们传入参数show(33333), 就会导致event这个隐藏参数失效.
所以:
<input type="button" v-on:click="show(33333,$event)">
<script>
var vm=new Vue({
el: '..........',
data:{
...........
},
methods:{
show(value,event){
alert(event.target); //这样就可以保留event这个参数, 该参数在很多需求的实现时会很有用, 可使用此方式保留.
}
}
})
</script>
“跑马灯”功能:
在vue实例中访问自身的问题：
课题代码：
v-model
双向数据绑定指令。
v-model用于收集表单元素的value值, v-model:value=???, 可以简写成v-model=???
v-for
循环普通数组
循环对象数组
循环对象的属性
迭代数字
注意：v-for在渲染时可能会有下列问题：
v-for练习
v-show和v-if
当v-if的值切换时，会不断的进行元素的创建和删除，而v-show是一定创建然后进行是否显示的切换，所以**v-if有较高的切换性能消耗，而v-show有较高的初始渲染消耗。**
自定义指令
自定义全局指令
指令设置函数的其他参数：
binding：一个对象，包含以下属性:
name: 指令名，不包括 v-前缀
value: 指令的绑定值，例如：v-my-directive=‘1+1’，value的值是2
oldValue: 指令绑定的前一个值，只在update和componentUpdated中可用，无论值是否改变都可用。
expression: 绑定值的字符串形式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg: 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers: 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：vue编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了 el 之外，其他参数应该是只读的，尽量不要修改它们。如果需要在钩子函数之间共享参数，建议通过元素的dataset进行。
自定义私有指令
使用directives属性进行相关设置：
函数简写
此时函数中的内容将被认为同时写入update和bind中。
事件修饰符
**.stop阻止冒泡：**
**.prevent阻止默认行为：**
只阻止元素默认的行为，对于点击事件等是不阻止的。
**.capture添加事件侦听器时使用事件捕获模式：**
添加该修饰，将导致从外向内触发函数, 即捕获阶段就启动函数, 而不加该修饰符默认使用冒泡模式, 在捕获阶段不会有动静。
**.self只当事件在该元素本身(比如不是子元素)触发时触发回调：**
**.once事件只触发一次：**
.self和.stop的区别：
按键修饰符
vue可以使用@keyup开启对于键盘按键抬起事件的监听，通过在后面添加修饰符可以控制响应特定的按键。
系统开放的按键修饰符：
.enter
.tab (特殊, 配合keydown使用,不要keyup, tab键本身有切换焦点的功能)
.delete
.esc
.space
.up
.down
.left
.right
对于没有的按键，方法一：@keyup.13 这里的13就是enter键的键码。
其他键码： [JS keyCode键码](https://www.cnblogs.com/cnblogs-jcy/p/6409672.html)
也可以使用event.keyCode进行显示.
如果要键盘监听ctrl+y这样的多键连用, 则@keyup.ctrl.y="????"
自定义按键修饰符：
计算属性
computed:{
newProperty:{ //newProperty就是你要新增的动态属性
get(){
return ???
},
set(value){
}
}
}
简写, (简写时一定是明确要放弃使用set部分才行):
computed:{
newProperty(){ //newProperty就是你要新增的动态属性
return ???
}
}
VUE中使用样式
class样式
[数组中的方法](https://blog.csdn.net/qq_42303885/article/details/85332359)
使用v-bind绑定数组
<div :class="['red','thin']"> //其中red和thin都是定义好的class，注意数组内的引号不能省略！
v-bind与数组结合使用时，数组内可以使用三元表达式
//当数组中的字符没有被引号修饰，将被解析为变量，flag将被解析为变量，使用三元表达式确定后面的class
<div id='app' :class="['red','thin',flag?'active':'']">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
v-bind与数组结合使用时，数组内可以使用对象
//在对象中使用class作为key，用变量作为value，以决定class是否被应用
<div id='app' :class="['red','thin',{'active':flag}]">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
v-bind绑定的class中直接使用对象
//这种情况下对象的属性可以省略引号，对象属性设置为class，对象值设置为true/false
<div id='app' :class="{red:true,thin:true,active:true}">
也可以这样,将对象移动到data中再绑定
<div id='app' :class="obj">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true,
obj:{red:true,thin:true,active:true}
}
})
</script>
内联样式
v-bind绑定style，style内设置对象
//对象本质上是无序的键值对，red带引号是为了不被当做变量处理，font-weight带引号是因为带`-`的属性, 引号不能省略。
<div id='app' :style="{color:'red','font-weight':200}">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
//当然，我们也可以把对象抽取出来设置到data中
<div id='app' :style="obj">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true,
obj:{color:'red','font-weight:200}
}
})
</script>
v-bind绑定style，style内设置数组，数组中可以设置多个对象
<div id='app' :style="[obj1,obj2]">
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true,
obj1:{color:'red','font-weight':200}
obj2:{'font-style':'italic'}
}
})
</script>
过滤器
Vue允许自定义过滤器以进行常见文本的格式化。
过滤器可以被应用于mustachc插值和v-bind表达式。
过滤器需要被添加在JavaScript尾部，由管道符 `|` 指示。
管道符前面的会作为第一个参数n, nameFilter2(2222)代码中传入的2222其实是作为函数中定义的arg.
**注意：通过方式一定义的过滤器为全局过滤器，必须定义在vue实例之前！全局过滤器可以被多个vue实例使用，方法二的私有过滤器只能被当前实例使用。**
当私有过滤器和全局过滤器重名时，调用时私有过滤器优先级更高，全局的将不会调用。
Stylus语法
如果要使用stylus语法需要：
[Stylus官网](http://stylus-lang.com/)
vue需要安装相应的loader才能解析该语法.
