1.1 Mustache语法
{{}}: 插值表达式
通常用来获取Vue实例中定义的数据(data),属性节点中 不能够使用插值表达式。
el: 挂载点
类型: String | HTMLElement
定义 Vue实例挂载的元素节点,表示vue接管该区域。
1、Vue的作用范围是什么 ?
Vue会管理el选项命中的元素,及其内部元素。
2、el选择挂载点时,是否可以使用其他选择器 ?
可以,但是建议使用 ID选择器。
3、是否可以设置其他的DOM元素进行关联 ?
可以但是建议选择DIV, 不能使用HTML和Body标签。
data: 数据对象
- Vue中用到的数据定义在data中。
- data中可以写复杂类型。
- 渲染复杂类型数据的时候,遵守js语法。
methods: 方法
类型: {[key: string] : Function}
具体作用: 定义属于Vue的一些方法,可以在其他调用,也可以在指令中使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mustache语法</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>
<!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
<h3>{{firstName + ' ' + lastName}}</h3>
<h3>{{counter * 2}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!',
firstName: 'kobe',
lastName: 'bryant',
counter: '22'
}
})
</script>
</body>
</html>
执行结果
1.2 v-once指令
基本特点
该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)。
该指令表示元素和组件只渲染一次,不会随着数据的改变而改变。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-once</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>
<!--表示元素和组件只渲染一次,不会随着数据的改变而改变。-->
<h3 v-once>{{message}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!'
}
})
</script>
</body>
</html>
执行结果
1.3 v-html指令
基本特点
该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html指令</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3>{{message}}</h3>
<h3>{{url}}</h3>
<!--该指令后面往往会跟上一个string类型,会将string的html解析出来并且进行渲染-->
<h3 v-html="url"></h3>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello world!',
url: '<a href="https://www.bing.com">bing</a>'
}
})
</script>
</body>
</html>
执行结果
1.4 v-text指令
基本特点
都是用于将数据显示在界面中,v-text通常情况下,接受一个string类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text指令</title>
</head>
<body>
<div id="app">
<h3 v-text="message"></h3>
<h3>{{message}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊,Vue.js!!"
}
})
</script>
</body>
</html>
执行结果
1.5 v-pre指令
基本特点
v-pre用于跳过这个元素和它子元素的编译过程。
第一个元素中的内容会被编译解析出来对应的内容,第二个元素中会直接显示{{message}}。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre指令</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊,Vue.js!!"
}
})
</script>
</body>
</html>
执行结果
1.6 v-bind 指令
基本特点
作用:动态绑定属性
缩写::
预期:any (with argument) | Object (without argument)
参数:attrOrProp (optional)
1.6.1 v-bind的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind的基本使用</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--使用v-bind指令-->
<img v-bind:src="imageURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!--使用语法糖的用法-->
<img :src="imageURL" alt="">
<a :href="aHref">百度一下</a>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
imageURL: 'https://img11.360buyimg.com/mobilecms/' +
's350x250_jfs/t1/20559/1/1424/73138/5c125595E3cbaa3c8/' +
'74fc2f84e53a9c23.jpg!q90!cc_350x250.webp',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
执行结果
1.6.2 v-bind绑定class
对象语法
用法一:直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中 注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
代码示例
当数据为某个状态时,字体显示红色,当数据另一个状态时,字体显示黑色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定class(对象语法)</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->
<h3 class="title" :class="{active: isActive, line: isLine}">{{message}}</h3>
<!--定义一个getClasses()方法-->
<h3 class="title" :class="getClasses()">{{message}}</h3>
<!--绑定事件-->
<button @click="btnClick">按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js',
isActive: true,
isLine: true
},
methods: {
btnClick: function () {
this.isActive = !this.isActive
},
/*执行getClasses()方法*/
getClasses: function () {
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
</html>
执行结果
数组语法
数组语法的含义是:class后面跟的是一个数组。
用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三:和普通的类同时存在,并不冲突,注:会有title/active/line三个类。
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中,注:classes是一个计算属性。
<h2 class="title" :class="classes">Hello World</h2>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定class(数组语法)</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h3 class="title" :class="[active, line]">{{message}}</h3>
<h3 class="title" :class="getClasses()">{{message}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js',
active: 'kobe',
line: 'jmaes'
},
methods: {
getClasses: function () {
return [this.active, this.line]
}
}
})
</script>
</body>
</html>
执行结果
1.6.3 v-bind绑定style
对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型,对象的key是CSS属性名称,对象的value是具体赋的值,值可以来自于data中的属性。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定style(对象用法)</title>
<style>
.title {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<!--<h3 :style="{key(属性名): value(属性值)}">{{message}}</h3>-->
<h5 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h5>
<h5 :style="getStyles()">{{message}}</h5>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js!!!',
finalSize: 30,
finalColor: 'red',
},
// 方法调用
methods: {
getStyles: function () {
return {fontSize: this.finalSize + 'px', background: this.finalColor}
}
}
})
</script>
</body>
</html>
执行结果
数组语法
style后面跟的是一个数组类型,多个值以,分割即可。
<div v-bind:style="[baseStyles, overridingStyles]"></div>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind动态绑定style(数组用法)</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h5 :style="[baseStyle1,baseStyle2]">{{message}}</h5>
</div>
<script src="js/vue.js"></script>
<script>
// 创建对象
const app = new Vue({
// 挂载要管理的元素
el: '#app',
// 定义数据
data: {
message: 'hello Vue.js!!!',
baseStyle1:{backgroundColor: 'red'},
baseStyle2:{fontSize:'40px'},
}
})
</script>
</body>
</html>
执行结果