Vue模板语法-文本渲染
指令 是带有 v- 前缀的特殊 attribute。指令 的属性值预期是单个 JavaScript 表达式
{{ }} 语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
msg: '你好Vue3'
}
}
})
const vm = app.mount('#app')
</script>
</body>
</html>{{ }} 中的表达式
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ count + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ msg.split('').reverse().join('') }
每个绑定都只能包含单个表达式，所以下面的例子都不会生效}
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
文本渲染 v-text指令
指令是带有 v- 前缀的特殊属性。
<div v-text="msg"> {{msg}}</div>
文本渲染html
为了输出真正的 HTML，你需要使用v-html
<div v-html="raw"></div>
<div v-text="raw"></div>
<div >{{raw}}</div>
Vue模板语法-属性渲染
指令是带有 v- 前缀的特殊 attribute。指令 属性值预期是单个 JavaScript 表达式
一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：
<div v-bind:title="title"> 学前端，薪资就是高</div>
我们可以使用v-bind指令给html标签动态的绑定属性
<button v-bind:disabled="canUse">按钮</button>
属性渲染简写
<button :disabled="canUse">按钮</button>
<div :title="title"> 学前端，薪资就是高</div>