对于VUE对象,基本结构如下

  1. el 挂载点,用于挂载Vue实例
  2. data 用于存放数据
  3. methods 用于存放方法

以上三者最为常用,除此以外还有computed, watch, filters等;

1
2
3
4
5
6
7
8
9
10
11
//helloworld
<div id="app">
{{ message }}
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

el 属性又称挂载点,可认为是 element 的简写,创建一个 vue实例 得知道是在哪一块元素上创建 Vue实例 ,对哪一块视图进行操作。

在这里,我们创建了一个 Vue 实例,并将其在el中挂载到一个元素上。这里的挂载元素是 #app,其中和css中类似, #绑定的是id, .绑定的是class

data用于Vue 实例中的数据。在这个例子中,我们定义了一个 data 对象,其中包含一个 message 属性,其值为 ‘Hello Vue.js!’。

在模板中,我们使用双大括号语法表示数据绑定,使用来输出message属性的值。

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令-内容渲染指令</title>
</head>
<body>
<!-- vue 能够控制下面的 #app 这个 div -->
<div id="app">
<!--内容渲染指令-->
<p v-text="name">my name is ...</p>
<p>{{ gender }}</p>
<p v-html="info"></p>
</div>
</body>
<!--1. 引入 vue 的库文件,在 window 全局就有了 Vue 这个构造函数-->
<script src="../lib/vue-2.6.12.js"></script>
<!--2. 创建 vue 的实例对象-->
<script>
// 使用构造函数创造 viewmodel 实例对象
const vm = new Vue({
// 标识 vm 实例要控制页面上的哪个元素,‘’中填写选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
name: 'lucien',
gender: 'male',
info: '<h4 style="color: red"> 欢迎使用 vue...<h4>'
}
})
</script>
</html>

Vue基本命令

绑定,事件处理和渲染

绑定

Vue有两种数据绑定的方式:

  • 单向绑定(v-bind):数据只能从data流向页面。
  • 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。

另外

  • 双向绑定一般都应用在表单类元素上(如input等)
  • v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

简写

  1. v-bind
1
2
3
4
5
6
7
8
9
10
11
   <!-- 完整语法 -->
<a v-bind:href="url"></a>

<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>

<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>
  1. v-on
1
2
3
4
5
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>

<!-- 缩写 -->
<a @click="doSomething"></a>

使用

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>数据绑定</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 普通写法 -->
<!--
单向数据绑定:<input type="text" v-bind:value="name"><br/>
双向数据绑定:<input type="text" v-model:value="name"><br/>
-->

<!-- 简写 -->
单向数据绑定:<input type="text" :value="name"><br />
双向数据绑定:<input type="text" v-model="name"><br />

<!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上,即有value值的元素,因为其默认与value绑定 -->
<!-- <h2 v-model:x="name">你好啊</h2> -->
</div>
</body>

<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

new Vue({
el: '#root',
data: {
name: 'hkk'
}
})
</script>
</html>

事件处理

vm即Vue实例,这里的事件或者说行为是类似Click等用户行为触发的事件,事件处理就是Vue调用与该事件相关联的事件处理函数;

  1. 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上;
  3. methods中配置的函数,不要用箭头函数!否则this就不是vm,而是Window;
  4. methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象;
  5. @click=”demo” 和 @click=”demo($event)” 效果一致,但后者可以传参(demo是methods中的一个名为 demo 的方法);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<button @click="handleClick">点击我</button>
</template>

<script>
export default {
name: "MyComponent",
methods: {
handleClick(event) {
console.log("事件对象:", event);
console.log("事件类型:", event.type);
console.log("事件触发的元素:", event.target);
},
},
};
</script>

修饰符

exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

1
2
3
4
5
6
7
8
<!-- 即使 AltShift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符
.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

prevent:阻止默认事件(常用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data: {
user: {}
}
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault():
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>

methods: { onSubmit() {
if (this.user.username) { console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}

在默认情况下,表单提交会导致浏览器重新加载页面或者向服务器发送请求,我们可以阻止这种默认行为,在 v-on 指令后面添加 .prevent 修饰符。这告诉 Vue.js 在触发事件时调用 event.preventDefault() 方法来阻止默认行为。
在上面,当用户点击“保存”按钮时,onSubmit 方法会被调用。也就是“覆盖”了默认的提交方法。

条件渲染

v-if:条件指令,用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。表达式可以是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
var vue = new Vue({
"el":"#div0"
//#也就是id,.也就是class,这里和div0绑定
data:{
num:1
}
});
</script>
<body>
<div id="div0">
<div v-if="num%2==0" style="width:200px;heigth:200px;background-color:chartreuse;">
这里的v-if表示若偶数,则启用该标签,若不成立则该标签无效
</div>

假设我们正在开发一个电子商务网站,该网站允许用户筛选商品并按价格排序。我们可以使用 v-if 来渲染不同的商品列表,以响应用户的不同筛选条件。

例如,我们可以在页面上放置多个按钮,每个按钮都对应着一个不同的筛选条件。当用户点击某个按钮时,我们可以使用 v-if 来决定渲染哪个商品列表。

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
<div>
<button @click="sortByPrice">按价格排序</button>
<button @click="sortByRating">按评分排序</button>
<button @click="showAllProducts">显示全部商品</button>

<div v-if="sortBy === 'price'">
<h2>按价格排序的商品列表</h2>
<ul>
<li v-for="product in sortedProductsByPrice" :key="product.id">
{{ product.name }} - {{ product.price }}
</li>
</ul>
</div>

<div v-if="sortBy === 'rating'">
<h2>按评分排序的商品列表</h2>
<ul>
<li v-for="product in sortedProductsByRating" :key="product.id">
{{ product.name }} - {{ product.rating }}
</li>
</ul>
</div>

<div v-if="sortBy === 'all'">
<h2>所有商品列表</h2>
<ul>
<li v-for="product in products" :key="product.id">
{{ product.name }} - {{ product.price }}
</li>
</ul>
</div>
</div>
</template>

<script>
export default {
data() {
return {
products: [
{ id: 1, name: '商品A', price: 50, rating: 4.5 },
{ id: 2, name: '商品B', price: 80, rating: 3.8 },
{ id: 3, name: '商品C', price: 100, rating: 4.9 },
],
sortBy: 'all',
};
},
computed: {
sortedProductsByPrice() {
return this.products.slice().sort((a, b) => a.price - b.price);
},
sortedProductsByRating() {
return this.products.slice().sort((a, b) => b.rating - a.rating);
},
},
methods: {
sortByPrice() {
this.sortBy = 'price';
},
sortByRating() {
this.sortBy = 'rating';
},
showAllProducts() {
this.sortBy = 'all';
},
},
};
</script>

v-else:可以使用 v-else 为 v-if 添加一个“else 区块”。一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被识别。

1
2
3
4
<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else-if:
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用,和 v-else 类似,一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

1
2
3
4
5
6
7
8
9
10
11
12
13

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样:v-if类似,但是if的原理是若不成立,则整个div消失,而show只是让div的display属性修改为隐藏none,是通过样式改变的。

v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好。

列表渲染

v-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
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想获取索引,则使用index关键字,注意,圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
<!-- 2. 列表遍历-->>
data: { userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}

<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>

template

在 Vue.js 中,template 是 Vue.js 组件的一部分,它可以包含 HTML 元素、Vue.js 指令、Vue.js 表达式、Vue.js 组件等内容。通过在 template 中定义这些内容,我们可以构建出应用程序中的各种视图。

以下是一个简单的 Vue.js 组件示例,其中包含了一个 template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<div>
<h1>{{ greeting }}</h1>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
data() {
return {
greeting: 'Hello',
message: 'Welcome to my website!',
};
},
};
</script>

在这个示例中,我们定义了一个包含两个元素的 template,它们分别用于渲染一个标题和一个段落。通过使用 Vue.js 的双花括号语法,我们可以将 greeting 和 message 数据绑定到 HTML 元素中,从而实现动态渲染。或者说,通过template,我们能在vue文件中编写html。

组件

组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
使用components定义组件。

1
2
3
4
5
6
7
8
9
10
var app = new Vue({     el: '#app',
// 定义局部组件,这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})

使用

1
2
3
<div id="app">
<Navbar></Navbar>
</div>

全局组件

1
2
3
4
5
6
7
8
9
10
11
12
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>' })
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({ el: '#app'
})
</script>

路由

常用于点击菜单内容切换
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用,路由需要载入 vue-router 库

1
2
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- html部分 -->
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

<!-- vue部分 -->
<script>
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher } ]
// 3. 创建 router 实例,然后传 `routes` 配置 const router = new VueRouter({ routes
// (缩写)相当于 routes: routes })
// 4. 创建和挂载根实例。 // 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router })
// 现在,应用已经启动了!
</script>

axios

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
// 发送axios
var app = new Vue({ el: '#app', data: {
memberList: []//数组
}, created() {
this.getList()
},
methods: {
getList(id) { //vm = this
//向url发送了一个get请求,返回两个回调 成功/失败
axios.get('http://localhost:8081/admin/ucenter/member')
.then(response => {
console.log(response)
this.memberList = response.data.data.items
})
.catch(error => {
console.log(error)
})
}
}
})
// 显示
<div id="app">
<table border="1"> <tr>
<td>id</td>
<td>姓名</td>
</tr>
<tr v-for="item in memberList">
<td>{{item.memberId}}</td>
<td>{{item.nickname}}</td>
</td> </tr>
</table>
</div>

首先,我们使用 new Vue() 创建一个 Vue.js 实例,并将其绑定到网页中的一个元素(在本例中是 id 为 app 的 div 元素)。在 data 选项中,我们定义了一个空数组 memberList,它将用于存储从服务器获取的数据。

在 created 钩子函数中,我们调用了 getList 方法,它会向服务器发送一个 GET 请求,并使用 axios 库来处理这个请求。如果请求成功,axios 库会返回一个包含响应数据的对象,并触发 then 回调函数。在这个回调函数中,我们使用 response.data 属性来获取服务器返回的数据,并将它赋值给 memberList 数组。如果请求失败,axios 库会触发 catch 回调函数,在这个函数中我们简单地输出了错误信息。

在网页中,我们使用 Vue.js 的 v-for 指令来循环遍历 memberList 数组,并将每个元素显示在一个表格行中。使用双花括号语法,我们将 item 对象的 memberId 和 nickname 属性绑定到 HTML 元素中,从而实现动态渲染。