该属性决定了Vue对象挂载到哪个元素上。
Vue会管理el选项命中的元素以及其后代元素
可以,推荐选择ID选择器,唯一性
可以,除body、html之外其他的双标签都可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello vue.js!'
}
})
</script>
</body>
</html>
■ Vue中用到的数据定义在data中
■ data中可以定义复杂数据类型
■ 渲染复杂类型数据时,遵循js的语法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li>{{beauty.name}}</li>
<li>{{beauty.age}}</li>
<li>{{beauty.lover}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
new Vue ({
el: '#app',
data: {
message: 'hello vue.js',
beauty: {
name: 'zzy',
age: '18',
lover: 'lyf'
},
campus: ['丑鸭子','老鳄鱼','大狗勾']
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- vue列表 -->
<div id="app">
<ul>
<li v-for = "item in love">{{item}}</li>
</ul>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
love: ['l','y','f','l','o','v','e']
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数{{number}}</h2>
<!-- 触发事件后调用函数 -->
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
increment() {
this.number++;
},
decrement() {
this.number--;
}
}
})
</script>
</body>
</html>
mustache语法即双括号语法
mustache语法中不仅可以可以直接写变量,也可以写简单的表达式
详细请查询:https://www.cnblogs.com/happ0/p/8075562.html
■ 该指令后面不需要跟任何表达式
■ 该指令表示组件和元素只渲染一次,不会随着数据的改变而改变
<h2>{{message}}</h2>
<!-- v-once只在第一次显示,之后不会改变 -->
<h2 v-once>{{message}}</h2>
■ v-text指令的作用:设置标签的内容(textContent)
■ 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
下列代码展示:
1.添加文本内容的方式
2.v-text在标签中间添加的内容不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>你好啊{{message + '!'}}zzy</h2>
<h2 v-text="message + '!'">zzy</h2>
<h2 v-text="info + '!'">zzy</h2>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
new Vue ({
el: '#app',
data: {
message: 'hello vue.js!',
info: '前端我来惹!'
}
})
</script>
</body>
</html>
■ v-html指令的作用是:设置元素的innerHTML
■ 内容中有html结构会被解析为标签
v-html 与 v-text 区别:
1.不加html结构时显示相同
2.v-html会将html结构转换为指令,v-text不会转换
3.解析文本使用v-text,解析html结构用v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-html="message"></p>
<p v-text="message"></p>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: "百度"
}
})
</script>
</body>
</html>
将html标签里面的内容原封不动的显示出来,不做任何解析
<body>
<div id="app">
<h2 v-pre>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
url: '百度一下'
}
})
</script>
</body>
■ cloak“帐篷”,当mustache语法解析不成功时,隐藏标签内容
■ 加载之前cloak存在div中
■ 加载之后cloak不存在div中
■ 为元素绑定事件
■ 时间名不需要写 on
■ 指令可以简写为@
■ 绑定的方法定义在method属性中
■ 方法内部通过this关键字可以访问定义在data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<input type="button" value="v-on单击指令" v-on:click='dolt'>
<input type="button" value="v-on鼠标进入指令" v-on:mouseenter='dolt'>
<input type="button" value="v-on双击指令" v-on:dblclick='dolt'>
<input type="button" value="v-on双击简写" @dblclick='dolt'>
<h2 @click='changeFood'>{{food}}</h2>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
food: '西红柿炒蛋'
},
methods: {
dolt: function () {
alert('做it');
},
changeFood: function () {
// console.log(this.food);
this.food += 'delicious!\t';
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
width: 150px;
height: 30px;
margin: 100px auto;
border: 1px solid #777;
border-radius: 5px;
}
span {
/* display: block; */
text-align: center;
}
button {
width: 50px;
height: 30px;
font-size: 20px;
color: rgb(180, 57, 57);
}
button:first-child {
float: left;
}
button:nth-child(1) {
float: right;
}
</style>
</head>
<body>
<div id="app">
<button @click='lose'>-</button>
<span>{{number}}</span>
<button @click='add'>+</button>
</div>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script>
//点加号数字递增,点减号数字递减
var app = new Vue ({
el: '#app',
data: {
number: 1
},
methods: {
lose:function() {
if( this.number == 0) {
alert('不能再减啦');
}else {
this.number--;
}
},
add:function() {
if( this.number == 10) {
alert('不能再加啦');
}else {
this.number++;
}
}
}
})
</script>
</body>
</html>
<body>
<div id="app">
<a v-bind:href="message">百度一下</a>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "https://www.baidu.com/"
}
})
</script>
</body>
绑定对象:对象语法
■ 对象语法的含义:class后面跟的是一个对象
动态语法有几种用法,如以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>
<!-- v-bind语法糖 -->
<!-- 用法一:直接通过{}绑定一个类 -->
<h2 :class="{'active': isActive}"></h2>
<!-- 用法二:可以通过判断,传入多个值 -->
<h2 :class="{'active': isActive,'line': isLine}">{{message}}</h2>
<!-- 用法三:和普通的类同时存在,不冲突 -->
<h2 class="text" :class="{'active': isActive,'line': isLine}"></h2>
<!-- 用法四:如果过于复杂,可以放在methods和conputed中 注:classes是一个计算属性-->
<h2 class="text" :class="classes">hello</h2>
<div v-on:click="btnClick">按钮</div>
</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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 class="title" v-bind:class='[active, line]'></h2>
<h2 class="title" :class='getClasses()'></h2>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
active: 'aaaa',
line: 'bbbb'
},
methods: {
getClasses: function() {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
■ 利用v-bind:style绑定样式
■ 写属性名有两种,如font-size:
1.驼峰命名法: fontSize
2.短横线分隔:‘font-size’
:style="{key(属性名):value(属性值)}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-bind动态绑定style(对象语法) -->
<!-- 12px不加单引号会报错,vue直接将他解析为变量,加上单引号解析为字符串再赋值给属性 -->
<!-- <h2 :style="{fontSize: '12px'}">{{message}}</h2> -->
<!-- 方法一: -->
<h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
<!-- 方法二: -->
<h2 :style="{getStyles()}">{{message}}</h2>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'enheng',
finalSize: 50,
finalColor: 'red'
},
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px',color: this.finalColor}
}
}
})
</script>
</body>
</html>
:style="[数组元素1,数组元素2]"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 数组语法 -->
<!-- <h2 :style="[数组元素1,数组元素2]">{{message}}</h2> -->
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hh',
baseStyle: {backgroundColor: 'pink'},
baseStyle1: {fontSize: '50px'}
}
})
</script>
</body>
</html>
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。
不经过计算属性,我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。
然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。
这就意味着只要 message 没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
字符串拼接形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: 'ziyi',
lastName: 'lv'
},
methods: {
getFullName: function() {
return this.firstName + ' ' + this.lastName
}
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
数组形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: 100, name: 'JavaScript', price: 119 },
{ id: 101, name: 'HTML', price: 118 },
{ id: 102, name: 'CSS', price: 117 },
{ id: 103, name: 'Vue.js', price: 116 }
]
},
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>
每个计算属性都包含一个getter和一个setter
正常情况下,我们只是使用getter来读取。
在某些情况下,你也可以提供一个setter方法(几乎不用)。
在需要写setter的情况下,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: 'zzy',
lastName: 'beauty'
},
computed: {
fullName: {
// 计算属性一般没有set,称为只读属性
set: function(newValue) {
// 当通过console给属性赋值时,会调用set方法
// console.log('.....',newValue);
const names = fullName.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function() {
return this.firstName + ' ' + this.lastName
}
}
// 下列为简写的只读属性,省略了get
// fullName: function() {
// return this.firstName + ' ' + this.lastName
// }
}
})
</script>
</body>
</html>
计算属性在运行时会进行缓存,调用一次后会自动调用缓存,而不是重新加载
methods会反复加载,不进行缓存
注:不改变属性值的情况下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'zzy',
lastName: 'girl'
},
methods: {
getfullName: function() {
console.log('getfullName');
return this.firstName + ' ' + this.lastName
}
},
computed:{
fullName: function() {
console.log('fullName');
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
针对于其他块定义来说是没有作用域的,比如if/for等,这在我们开发中往往会引起一些问题。
if和for没有作用域,变量可以覆盖
闭包可以解决变量覆盖:函数是一个作用域
const主要作用是将某个变量修饰为常量,const修饰的标识符为常量,不可再次赋值
使用const的情况:当标识符不会再被赋值时,就可以使用const来保证数据的安全性
建议:在ES6开发中,优先使用const,只有需要改变某个标识符时才使用let
常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
字面量:就是直观的写法
const obj = new Object()
const obj = {} 这里的{}就是字面量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
})
// 1.属性的增强写法
const name = 'zzy';
const age = 18;
const sex = 'girl';
// ES5的写法
// const obj = {
// name: name,
// age: age,
// sex: sex
// }
// ES6写法
// const obj = {
// name,
// age,
// sex
// }
// console.log(obj);
// 2.函数的增强写法
// ES5写法
// const obj = {
// run: function() {
// },
// eat: function() {
// }
// }
// ES6写法
const obj = {
run() {
},
eat() {
}
}
</script>
</body>
</html>