第一阶段B（前端框架）11天 64学时
第6章 VUE基础（12）
[学习课时] 本章共需要学习 18 课时
[目的要求]
- 掌握VUE安装和基本使用
- 掌握VUE条件渲染
- 掌握VUE列表渲染
[教学内容]
VUE介绍
- 简介
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。
- Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- 兼容
- Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。
- Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
- 下载
- 开发版：（包含完整的警告和调试模式）【https://vuejs.org/js/vue.js】
- 生产版：（删除了警告，23.55kb min+gzip）【https://vuejs.org/js/vue.min.js】
- 引入
- 开始使用
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
案例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: '你好呀，这是vue绑定的数据!'
}
})
</script>
</html>
效果图
VUE基础语法（实例）
- 创建new Vue
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
|
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
- 静态数据data
参数类型：Object | Function，组件的定义只接受 function
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
案例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
从vue传过来的数据是：<b>{{ a }}</b>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a: 1
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
</script>
</html>
效果图
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性不会起作用
- 挂载到目标元素el
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
案例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
从vue传过来的数据是：<b>{{ a }}</b>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a: 1
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
- 动态数据computed
参数类型：
{ [key: string]: Function | { get: Function, set: Function } }
和data一样，向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
不同的是computed允许动态属性计算，所以一般都是用方法。
案例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
从vue传过来的静态数据是：<b>{{ a }}</b>
从vue传过来的动态数据是：<b>{{ computedText }}</b>
</div>
</body>
<script type="text/javascript">
// 静态数据对象
var data = {
a: 1
}
// 动态数据对象
var computed= {
computedText:function(){
var number = 456;
return number+=10;
}
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el:'#app',
data: data,
computed:computed
})
</script>
</html>
效果图
- 输出v-text、v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。类似v-text
为了输出真正的 HTML，需要使用 v-html 指令：
案例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
从vue传过来的数据是：<b>{{ a }}</b>
<br/>
｛｛｝｝类似与使用v-text绑定的：<b v-text="a"></b>
<br/>
使用v-html绑定的可以识别html标签：<span v-html="a"></span>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a: '<span style="color: red;">132456</span>'
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
- 属性值绑定v-bind:
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：如：v-bind:id、v-bind:class、v-bind:src、v-bind:align等
语法：v-bind:attribute
案例：demo06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#myid{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--这样的写法不起作用-->
<div id="{{id}}">相当于innertext设置文本</div>
<!--这样的写法才是正确的-->
<div v-bind:id="id">相当于setAttribute方法设置id属性值</div>
<!--简写-->
<div :id="id">相当于setAttribute方法设置id属性值</div>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
id: 'myid'
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
- 事件绑定v-on:
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
语法：v-on:event.修饰符
修饰符：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
案例：demo07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="doClick('按钮已经被点击')">点击事件</button>
<input type="text" @keyup="doKeyup"/>
<span>{{showtext}}</span><span>{{inputcount}}</span>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
showtext:'',
inputcount:0
}
// 事件对象
var methods = {
//event：被触发的事件对象
doClick:function(me) {
//this：当前Vue对象
this.showtext = '字数:';
event.target.innerText = me;
},
doKeyup:function(){
data.inputcount = event.target.value.length;
}
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data,
// 在 `methods` 对象中定义方法
methods: methods,
})
</script>
</html>
效果图
- 表单元素上双向数据绑定v-model
可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
案例：demo08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputcount"/>
<span>字数：</span><span>{{inputcount}}</span>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
inputcount:''
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
- 条件渲染v-if
v-if结构
案例：demo09
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-if="a">a=true 的时候</div>
<div >参考的元素</div>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a:true
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
v-else结构
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识
案例：demo10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-if="a">a=true 的时候</div>
<div v-else="a">a=false 的时候</div>
<div >参考的元素</div>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a:false
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
v-else-if
案例：demo11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-if="a == 1">a=1 的时候</div>
<div v-else-if="a == 2">a=2 的时候</div>
<div v-else="a == 3">a=3 的时候</div>
<div >参考的元素</div>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
a:2
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app',//将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
- 列表渲染v-for
用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
案例：demo12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--循环普通数组-->
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<!--循环普通数组，带下标索引-->
<ul>
<li v-for="(item, index) in items">
{{ item.message }}:下标索引{{index}}
</li>
</ul>
<!--循环对象属性，带下标索引和键名-->
<ol>
<li v-for="(value,key,index) in objects">
<b>{{key}}</b> : {{value}} : {{index}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
// 数据对象
var data = {
items: [{
message: '列表1'
},
{
message: '列表2'
}
],
objects:{
name:'张三',
pswd:'123456',
sex:'男'
}
}
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
el: '#app', //将数据挂载到id=app的元素上
data: data
})
</script>
</html>
效果图
[作业实验]
- 实现如下新闻展示效果
- HTML+CSS+JS精细化教程（新）适合学习和巩固基础（必掌握技能）
- JAVA语言（面向对象都不是事，重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统）
- JAVA WEB（MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等）
- Spring Boot2（新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码）
- Python（小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具）
- Photoshop（CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集）
- Unity2D/3D（手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做）
- Android原生开发（大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发）
- IOS原生开发（各种收费应用、游戏开发、工具开发、物联网开发）
- PHP（HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis）