文章目录
3、常用模板语法
官方文档
时间:2021年06月15日 15时58分15秒
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应性系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染 (render) 函数,使用可选的 JSX 语法。
两种方式:
- 开发者编写模板——Vue将模板编译成虚拟 DOM 渲染函数——Vue计算需要渲染的组件并进行DOM操作;
- 开发者直接编写渲染(render)函数——Vue计算需要渲染的组件并进行DOM操作;
简单插值语法
数据绑定最常见的形式就是使用“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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: 'Hello World!'
}
},
// {{content}}这是一个插值表达式,vue 会将 data 函数里面返回的 content 的值插入到 div 标签内
template: `<div>{{content}}</div>`
}).mount('#root');
</script>
</html>
运行结果
插值语法内使用表达式
插值语法之内不仅可以写简单的文本,也可以写 js 表达式;
也可以将再 methods 中自定义的函数的返回值作为插入的值;
<!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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: 'Hello World!',
title: "标题"
}
},
// 插值语法里面也可以写 js 表达式,vue 将表达式执行的结果插入到 div 标签之内
template: `<div>{{Math.max(100,200) + content}}</div>`
}).mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: 'Hello World!'
}
},
methods:{
get(){
return "测试内容";
}
},
// 注意这里使用的自定义函数必须带上括号 `get()` ,否则插值的内容会是“function () { [native code] }”
template: `<div>{{get()}}</div>`
}).mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: '<strong>Hello World!</strong>'
}
},
// 使用 v-html 指令渲染 html 代码,vue 会将 content 的内容作为 html 标签放入 div 标签进行渲染
template: `<div v-html="content"></div>`
}).mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
Vue.createApp({
data() {
return {
content: 'Hello World!',
title: '标题'
}
},
template: `<div v-bind:title="title">{{content}}</div>`
}).mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!'
}
},
// 只渲染第一次的内容,后续的改变不再动态变化
template: `<div v-once>{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
使用v-if指令控制标签的加载与否
<!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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!',
show: true
}
},
// 直接控制是否渲染当前标签
template: `<div v-if="show">{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</html>
show为true运行结果
show为false运行结果
使用v-on指令进行事件绑定
<!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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!'
}
},
methods:{
handleClick(){
alert("点击了");
}
},
// `v-on:事件名`
template: `<div v-on:click="handleClick">{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
简写
v-on简写成@,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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!',
title: 'title'
}
},
methods:{
handleClick(){
alert("点击了");
}
},
// v-on -> @
// v-bind -> :
template: `<div @click="handleClick" :title="title">{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!',
name: 'title',
title: '标题'
}
},
methods:{
handleClick(){
alert("点击了");
}
},
// 使用[]绑定属性名
template: `<div @click="handleClick" :[name]="title">{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
content: 'Hello World!',
name: 'title',
title: '标题',
event: 'click'
}
},
methods:{
handleClick(){
alert("点击了");
}
},
// 使用[]绑定时间名
template: `<div @[event]="handleClick" :[name]="title">{{content}}</div>`
});
const vm = app.mount('#root');
</script>
</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>常用模板语法</title>
<!-- 引入Vue库 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
}
},
methods:{
handleClick(){
alert("点击了");
}
},
// 使用事件修饰符阻止事件的默认行为
template: `
<form action="https://www.baidu.com/" @click.prevent="handleClick" >
<button type="submit">提交</button>
</form>`
});
const vm = app.mount('#root');
</script>
</html>