Introduction to Vue.js
What is Vue.js
Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是 Vue 被设计为可以自底向上逐层应用。
Vue.js 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与
现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/v2/guide/
Why Use Vue.js?
- 声明式渲染:前后端分离是未来趋势。
- 渐进式框架:适用于各种业务需求。
- 简单易学:中文文档,易于理解和学习。
Basic Knowledge
使用 Vue.js
在 html 页面使用 script 引入 vue.js 的库即可使用:
- 远程CDN:
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
- 本地:
<script src="js/vue.min.js"></script>
Vue-CLI
脚手架:使用 vue.js 官方提供的 CLI 脚本架可以方便地去创建 vue.js 工程雏形。
入门程序
创建一个 vue_test
目录,并且在目录下创建 01_vue入门程序.html
文件。
- 定义 html,引入 vue.js
- 定义 app div,此区域作为 vue.js 的接管区域
- 定义 Vue.js 实例,接管 app 区域。
- 定义 model(数据对象)
- 在 app 中展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 引入 vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<script src="js/vue.min.js"></script>
</head>
<body>
<!-- 创建 id 为 app 的 div -->
<div id="app">{
{name}}</div>
</body>
<script>
// 创建 vue 实例
var VM = new Vue({
el: "#app",
data: {
name: "Hello Vue",
},
});
</script>
</html>
{
{}}
插值表达式:通常用来获取 Vue.js 实例中定义的数据(data);属性节点中不能够使用插值表达式。
el
挂载点:定义 Vue.js 实例挂载的元素节点,表示 vue.js 接管该区域。
Vue 的作用范围 :Vue 会管理 el 选项中的元素及其内部元素。
选择挂载点时,可以使用其他选择器,但是建议使用 ID 选择器。
挂载点可以设置其他的 DOM 元素进行关联,但是建议选择 DIV,不能使用 HTML 和 Body 标签。
data
数据对象:Vue 中用到的数据定义在 data 中;data 中可以写复杂类型;渲染复杂类型数据的时候遵守 js 语法。
<body>
<!-- 创建 id 为 app 的 div -->
<div id="app">
{
{name}} <br>
{
{school.name}} {
{school.number}} <br>
<ul>
<li>{
{names[0]}}</li>
<li>{
{names[1]}}</li>
<li>{
{names[2]}}</li>
</ul>
</div>
</body>
<script>
// 创建 vue 实例
var VM = new Vue({
el: "#app",
data: {
name: "Hello Vue",
// 对象类型
school: {
name: "学校名称",
number: "100000"
},
// 数组类型
names: ["张人大", "刘小明", "赵小红"]
},
});
</script>
声明式渲染的好处
Vue 中的声明式渲染,简单理解就是 Vue 将声明的数据渲染到 HTML。
<body>
<div id="app">
<h2>{
{name}}</h2>
</div>
</body>
<!-- <script src="js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$("#app").append("<h2>Hello World</h2>")
});
</script> -->
<script src="js/vue.min.js"></script>
<script>
var VM = new new Vue({
el: "#app",
data: {
name: "Hello World!!",
},
});
</script>
Vue 常用指令
Vue 指令是带有 v-
前缀的特殊属性;通过指令来操作 DOM 元素 。
v-text 指令
作用:获取 data 数据,设置标签的内容。
注意:默认写法会替换全部内容,使用插值表达式 {
{}}
可以替换指定内容。
<body>
<div id="app">
<h2>{
{message}}高级</h2>
<!-- v-text 获取 data 数据,设置标签的内容,会覆盖标签里的内容体-->
<h2 v-text="message">高级</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new new Vue({
el: "#app",
data: {
message: "Java程序员"
}
});
</script>
v-html 指令
作用: 设置元素的 innerHTML
(可以向元素中写入新的标签)
<body>
<div id="app">
<!-- 获取普通文本 -->
<h2>{
{message}}</h2>
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 设置元素的 innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new new Vue({
el: "#app",
data: {
message: "Java程序员",
url: "<a href='https://www.baidu.com'>百度一下</a>"
}
});
</script>
v-on 指令
作用:为元素绑定事件, 比如: v-on:click
可以简写为 @click="方法"
绑定的方法定义在 VUE 实例的 method 属性中
<body>
<div id="app">
<!-- 使用 v-on 绑定 click 点击事件 -->
<input type="button" value="Button" v-on:click="methodName">
<!-- 使用 @ 符号也可以绑定-->
<input type="button" value="Button" @click="methodName">
<!-- 双击事件 -->
<input type="button" value="双击击按钮" @dblclick="show">
<!-- 绑定点击事件 -->
<h2 @click="changeName">{
{food}}</h2>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new new Vue({
el: "#app",
data: {
food: "Turkey"
},
// 通过 methods,专门存放 Vue 中的方法
methods: {
methodName: function() {
alert("提醒!");
},
show: function() {
alert("Double Click");
},
changeName: function() {
console.log(this.food);
// 在 VUE 中不需要考虑如何更改 DOM 元素,
// 重点放在数据更新之后,使用数据的那个元素会同步更新
this.food+=" Delicious!";
}
}
});
</script>
v-on 指令补充
传递自定义参数:函数调用传参
事件修饰符:对事件触发的方式进行限制
<body>
<div id="app">
<!-- 函数传参 -->
<input
type="button"
value="礼物刷起来"
@click="showTime(111, 'test111')"
/>
<!-- 事件修饰符指定哪些方式可以触发事件 -->
<input type="text" @keyup.enter="hiFunction" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
},
methods: {
showTime: function (p1, p2) {
console.log(p1);
console.log(p2);
},
hiFunction: function () {
alert("How are you");
},
},
});
</script>
- 事件绑定方法,可以传入自定义参数
- 定义方法时,需要定义形参来接收实际的参数
- 事件的后面跟上
.修饰符
可以对事件进行限制 .enter
可以限制触发的按键为回车- 事件修饰符有许多,使用时可以查询文档
计数器案例
data
中定义数据:比如num
值为1
methods
中添加两个方法:比如add
(递增),sub
(递减)- 使用
{ {}}
将num
设置给span
标签 - 使用
v-on
将add
、sub
分别绑定给加、减按钮 - 累加到
10
停止 - 递减到
0
停止
<body>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" value="+" v-on:click=