一、快速入门
<div id="app">{
{message}}<!-- mastache语法-->
<h1>{
{name}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
//let(变量)/const(常量)
const app = new Vue({
el: '#app', //用于挂载要管理的元素
data: {
//定义数据
message: '你好啊，张三！',
name: 'coderwhy'
}
})
</script>
二、插值操作
2.1 Mustache语法
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{message}}李银河</h2>
<h2>{
{firstName + lastName}}</h2>
<h2>{
{firstName +' '+ lastName}}</h2>
<h2>{
{firstName}} {
{lastName}}</h2>
<h2>{
{counter*2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
firstName: 'kobe',
lastName: 'bryant',
counter: 100
}
})
</script>
2.2 v-once指令
v-once修饰的标签中的值不会随数据的改变而改变
<div id="app">
<h2>{
{message}}</h2>
<h2 v-once>{
{message}}</h2> <!-- v-once 不会随数据的改变而改变-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
2.3 v-html指令
v-html指令将值当作html文本值进行解析
<div id="app">
<h2 v-html='url'></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
url: '<a href = "http://www.baidu.com">百度一下</a>'
}
})
</script>
2.4 v-text指令
v-text指令将会替换标签中原来的内容
<div id="app">
<h2>{
{message}}中国</h2>
<h2 v-text="message">中国</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
</script>
2.5 v-pre指令
v-pre指令将不会解析标签中Mustache语法的内容
<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: '你好呀！'
}
})
</script>
2.6 v-cloak指令
v-cloak指令将会使得标签被vue解析之前存在属性v-cloak，在vue解析后将v-cloak属性取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>{
{message}}</div>
<script src="../js/vue.js"></script>
<script>
//在vue解析之前，div中有一个属性v-cloak
//在vue解析之后，div中没有一个属性v-cloak
setTimeout(function(argument) {
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
}
})
},1000)
</script>
</body>
</html>
三、动态绑定属性
3.1 基本使用
<div id="app">
<img v-bind:src="imgURL">
<!-- 语法糖 -->
<a :href="ahURL">名称</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
imgURL: 'https://img10.360buyimg.com/babel/s1180x940_jfs/t1/157976/16/4650/195470/600aa81eE1a8c75b4/9860931da02b8169.jpg.webp',
ahURL: 'http://www.baidu.com'
}
})
</script>
3.2 动态绑定class
3.2.1对象语法
<div id="app">
<!-- <h2 :class="style">{
{message}}</h2> -->
<!-- <h2 v-bind:class="{key1:value1,key2:value2}">{
{message}}</h2> -->
<!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{
{message}}</h2> -->
<h2 class="title" v-bind:class="getClasses()">{
{message}}</h2>
<button v-on:click="alter">变</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
style: 'active',
isActive: true,
isLine: true
},
methods: {
alter: function() {
this.isActive = !this.isActive;
},
getClasses:function () {
return {
active:this.isActive,line:this.isLine}
}
}
})
</script>
3.2.2 数组语法
<div id="app">
<!-- <h2 class="title" :class="['active','line']">{
{message}}</h2> -->
<!-- 不加''是变量-->
<!-- <h2 class="title" :class="[active,line]">{
{message}}</h2> -->
<h2 class="title" :class="getClasses()">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
active: 'activeName',
line: 'lineName'
},
methods:{
getClasses:function () {
return [this.active,this.line];
}
}
})
</script>
3.3 动态绑定style
3.3.1 对象语法
<div id="app">
<!-- <h2 v-bind:style="{key(属性名):value(属性值),key:value}">{
{message}}</h2> -->
<h2 v-bind:style="{
fontSize:finalFontSize+'px',color:finalFontColor}">{
{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
finalFontSize: 100,
finalFontColor:'red',
}
})
</script>
3.3.2 数组语法
<div id="app">
<!-- 对象数组-->
<h1 v-bind:style="[style]">
{
{message}}
</h1>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！',
style: {
backgroundColor: 'red', Color: 'black' },
}
})
</script>
上面动态绑定style的对象语法与数组语法本质相同，可能均为对象语法。
3.4 作业
当前有4部电影，初始情况下第一部电影名字体为红色，当点击其他一部电影时，原电影得红色字体颜色变为黑色，现在被点击的电影的字体颜色变为红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.active {
color: red;
}
</style>
<body>
<div id="app">
<ul>
<li v-on:click="setActive(index)" v-bind:class="getActive(index)" v-for="(item,index) in movies">{
{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['海王', '海尔兄弟', '进击的巨人', '火隐忍者', '喜洋洋'],
actives: [],
lastIndex: 0,
},
methods: {
initActivies: function() {
for (var i = 0; i < this.movies.length; i++) {
if (i == 0) {
this.actives.push(true);
continue;
}
this.actives.push(false);
}
},
getActive: function(index) {
if (this.actives.length == 0) {
this.initActivies();
}
return {
active: this.actives[index] }
},
setActive: function(index) {
//修改数组指定位置的值
Vue.set(this.actives, this.lastIndex, false);
Vue.set(this.actives, index, true);
this.lastIndex = index;
}
}
})
</script>
</body>
</html>
四、计算属性
4.1基本使用
类似于方法，但是一般只是用来获取值（也可以设置值），其性能较方法而言高，应为它只执行一次
<div id="app">
<h3>{
{firstName+' '+lastName}}</h3>
<h3>{
{firstName}} {
{lastName}}</h3>
<h3>{
{getFullName()}}</h3>
<h3>{
{fullName}}</h3>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lebron',
lastName: 'James'
},
methods: {
getFullName: function() {
return this.firstName + ' ' + this.lastName;
}
},
//计算属性 不能加()
computed: {
fullName:function () {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
4.2 案例
计算所有书的总价格
<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: '计算机组成原理', price: 119 },
{
id: 112, name: '操作系统', price: 125 },
{
id: 115, name: '数据结构', price: 113 },
{
id: 119, name: '计算机网路', price: 189 },
]
},
computed: {
totalPrice: function() {
let result = 0;
// for (let i = this.books.length - 1; i >= 0; i--) {
// result += this.books[i].price;
// }
//for each写法
for (let book of this.books) {
result += book.price;
}
return result;
}
}
})
</script>
4.3 计算属性的本质
<div id="app">{
{fullName}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
// fullName: function() {
// return this.firstName + ' ' + this.lastName;
// }
fullName: {
set: function() {
},
get: function() {
return this.firstName + ' - ' + this.lastName;
}
}
}
})
</script>
4.4 计算属性与方法的对比
计算属性的调用不能加()，但是方法得加()，该情况仅限于{ {}}语法
<div id="app">
<h2>{
{getFullName()}}</h2>
<!-- <h2>{
{getFullName}}</h2> -->
<!-- <h2>{
{fullName()}}</h2> -->
<h2>{
{fullName}}</h2>
<hr>
<h2>{
{getFullName()}}</h2>
<h2>{
{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
methods: {
getFullName: function() {
console.log('getFullName...');
return this.firstName + ' ' + this.lastName;
}
},
computed: {
// 只调用一次
fullName: function() {
console.log('fullName...');
return this.firstName + ' ' + this.lastName;
}
}
})
</script>