vue 学习笔记

模板语法

1. 插值语法

        用于解析标签体内容

        { { 表达式 } } ，可以直接读取到 data 中的所有属性

2. 指令语法

        解析标签（标签属性， 标签内容， 绑定事件）

        v-bind : href = " url "        或        : href = " url "

数据绑定

(双向绑定一般应用在表单类)

1. 单向数据绑定

        v-bind : value = "name"

2. 双向数据绑定

        v-model : value = "name"

两种简写：

组件相关知识

_el 与 data 的两种写法

1. el

        el : '#root'

        v.$ mount( '#root' )

2. data

        data : {

                name: '常甜'

        }

        data : function(){

                return { name: '常甜' }

        }

数据代理

通过一个vm 对象  代理  data对象的属性 的操作

作用：

        更方便操作data中的数据

object.defineproperty() 通过这添加的不参与遍历

如果data发生改变， 页面中data自动刷新

事件处理

1，用v-on : 事件        绑定对象

2，时间回调要配置在vm 的methods : {  }对象中

事件修饰符

@click.prevent = "shoeInfo"

阻止默认事件

总结：

1.     .prevent         阻止默认事件

2.     .stop        阻止事件冒泡

3.     .once        事件只触发一次

4.     .capture        使用事件捕获形式

5.     .passive        事件默认行为立即展开

键盘事件

@keyup.按键         / /        @keydown.按键

1.        enter 回车

2.        delete 删除

3.        esc 退出

4.        space 空格

5.        tab 换行 （必须配合keydown）

6.        up down left right

7.        ctrl, alt, shift, mete 是系统修饰键

        （1）keyup --- 配合其他随意按键使用

        （2）keydown --- 正常触发事件

8.未提供别名的按键，用原始按键命名，但是要加‘-’         eg: kebab-case

计算属性

computed:{ }

定义：要用的属性通过已有属性计算得来

计算属性最终会出现在vm上，直接读取使用，若要修改，必须用set响应

简写

监视属性

监视某个属性的变化

watch: {

        handler() { }

}

方式一：

方式二：

深度监视

deep:true,

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

vue中watch默认不监测对象内部值的改变，但vue自身可以监测

深度监测deep可以监测内部改变

绑定class样式

tip：正常的样式正常写 class = "basic"，改变的样式绑定写  :class = "a"

1.改变数据

<div :class="classA"> Demo2 </div>


data: {
  classA: 'class-a'  // 当classA改变时将更新class
}

2.改变对象

<div :class="{ 'class-a': isA, 'class-b': isB}"> Demo4 </div>

data: {
  isA: false,  // 当isA改变时，将更新class
  isB: true    // 当isB改变时，将更新class
}

<div :class="objectClass"> Demo5 </div>

data: {
  objectClass: {
    class-a: true,
    class-b: false
  }

3.数组

<div :class="[classA, classB]"> Demo6 </div>

data: {
  classA: 'class-a',
  classB: 'class-b'
}

<div :class="[classA, classB]"> Demo7 </div>

data: {
  classA: 'class-a',
  objectClass: {
    classB: 'class-b',  
    classC: false,    
    classD: true  
}

绑定style样式

注意点：1.font-size要变成fontSize

     2.属性值要用引号，fontSize:'14px',而不是 fontSize:14px

(未完待续)