Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 作为 JavaScript 框架在国内非常火热，如常见的 微信小程序、UniApp、鸿蒙的App应用开发等、都有 Vue.js 的身影。
安装 Vue.js 命令行
安装 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应用
使用 webpack 构建 Vue 应用（可选）
安装依赖
c d 进Vue项目使用命令安装依赖
1
| npm install 或 cnpm install
|
运行项目
运行基于 webpack构建的 Vue 应用（可选）
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
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
使用 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>
|
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>
|