目录
一、Vue基础
Vue简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
- Javascript框架
- 简化Dom操作
- 响应式数据驱动
Vue.js
Vue使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',//用于挂载要管理的元素
data: {//定义数据
message: '你好啊,白鹿为霜!'
}
})
</script>
</body>
</html>
Vue响应式
修改数据后页面自动刷新
数据列表显示
v-for用于遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊,白鹿为霜!',
movies: ['七月与安生','肖申克的救赎','大话西游','盗梦空间']
}
})
</script>
</body>
</html>
案例:计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数: {{counter}}</h2>
<!--
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function(){
console.log('add执行');
this.counter++;
},
sub: function(){
console.log('sub执行');
this.counter--;
}
}
})
</script>
</body>
</html>
Vue中的MVVM
Model-View-ViewModel
View层:
- 视图层
- 在我们前端开发中,通常就是DOM层
- 主要作用是给用户展示各种信息
Model层:
- 数据层
- 数据可能是固定的死数据,更多的是来自服务器,从网络上请求下来的数据
VueModel层:
- 视图模型层
- 视图模型层是Data Binding,也就是数据绑定,将Model的改变实时反映到View中
- 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生了一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data
Vue的options选项
目前掌握这些选项:
- el:
类型:string|HTMLElement
作用:决定Vue实例管理那个DOM
- data:
类型:Object|Function(组件当中的data必须是函数)
作用:Vue实例对应的数据对象
- methods:
类型:{[key:string]:Function}
作用:定义Vue的一些方法,可以在其他地方调用,也可以在指令中使用
Vue的周期函数
二、Vue基本语法
插值操作-其他指令使用
mustache语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},白鹿为霜</h2>
<!--mustache语法中,不仅可以直接写变量,也可写简单的表达式-->
<h2>{{firstname + lastname}}</h2>
<h2>{{firstname + ' ' + lastname}}</h2>
<h2>{{firstname}} {{lastname}}</h2>
<h2>{{counter}}</h2>
<h2>{{counter * 2}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
firstname: 'xie',
lastname: 'xinxia',
counter: 100
}
})
</script>
</body>
</html>
v-once
该指令表示元素和组件只渲染一次,不会随数据改变而改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',}
})
</script>
</body>
</html>
v-html
以html的格式解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
v-text
类似于mustache
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}},xxx</h2>
<!--会被后面内容覆盖,更倾向使用mustache-->
<h2 v-text="message">,xxx</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
</html>
v-pre
不做解析显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
}
})
</script>
</body>
</html>
v-cloak
cloak:斗篷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--在vue解析之前,div中有一个属性v-cloak 解析之后,没有-->
<div id="app" v-cloak>
<h2>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
}
})
</script>
</body>
</html>
绑定属性
v-bind 动态绑定属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="mm">
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E5%A3%81%E7%BA%B8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&hd=undefined&latest=undefined©right=undefined&cs=4076493291,331486562&os=2930963262,531608254&simid=3400838867,377633000&pn=0&rn=1&di=78870&ln=2078&fr=&fmq=1526269427171_R&fm=&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fuploads.5068.com%252Fallimg%252F1712%252F144-1G209191R5.jpg%26refer%3Dhttp%253A%252F%252Fuploads.5068.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1636096525%26t%3Dc22525defd81066e0a4d1e28ddde5056&rpstart=0&rpnum=0&adpicid=0&nojc=undefined'
}
})
</script>
</body>
</html>
v-bind语法糖
<img :src="imgURL" alt="mm">
动态绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: aqua;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 :class="active">{{message}}</h2>
<!--<h2 v-bind:class="{类名1: true,类名2: boolean}">{{message}}</h2>>-->
<!--修改布尔值判断类是否加进去-->
<h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
isActive: 'true',
isLine: 'true'
},
methods: {
btnClick: function() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
v-bind绑定style
利用v-bind动态绑定css样式
- 对象语法
- 数组语法
对象语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->
<!--属性值加单引号,vue会作为变量解析-->
<h2 :style="{fontSize: '50px' }">{{message}}</h2>
<!--动态绑定-->
<h2 :style="{fontSize: finalSize + 'px' ,color: finalColor}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
message:'hello',
finalSize: 100 ,
finalColor: 'pink'
},
methods: {
getStyle: function() {
return {fontSise: this.finalSize + 'px' ,backgroundColor: this.finalColor}
}
}
})
</script>
</body>
</html>
数组语法
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
data:{
message:'hello',
baseStyle: {backgroundColor: 'yellow'},
baseStyle1: {fontSize: '100px'}
},
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<!--计算属性不需要加括号-->
<h2>{{fullName}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
firstName: 'Lebron',
lastName: 'James'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>总价格: {{totalPrice}}</h2>
</div>
<script src='../js/vue.js'>
</script>
<script>
const app=new Vue({
el:'#app',
data:{
books: [
{id: 110, name: 'Unix编程技术 ', price: 119},
{id: 111, name: '代码大全 ', price: 109},
{id: 112, name: '深入理解计算机原理 ', price: 98},
{id: 113, name: '现代操作系统 ', price: 122}
]
},
computed: {
totalPrice: function () {
let result = 0;
for (let i=0; i<this.books.length; i++){
result += this.books[i].price
}
return result
}
}
})
</script>
</body>
</html>