vue基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> #vue导入

<div id="app"></div>

<script>
#导入后实例化一个新的Vue对象
var app = new Vue({
    el:'选择器',#使用这个找到你需要的标签，然后你就可以在这个标签内找到该对象内的值
    methods:{
        
    },#这里面写各种函数
    data:{
        
    }#这里写各种数据，你可以在标签内通过{{ }}获得数据
    
})
</script>

取值

1
2
3
4
5
6
7
8
9
10
<div id="app">
	{{ message }} # vue对象中的message会渲染到这里
</div>
var app = new Vue({
    el: '#app',
	data:{
        message: 'hello Vue',
    }
})
ps：若data中存在列表以及对象，列表使用索引取值，对象使用.key的方式取值

v-once

1
2
3
4
5
6
7
8
9
这个指令会让元素只渲染一次，后续不会随着数据的改变而改变
eg:
<h2 v-once="school.phone + '!' "></h2> 
data: {
	school: {
		name: "北京校区",
		phone: 13333
	}
}

v-text与v-html

1
2
3
4
5
6
7
8
9
10
11
v-text==js中的innerText() 你为一个标签设置该属性之后，他只会将该标签内的内容全部替换为你指定的内容
ps：可以使用运算符
eg：
<h2 v-text="school.phone + '!' "></h2> 
data: {
	school: {
		name: "北京校区",
		phone: 13333
	}
}
v-html则是==js中的innerHtml() 若是你在data中设置的值附带标签，那么他会将*标签*渲染在该位置

v-pre

1
2
3
4
5
6
7
8
9
v-pre类似于后端的转义符，可以让模板语言中的模板失效，会原封不动的将模板转成字符串打印出来
eg：
<h2 v-pre="school.phone + '!' "></h2> 
data: {
	school: {
		name: "北京校区",
		phone: 13333
	}
}

v-on

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
你可以通过v-on设置事件
v-on有下述几种常用事件
@click:标签被点击时触发
@blur:失去焦点触发
@change:失去焦点时触发，与blur一样，除了一种特殊情况，就是当用户点入input框后，若是没进行任何的修改，直接退出，那么不会触发
@input:数据发生改变触发
@keyup.xxx:键盘上某个键被按下时触发，键盘的每一个按键都有特定的数字与其进行映射，例如13就是回车键
    

eg:
#为下述两个标签设置点击事件
    <div v-on:click="click">132</div>
    <div @click="click">456</div>


methods: {
    #点击事件的具体逻辑
    #语法----函数名:function(){}
    click: function() {
        // 可以通过this获得这个Vue对象内的任意值
        this.school.name = '我被点击了'
    },
},


ps:@等于v-on:是他的简化版
ps:若要为事件传参直接在标签的函数名后添加括号即可
<div v-on:click="click(123)">132</div>
    
    
在v-on后面还可以执行一些简单的js代码
<button type="button" v-on:click="count++">点击我试试</button>
<p>{{ count }}</p>

js代码:
var app = new Vue({
        el: '#demo',
        data: {
            count:12
        }
    })

事件修饰符

1
2
3
4
5
6
7
8
9
在v-on后面设置事件后，我们还可以设置一些事件修饰符
常用的事件修饰符如下所示
.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

eg:
     <div @click.stop="click">132</div>

v-show

1
2
3
4
5
6
可以通过该方法设置一个标签是否隐藏
<div v-show="is_show" v-on:click="show">我还在</div>
data: {
    is_show:true,
}
#我们可以通过修改data中的is_show来修改标签是否显示

v-if

1
2
3
v-if控制标签是否显示时功能与v-show一致，不同的是他直接操作dom树，会将一个标签直接移除。
他后面还可以写原生的js语句
他会判断后面的js语句是否正确，我们可以利用这个特性和v-else做到流程控制

v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
v-bind用于绑定标签的属性，以此来设置标签的属性
1.v-bind与普通属性的绑定
eg：
<img v-bind:src="img_src" >
    data: {
        img_src:'public/favicon.ico',
    }
上述例子中就会将img标签中的src属性绑定为img_src
v-bind还有简写的方式，可以将v-bind省去，只留下:

2.v-bind与类的绑定
:class="{active:is_active}" 语法为 {css样式的类名:data} true的话会显示，false的话不显示
data: {
        is_active:true,
    }

v-for

1
2
3
4
5
6
7
8
9
10
11
该语法类似于python中的for循环
eg:
    <li v-for="i in food">{{ i }}</li> 
    data: {
        food:['西红柿炒蛋','蛋炒西红柿']
    }
如上会生成两个li标签我们还可以获得他的索引
    <li v-for="(food,index) in foods">{{ index }}{{ food }}</li> 
    data: {
        foods:['西红柿炒蛋','蛋炒西红柿']
    }

v-model

1
2
3
4
5
使用v-model可以做到标签与数据的双向绑定，一般用于input标签，这样就会在input标签内显示message信息
<input type="text" v-model="message">
data: {
    message: '我是vue内的message',
}

key属性的作用

1
key属性在Vue中起到的作用主要是提高元素的渲染效果，这个key一般一个标签只有一个。

虚拟dom树

1
虚拟dom也就是虚拟节点，利用js对象来描述真实的dom节点。每次只修改真实dom变更的部分，这样做可以保证高效的渲染，提高渲染性能

Vue的diff算法

1
2
3
4
5
vue利用自己的diff算法对真实dom与虚拟dom的替换做了一个优化
共有三种方案
	-分层级比较
    -同key值比较（循环中尽量加key）
    -组件或标签的比较去替换