Vue模板语法
模板语法
Vue中的模板语法有两大类：插值语法与指令语法
插值语法
功能：用于解析标签体中的内容
写法：{{x}}，x是js表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>插值语法</h1>
<h3>{{firstName}}</h3>
<h3>{{firstName + ' ' +lastName}}</h3>
<!-- 注意看：{{}}里的都是js的表达式 -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止生产提示。
new Vue({
el:'#root',
data:{
firstName: 'Kobe',
lastName: 'Bryant'
}
})
</script>
</html>
指令语法
功能：用于解析标签
写法：v-xxx (比如v-text,v-html…)
v-text的使用
v-text 会替换掉节点中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好，{{name}}</div>
<!-- 你好！！！将会被替换掉 -->
<div v-text="name">你好！！！</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止生产提示。
new Vue({
el:'#root',
data:{
name: '某某某'
}
})
</script>
</html>
v-html的使用
v-html 也会替换掉节点中的内容，但是它可以识别 html 结构，不建议使用，因为它存在着安全性的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 在div中插入一个h2 -->
<div v-html="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止生产提示。
new Vue({
el:'#root',
data:{
str: '<h2>你好啊</h2>'
}
})
</script>
</html>
单向数据绑定 v-bind
数据只能从 data 流向页面
<div id="root">
<input type="text" v-bind:value="name">
<!-- 简写 -->
<input type="text" :value="name">
</div>
// input的value="某某某" ，修改vm.name='mmm'==> input的value="mmm"
// 但是在input中输入数据，input的value是不会变的，因为value与name是单向绑定的
// 数据只能从 data 流向页面
const vm = new Vue({
el:'#root',
data:{
name: '某某某',
}
})
双向数据绑定 v-model
数据不仅能从 data 流向页面，还可以从页面流向 data
<div id="root">
<input type="text" v-model:value="name">
<!-- 简写 -->
<input type="text" v-model="name">
</div>
const vm = new Vue({
el:'#root',
data:{
name: '某某某',
}
})
事件绑定 v-on
进行事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>n = {{n}}</h2>
<button v-on:click="increment">+</button>
<!-- 简写 -->
<button @click="decrement">-</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止生产提示。
const vm = new Vue({
el:'#root',
data:{
n: 0
},
methods: {
increment() {
this.n ++
},
decrement() {
this.n --
}
}
})
</script>
</html>
v-cloak
它的本质是一个特殊属性，它与css相结合可以解决网络慢时出现 {{xxx}} 的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- vm创建完之后，此时已经有数据可以展示了，v-cloak也会被删除-->
<h2 v-cloak>{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止生产提示。
const vm = new Vue({
el:'#root',
data:{
name: '某某某'
}
})
</script>
</html>
v-pre
v-pre可以跳过该节点的编译
<div id="root">
<!-- v-pre 跳过这行的编译，所以下面h3的内容就是{{n}} -->
<h3 v-pre>{{n}}</h3>
<h2>n = {{n}}</h2>
<button @click="n++">+</button>
</div>
const vm = new Vue({
el:'#root',
data:{
n: 0
}
})
v-once
v-once 会让该节点只动态渲染一次
<div id="root">
<!-- v-once 会让该节点只动态渲染一次，之后就是静态的了 -->
<h3 v-once>{{n}}</h3>
<h2>n = {{n}}</h2>
<button @click="n++">+</button>
</div>
const vm = new Vue({
el:'#root',
data:{
n: 0
}
})
本文含有隐藏内容，请 开通VIP 后查看