Fork me on GitHub

vue基础-上

环境搭建

1
npm install -g @vue/cli

使用的版本为:

  • vue-cli@3
  • vue@2.5

vue create vue-learn

一开始直接进去选一个默认的配置就开始搞起来了。

模板语法

一个vue文件由template,script,style构成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<h1>{{ msg }}</h1>
</template>
<script>
// 这里有两种设置变量的方法
export default{
name:'Hello World',
props: {
msg: String
},
data(){
return {
msg1:'Hello World'
}
}
}
</script>

模板语法:
文本:

1
2
3
<span>
Message:{{msg}}
</span>

原始 html:

1
2
<p>{{rawHtml}}</p>
<p><span v-html="rawHtml"></span></p>

特性(如果我们想改变dom的id属性):

1
<div v-bind:id="dynamicId"></div>

表达式(变量加1,三目操作,链式操作):

1
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

props相当于一个传参的入口,我们借助props从父组件往子组件里面传值。

例子如下:
App.vue

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
<template>
<div id="app">
<HelloWorld msg="<span style='color:red;'>Hello world</span>"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

HelloWorld.vue的样子如下:

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
<template>
<div class="hello">
<!-- 这里渲染的是字符串 -->
<h1>{{ msg }}</h1>
<!-- 这里渲染的是原生的html,同时有个动态的属性值 -->
<div v-html="msg1" v-bind="id"></div>
<div>
{{ number + 1 }}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
msg1:'<span style="color:red">Hello World</span>',
id:'txt',
number: 0
}
}
}
</script>

指令系统

模板语法里面的指令:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 当seen的值为true的时候这行才会显示出来,false不显示 -->
<p v-if="seen">现在你看得到我了</p>
<!-- 这行的内容对应上面if的else -->
<p v-else>你又失败了</p>
// some codes..
<script>
data(){
return {
seen: true
}
}
</script>

这里一定要记得去官方文档里面好好看看。

自定义指令

官方文档

应用场景

  • 功能没有复杂到用组件去做

参考官方文档的一个demo:

1
2
3
4
5
6
7
8
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

我们可以自己写一个例子:compoenents/n.js,功能大概是拿到某个使用该指令标签的value

1
2
3
4
5
6
7
8
9
10
11
12
import Vue from "vue";
Vue.directive("n", {
// el是绑定元素的dom节点
bind: function(el,binding) {
// textContent是节点的内容属性,binding是节点的值
el.textContent = Math.pow(binding.value,2);
},
update: function(el,binding) {
el.textContent = Math.pow(binding.value,2);
},
});

然后在App.vue里面的script里面导入一波:

1
2
3
<script>
import './components/n';
</script>

HelloWorld.vue里面可以用一波:

1
2
<div v-n="4">
</div>

这个时候页面上就会渲染出16,如果我们将其动态更新为3,则页面也会随着热更新变更为9

修饰符

去阻止一个默认指令,类似与之前react使用antd表单里面的e.prevent()

1
<form v-on:submit.prevent="onSubmit">...</form>

这里可以阻止一个默认的事件行为(比如链接的跳转)。

指令的缩写

以下的操作都是等价的:

1
2
<a v-bind:href="url">...</a>
<a :href="url">...</a>

1
2
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

计算属性

Basic Demo:

1
2
3
4
<div id = "example">
<p>Original message:"{{ message }}"</p>
<p>Original message:"{{ reversedMessage }}"</p>
</div>

只要message的值变了,下面的值也会跟着一起去发生变化,具有一种监听的效果。

应用场景:
具有依赖关系的数据监听。

demo大概是这样的,当某个值发生了变化的时候,所有和他有关系的值都会跟着发生变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<div>
我借你{{money}},你还我{{a}},还剩{{b}}
</div>
</template>
<script>
export default{
name:"HelloWorld",
data(){
return{
money: 100,
a: 10
}
},
computed: {
b:function(){
return this.money - this.a;
}
}
}
</script>

类与样式

对象语法:

适合较多的class名或者动态的class

数组语法

适合较少的class

大概有这样几种用法:

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
<template>
<!-- 使用v-bind为之添加class属性,加两个属性值 -->
<div :class="[a1,a2]">
我借你{{money}},你换我{{a}},还剩{{b}}
</div>
<!-- 当a3为true才有test-1类名,否则没有 -->
<div :class="{'test-1':a3}">
style object
</div>
<!-- 这里会加上两个属性,`test-1`和`test-1`和上面类似 -->
<div :class="obj">
style obj
</div>
</template>
<script>
export default {
data(){
return{
a1:"test-1",
a2:"test-2",
a3: true,
obj: {
'test-1':true,
'test-2':true
}
}
}
}
</script>

条件&列表渲染

基础用法

if else,for的模板处理方式

分组用法

比如说我们想动态的遍历一个列表里面值,或者我们想在渲染的列表里面的每一项里面都加上一些东西,比如加一些其他的元素,就类似列表的动态的渲染:

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
<template>
<div>
<ul>
<!-- 这里和react里面使用map遍历有点不同hhh -->
<li v-for="(item,index) in list" :key="item">
{{ item }} , {{ index }}
</li>
</ul>
<!-- 列表渲染里面添加一些其他的属性 -->
<ul>
<template v-for="item in list">
 <!-- 这里两个li的key值在同时渲染出来的时候不能相同 -->
<li :key="item + 1">Hello</li>
<li :key="item">
{{ item }}
</li>
</template>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
list:['a','b','c','d']
}
}
}
</script>

事件

事件处理

  • 定义&缩写

    事件的定义及缩写

  • 内联写法

    事件传参和事件对象

  • 时间修饰符

    快速结合键盘时间提升效率

我们在compoenents目录下面新建一个events.vue,用一个最经典的count计数来作为例子:

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
42
43
44
45
<template lang="html">
<div class="events">
<!-- 在vue下面注册事件如何拿到原生对象 -->
<button type="button" name="button" @click="msg('s',$event)">test</button>
<!--这里会出现一个冒泡的场景 -->
<div class="parent" @click="parent">
<p>parent</p>
<p>parent</p>
<p>parent</p>
<div class="child" @click.stop="child">
child
</div>
</div>
<button type="button" name="button" @click="handleClick">点击 {{count}} +1</button>
</div>
</template>
<script>
export default {
data: function() {
return {
counter: 0,
count: 0
};
},
methods: {
msg: function(a, b) {
// b里面可以拿到原生的dom对象
window.console.log(Math.random(), a, b);
},
parent: function(){
window.console.log(`parent`);
},
child: function(){
window.console.log(`child`);
},
handleClick: function(){
this.count += 1
}
}
};
</script>
<style lang="css">
</style>

然后在App.vue里面引入一波(使用import导入,然后components里面写一下):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div id="app">
<ev />
</div>
</template>
<script>
import ev from "./components/events.vue";
import "./components/n";
export default {
name:'app',
components:{
ev
}
}
</script>

事件修饰符的文档

-------------本文结束感谢您的阅读-------------