Vue.js 模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
插值表达式
插值表达式是数据绑定最常见的形式就是使用 {{ }} 语法的文本插值，{{ }} 将会被替代为对应组件实例中 content property 的值。无论何时，绑定的组件实例上content property 发生了改变，插值处的内容都会更新。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue.js -- 模板语法</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!'
}
},
template: `<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
v-once
v-once 只渲染一次，当数据改变时，插值处的内容不会更新。
代码演示：
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!'
}
},
template:'<div v-once>{{content}}</div>'
})
const vm = app.mount('#root');
</script>
</body>
页面效果：
v-html
插值表达式会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML代码，需要使用 v-html。
==v-html 有XSS风险，会覆盖子组件==
使用插值表达式代码演示：
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: '<b>Hello Vue.js!</b>'
}
},
template:'<div>{{content}}</div>'
})
const vm = app.mount('#root');
</script>
</body>
页面效果：
使用v-html代码演示：
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: '<b>Hello Vue.js!</b>'
}
},
template:'<div v-html="content"></div>'
})
const vm = app.mount('#root');
</script>
</body>
页面效果：
v-bind
v-bind用于绑定数据和元素属性。
v-bind:title可以缩写成:title
代码演示：
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!'
}
},
template:'<div :title="content">{{content}}</div>'
})
const vm = app.mount('#root');
</script>
</body>
页面效果：
动态参数
代码演示：
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!',
name: 'title'
}
},
template:'<div :[name]="content">{{content}}</div>'
})
页面效果：
v-on
v-on用于绑定事件
v-on:click可以缩写成@click
代码演示：
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!',
event:'click'
}
},
methods:{
handleClick(){
alert('handlClick');
}
},
template:'<div @[event]="handleClick">{{content}}</div>'
})
页面效果：
修饰符
修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符对于触发的事件调用 event.preventDefault()；。
代码演示：
const app = Vue.createApp({
data(){
return {
content: 'Hello Vue.js!'
}
},
methods:{
handleClick(e){
// e.preventDefault();
}
},
template: `
<form action="https://cn.bing.com" @click.prevent="handleClick">
<button type="submit">提交</button>
</form>
`
})
页面效果：
点击提交无任何变化，跳转被阻止。
结语
本小节到此结束，谢谢大家的观看！
如有问题欢迎各位指正
