vue使用详解

const x = new Vue({
    el:'#root'
})

axios({
    url:"http://xxx"
})

el用于指定当前vue实例为哪个容器服务

插值语法{{}}

指令语法

v-bind:href="url"             v-bind可以简写为     ：

插值语法往往用于标签体语法

起始标签和结束标签中间所夹着的内容就是标签体内容

例如：<h1>aaa</h1>

Vue模板语法有两大类

1、插值语法

功能：用于解析标签体内容

写法：{{xxx}},xxx就是js表达式，且可以直接读取到data中的所有属性

2、指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.........）

vue中有两种数据绑定的方式

1、单向绑定（v-bind）：数据只能从data流向页面

2、双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data

备注：1、双向绑定一般应用在表单类元素上（如input、select等）

        2、v-model:value可以简写为v-model

        因为v-model默认收集的就是value值

el与data的两种写法

el的两种写法
Const v = new Vue({
    el:'#root',     // 第一种写法
    data:{
        name:'123'    
    }
})

v.$mount('#root') // 第二种写法

data的两种写法

data:function(){
    return{
        name:'123'
    }
}

MVVM模型

M         模型（对应data中的数据）

V        视图（模型）

VM        视图模型（Vue实例对象）

数据代理        object.defineProperty

通过一个对象代理对另一个对象中的属性的操作

事件处理

v-on:click="showInfo"        简写@click="showInfo"

事件的基本使用

1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

2、事件的回调需要配置在method对象中，最终会在vm上

3、methods中配置的函数，不要使用箭头函数。否则this就不是vm了

4、methods中配置的函数，都是被vue所管理的函数，this的指向是vm或组件实例对象

5、@click="demo"和@click="demo($event)"效果一致，但后者可以传参

        @click.prevent        阻止a标签默认行为        prevent是事件修饰符

vue中事件修饰符

1、prevent:阻止默认事件（常用）

2、stop:阻止事件冒泡

3、once:事件只能触发一次

4、capture:使用事件的捕获模式

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

6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

@keyup.enter ->代表回车键

vue中常见的按键别名：

回车 =>enter

删除=>delete(捕获”删除“和”退格“键)

退出=>esc

空格=>space

换行=>tab(必须配合keydown使用)

上=>up

下=>down

左=>left

右=>right

2、vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为keyab-case(短行线命名)

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta

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

4、也可以使用keycode去指定具体的按键（不推荐）

5、vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名。

监视

深度监视      加属性deep:true

 

简写

 

vue绑定style样式

 改进

 条件渲染

key的作用与原理

key的默认值是index

 

列表渲染 

条件查询，根据查询值过滤数组，将得到的数据放入一个新的数据中，html中循环新数组，

immediate值为true,立即执行，否则，第一次进入页面时，列表显示数据为空，因为展示的是新数组，此时查询输入框为空，所以新数组为空。

判断空字符串在数组中是否存在，返回的是0。

当computed和watch都能实现的时候，优先使用computed

1、watch实现

2、computed实现

 

 列表排序

 更新时的一个问题

 

对象中追加属性

 

 

点击账号关联输入框

 

 

 

过滤器 

 

内置指令 

 

 

自定义指令

与data同级，directives用于定义自定义指令 

 

 

 

生命周期 

 

 

 

 

 组件化便程

 

 ​​​​​

 

组件的嵌套

 下方的创建vm, vm中只注册school组件

new Vue（{

        el:'#root',

        components:{

                school:school

        }

}）

 

 

 

 

 

ref属性

 

 

 

 

 

 

vuex工作原理图