Vue入门

插值语法用于标签体中；{{val}}

指令语法管理标签属性；

指令语法用于解析标签（包括：标签属性，标签体内容，绑定事件）；

v-bind：

例.      v-bind：id="val"

简写    ：id="val"

可以给标签中的任意一个属性动态的绑定值；

数据绑定：

单向数据绑定：

v-bind：数据只能从data流向页面；

v-bind：value="val"    简写为 :value="val"

双向数据绑定：

v-model：value="val"   简写为  v-model = "val"

v-model：可以双向；

不是所有的元素都能双向绑定；v-model只能应用在表单类元素上；输入类元素，要有value值；标题类的不能捕获输入，也就不能双向绑定；

el和data的两种写法：

const v = new Vue({....})

el:'#root' 

v.$mount('#root')

data:{

name:"aaa"

}

data:function(){
console.log('aaa',this)
return{
name:"aaa"

}

}

注意：由vue管理的函数不要写成箭头函数，箭头函数那this指向的不是vue实例，而是windows对象；

MVVM模型：

vue参考了MVVM模型；

M ：model  模板

V ：View 视图

VM :viewModel 视图模型 vue实例

vm上有的都可以在模板中直接用；

数据代理：

回顾object.defineproperty方法；

let number=18
        let person = {
            name:'aaa',
            sex:"male",
            // age:number
        }
        // 可以对追加的age属性进行控制
        Object.defineProperty(person,"age",{
            // value:18,
            // enumerable:true,  //控制属性是否可以被枚举
            // writable:true, //控制是否可被遍历
            // configurable:true //控制是否可被删除
            // 如果想让age的值为number并修改number，age也会自动变不需要在赋值，普通写法赋值后就不改变了
            // 当有人读取person属性时，get函数（getter）就会被调用，且返回值就是age的值
            get:function(){
            return number
            },
            // 当有人修改person的age值时，set(setter)就会被调用
            set:function(value){
                console.log("修改为：",value)
                // 因为读取时是value，不设置number没改变
                number=value
            }
        })

数据代理：

通过一个对象代理对另一个对象中属性的操作（读/写）

vm._data = options.data = data

--vm中的_data和定义的data是同一个

vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）；

通过object.defineProperty()把data对象中所有属性添加到vm上；

为每一个添加的属性都指定一个getter/setter；

事件：

v-on：click  / @click

event.preventDefault(). //阻止默认行为；

或者事件.prevent ->@click.prevent

事件修饰符：

1.prevent：//阻止默认事件 preventDefault()

2.stop //阻止事件冒泡 stopPropergation()

3.once   //事件只触发一次 

4.capture.   //使用事件的捕获模式 先捕获4再冒泡

               捕获：外->内 

                冒泡：内->外

5.self.      //只有event.target是当前操作的元素的时才触发事件

6.passive.   //事件的默认行为立即执行，无需等待事件回调函数执行完毕

        先执行事件行为再执行事件回调函数；（优先响应事件行为）

键盘事件：

keydown：

keyup：

回车事件：@keyup.enter

Vue中常用按键别名：

delete

esc

space

un

down

left

right

键盘上任何一个按键都有自己的编码/别名

取按键的别名：可以通过事件event.key/event.keycode获得别民/编码；

注意：按键别名由两个单词组成例CapsLock 要写成caps-lock;

也有的按键不能绑事件；

特殊能帮事件的按键：

例 :

tab： 本身就有焦点移走的事件 如果使用keyup绑定tab,即等按键摁下就已经失去对元素的焦点，就不能触发-》用keydown（按键摁下去不用起来就触发）；

系统修饰键盘：

ctrl :

alt:

shift:

meta:(win键)

配合keyup使用，要按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

配合keydown ，正常触发事件；

Vue.config.keyCodes.自定义键名 = 键码

修饰符也可以连续写 

@keyup.ctrl.y->ctrl+y

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来；

原理：借助来Object.defineproperty方法提供的getter和setter。

get函数执行：1.初次运行时会执行一次。2.当依赖的数据发生改变时会再次调用

与methods相比，内部有缓存机制，直接读取使用即可。

如果计算属性要被修改，那必须要写set函数响应修改，且set要引起计算时依赖的数据发生改变；

监视属性：

watch:

当监视属性变化时，回调函数自动调用，进行相关操作；

监视的属性必须存在

两种写法：1.new Vue时传入watch配置2.通过vm.$watch监视

handler(newvalue,oldvalue){} //当被检测对象发生改变时；

immediate:true(默认false)，初始化时让handler调用一下；

深度监视：

监视多级属性中某个属性的变化；

监视多级属性中所有属性的变化；

Vue watch中默认不检测对象内部值的改变，配置deep:true可以检测对象内部值的改变

注意：当用计算属性和监视属性都能完成时，优先计算属性，但计算属性不能完成异步任务；

绑定样式：

正常的样式正常写，绑定的样式用bind写；

绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定；

class="basic" :class="change"

change="value"

绑定class样式--数组写法，适用于：样式的个数不确定，名字也不确定；

class="basic" :class="change"

change=["value1","value2","valu3"]

绑定class样式--对象写法，适用于：样式的个数确定，名字确定，使用与否不确定；

class="basic" :class="change"

change：{

        value1:false,

        value2:false,

        value3:true,

}

绑定style样式--对象写法：

:style="styleObj"

styleObj:{

fontSize:'40px',

color:'red',

}

绑定style样式--数组写法：....