Vue2文档总结

data对象所有的属性被加入到Vue的响应式系统(被创建的时候就已经存在才是,临时加入的不是)
一开始的声明其实就是让他在创建的时候就存在。如果用如果用Objectfreeze(obj),阻止obj修改自己的属性,所以响应式系统就不能追踪他的变化
v-once只执行一次插值,当数据改变的时候,插值的内容不会再更新
v-html可以把html代码执行出来,用户提供的信息不要这样用,Xss攻击,只对可信的东西用就好。Xss攻击可以利用Xss库进行配置
用在html属性上面不可以用{{}}`,需要用`v-bind`的。其实如果`v-bind`的属性是`false`\ `null` \ `undefined`的话,渲染出来的该`html`元素不会含有该属性的。`{{}}和v-bind中都可以放JavaScript表达式,v-bind的属性名会被强制转换成小写,

v-bind 和 v-on的缩写

:herf = "ur1"
//动态参對的缩写
:[key] = "url"

@click = "dosomething"
@[event] = "dosomething"

计算属性的使用和普通属性一样绑定在html元素上面
插值可以调用methods里面的方法
计算属性有缓存,看的是它所对应的依赖是否改变,如果改变才会重新求值,如果没有变化,则不会。methods的话是每次调用都会执行的
```
computed:{
    now:function(){
        //该属性now不会再更新,因为Date.now ()不是响应式依
        return Date.now()
    }
}
```
当一些数据需要随着其他数据变动而变动的时候,你特别容易滥用watch,其实用computed会更好一点,computed可以监听到data里面的响应式数据(做为计算属性的依赖之后)
计算属性默认是只有getter,有需要的时候需要自己提供setter方法来做,就是更改属性的时候调用,做一下事情
watch:当数据变化的时候执行异步或者开销比较大的操作的时候

class和style动态的切换class,class和:class是可以共存在个html元素上面的

:class = obj或者:class=[]
/*这个obj/[]当然可以定义computer的返回值或者data里面
调用子组件时候使用:class会传入到子组件的class*/

Vue渲染的时候会复用些相同html标签,有些需求是不可以被复用的,此时可以给该标签或者组件添加key属性,确定唯一性。
v-show渲染的元素是始终存在dom中的,只是控制display的属性切换,v-lf会重复创建和销毁的,v-show不可以用在template中,也不可以v-else搭配使用
v-for="(1,2)"参数1是item,参数2是index.他们两个的位置不可以被改变
遍历的是数组的时候
```
v-for="item of itens"和v-for="item of items"效果是一样的
```
v-for被遍历的是对象的时候,v-for="(value,key,index)"第个参数是值,第二个键名,第三个是索引
嵌套的v-for中不要使用computed方法
访问原生的JS事件对象的时候,可以使用特殊变量$event作为参数传到方法中

事件修饰符

//阻止事件继续传播
@click.stop
//提交事件不再加载页面
@submit.prevent
//捕获->目标->冒泡 内部触发的事件先在外部处理,之后才去内部元素处理
@click.capture
//事件自身才会触发
@click.self
//阻止所有的点击
@click.prevent.self
//阻止自身的点击
@click.self.prevent
//点击事件只会触发一次
@click.once
//不想阻止事件的默认行为,比如滚动事件的滚动行为
@:scroll.passive //--->不阻止默认事件的发生

按键修饰符

//arrowUp/pageDown等
@keyup.enter 
//keyCode
@keyup.13
//全局定义按键修饰符的名字
Vue.config.keyCodes.f1 = 112 //@keyup.f1
//兼容老的浏览器,为键盘起的小名
.enter/.tab/.delete<删除事件/退格键>/.esc/.space/.up/.down/.left/.right

系统修饰符:按下响应的键才可以触发鼠标或者其他按键的事件

.ctrl  .alt  .shift .meta<windows图标键>
// Alt + C
@keyup.alt.67
//Ctrl + click
@keyup.click.ctrl
//exact精确控制系统修饰符的组合触发的事件
//即使alt、shift被按下,也可以触发,因为按下ctrl+click就可以满足条件
@click.ctrl
//有且仅有ctrl被按下才会触发
@click.ctrl.exact
//没有任何系统修饰符按下才会触发
@click.exact

鼠标修饰符
```
.left
.right
.middle
```

v-model修饰符

.lazy // 只有change事件发生的时候,才会同步数据
.number//自动将输入的值转number->parseFloat解析,无法解析的话,返回原始值
.trim//自动过滤输入的首尾空白字符

$emit([事件名],args)在父组件中可以通过$event来得到这个args的值
动态组件用is这个属性
组件的名字全部小写而且用-字符连接。在非模板字符串中,也就是不在template中,无法使用<myComponent/>,只能写成<my-component/>
props['myData'],props中命名是驼峰,html会把它们全部转成kebab-case。比如my-data
事件名用kebab-case,因为html会全部转成小写
props是单向数据流,父亲的数据会更新到儿子那边,所以是响应式的。儿子那边不能修改来自父亲的值,因为父亲更新会改变该值。解决办法:深拷贝一份数据,用来做其他的事情->分两种情况:

如果是想把props的值做为子组件本地的数据使用,可以在data里面定义一个变量,把props属性值给该变量
如果是希望把props里面的值做一个基础的原始值,在子组件中显示的话,可以防止computed中做处理

props做自定义验证

1. 
props:{
    foo:{
        validator:function(val){
            return ['success','warining','danger'].indxOf(val)!=-1
        }
    }
}
2.
props:{
    //判断是不是Perosn的实例
    author:Person
}
function Person(firstname,lastname){
    this.firstname = firstname
    this.lastname = lastname
}

$attrs与 $listens

//在子组件中使用
1->2->3
//在2中用
`:$attrs` `@listens` ->接受1中没有进入`props`里面的其他属性和1的全部方法
//在3中用
接受1和2中没有进入 `props`里面的其他属性和1和2的全部方法

组件的.sync修饰符就是让子组件做改变的时候同步到父组件中,和props传值/$emit中效果一样。组件中使用v-model也可以实现

<input v-model="something">
<input :value="something" @input="something=$event.target.value">
//在组件中使用v-model
{{title}}测试用的,(1)  //初始的title = '1111'
<Child v-model="title"/>
Vue.Component('Child',{
    template:`<div>
    {{value}}   ------------>用来测试(2),现在显示'1111'
    <button @click="change()">按钮</button>
    </div>,
    props:['value'], 
    methods:{
        change(){
            this.$emit('input','22222') --------------> 一定要触发input事件,点击之后测试(1)/(2)变成'22222'
        }
    }
    `
})

keep-alive可以用来保存切换之后页面的存在状态
filters中用着{{}}/v-bind中,用|隔开,原始值|过滤方法A|过滤方法B,A得到的结果到B。或者value|A(arg1,arg2)

对象和数组,Vue无法检测它们的变化,解决办法:

1. 对于对象---> set向嵌套对象添加响应式的数据
this.$set(this.obj,[属性名],value)
//如果是添加多个属性,需要让原对象与要混合的进去的属性组合成一个新的对象
this.someObj = Object.assign({},this.someObj,{a:1,b:2})
2. 对于数组--->实现vm.items[index]= newVal的效果--->这种不是响应式的,下面的才是
//set
this.$set(vm.items,index,newVal)
//splice
this.items.splice(index,1,newVal)

$parent可以访问父亲的data属性,但最好不要这样做。ref给我一个组件的id,通过this.$refs.[id]来访问,refs不是响应式的,所以不应该在模板中或者computed使用

nextTick()

//tick的意思是一次事件循环->保证虚拟dom被挂在真是dom之后立刻执行,数据被更新到dom之后立刻执行
1. Promise
methods:{
    updataMsg(){
        this.msg = '已更新'
        console.log(this.$el.textContent) //未更新
        this.$nextTick(()=>{
            console.log(this.$el.textContent)//已更新
        })
    }
}
2.Async/Await
methods:{
   async updataMsg(){
        this.msg = '已更新'
        console.log(this.$el.textContent) //未更新
        await this.$nextTick
       console.log(this.$el.textContent)//已更新
    
    }
}