Vue.js - 学习记录

Posted by 陈陈君 on 2021-01-18
Estimated Reading Time 5 Minutes
Words 1.2k In Total
Viewed Times

Vue.js

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 作为 JavaScript 框架在国内非常火热,如常见的 微信小程序、UniApp、鸿蒙的App应用开发等、都有 Vue.js 的身影。

安装 Vue.js 命令行

1
npm install vue

安装 Vue.js 脚手架

1
2
npm install -g @vue/cli
npm i -g @vue/cli-init

如果遇到安装不上,可使用 cnpm 安装(可选)

1
2
3
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
cnpm i -g @vue/cli-init

构建Vue应用

1
vue create [项目名]

使用 webpack 构建 Vue 应用(可选)

1
vue init webpack [项目名]

安装依赖

c d 进Vue项目使用命令安装依赖

1
npm install 或 cnpm install

运行项目

1
yarn serve

运行基于 webpack构建的 Vue 应用(可选)

1
npm run dev

el 数据绑定

在传统的网页设计中。要改变dom内容总是需要不停获取dom对象。在 vue 中能够使用数据绑定来解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
<div id = "app">
你好我叫:{{ name }}
<div>

<script>
new Vue({
el: '#app',
data:{
name: '陈陈君'
}
});
</script>

这里创建了一个Vue实例,e l 绑定到了 id 为 app 的 dom 对象。其中 data 可以为数据模型

data 数据对象

data 中能够定义 多种类型,如:数组、对象、数字、字符串、布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
姓名:{{ chen.name }}<br/>
年龄:{{ chen.age }}<br/>
性别男:{{ chen.sex }}<br/>
兴趣爱好:{{chen.hobby[0]}}{{chen.hobby[1]}}{{chen.hobby[2]}}<br/>
</div>
<script>
new Vue({
el: '#app',
data: {
chen:{
name: '陈陈君',
age: 20,
sex: true,
hobby:['编程','音乐','游戏']
}
}
});
</script>

Vue 指令

v-text

使用 v-text 指令的 dom 将被传进来的数据覆盖

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app" v-text="txt">
小陈
</div>

<script>
new Vue({
el: '#app',
data: {
txt: '陈陈君'
}
});
</script>

v-html

使用 v-html 指令的 dom 可以被传进 dom 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="app" v-html="txt"></ul>
<script>
new Vue({
el: '#app',
data: {
txt: `
<li>陈陈君</li>
<li>陈陈君</li>
<li>陈陈君</li>
<li>陈陈君</li>
`
}
});
</script>

v-on

使用 v-on 指令的 dom 可以绑定事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<input type="button" value="点我弹出提示框" v-on:click="tsk">
</div>
<script>
new Vue({
el: '#app',
methods:{
tsk:function(){
// 逻辑
alert('Hi');
}
}
});
</script>

在编写 v-on 事件时,vue 允许进行简写

1
2
v-on:click="tsk"
@click="tsk"
v-on 类型
click 单击事件
dblclick 双击事件

一个经典的计数器案例

1

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
<div id="app">
<button @click="add">+</button>
<span>{{ num }}</span>
<button @click="sub">-</button>
</div>
<script>
new Vue({
el: '#app',
data:{
num:1
},
methods:{
add:function(){
if(this.num == 10){
alert("最大啦,不能超过10");
}else{
this.num++;
}
},
sub:function(){
if(this.num == 0){
alert("不能再小啦")
}else{
this.num--;
}
}
}
});
</script>

v-show

2

使用 v-show 指令的 dom 可以进行隐藏和显示。并且支持表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<div v-show="isShow">balbalbalbalbalbalbalbal</div>
<input type="button" value="点我隐藏元素" @click="hide"></input>
<input type="button" value="点我显示元素" @click="show"></input>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow : true
},
methods: {
show:function(){
this.isShow = true
},
hide:function(){
this.isShow = false
}
}
});
</script>

3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="app">
<div v-show="x>3">balbalbalbalbalbalbalbal</div>
<input type="button" value="点我隐藏元素" @click="hide"></input>
<input type="button" value="点我显示元素" @click="show"></input>
</div>
<script>
new Vue({
el: '#app',
data: {
x : 1,
isShow : true
},
methods: {
show:function(){
this.x++;
this.isShow = true
},
hide:function(){
this.x--;
this.isShow = false
}
}
})
</script>

v-if

使用 v-if 指令的 dom 会根据布尔值进行隐藏和显示。并且支持表达式。
它与 v-show 的区别就是 v-if 会根据布尔值把 dom 元素移除或保留. 而 v-show 在只是添加了样式来控制,比如在隐藏元素时是添加 display: none; 样式来隐藏

1
2
<div v-if="true">可见元素</div>
<div v-if="false">不可见元素</div>

v-bind

v-bind 可以用来绑定图片资源 , 其中 :title 为标题(也就是鼠标经过时提示的信息) v-bind:src 除了这样写,也可以这样写::src

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<img v-bind:src="imgSrc">
<img :src="imgSrc">
</div>
<script>
new Vue({
el '#app',
data:{
imgSrc: "my.png'
}
});
</script>