Vue.js模板数据绑定指令
Vue.js模板语法:
Vue.js使用了基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据。
Vue.js的核心是一个允许你采用简洁的模板语法声明式的将数据渲染进DOM的系统。
结合响应系统,在应用状态改变时,vue能够智能地计算出重新渲染组件的最小的代价并应用到DOM操作上。
(1)数据绑定–文本插值:
数据绑定最常见的方法形式就是使用{{…}} 的文本插值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="myapp01">
<p>vue教程</p>
<p>{{xinxi}}</p>
<div>{{xinxi2}}</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"#myapp01",
data:{
xinxi:"刘某某",
xinxi2:"王某某"
}
})
</script>
</html>
(2)数据绑定之v-html指令:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="myapp01">
<div>xinxi</div>
<div>{{xinxi}}</div>
<div>{{xinxi2}}</div>
<div v-html="xinxi2"></div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"#myapp01",
data:{
xinxi:"刘某某",
xinxi2:"<h1>王某某</h1>"
}
})
</script>
</html>
(3)vue.js提供了完全的JavaScript表达式支持:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="myapp01">
{{5+5}}<br>
{{ok?"yes":"no"}}<br>
{{xinxi}}<br>
{{xinxi.split('').reverse().join('')}}
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"#myapp01",
data:{
ok:true,
xinxi:"刘某某",
shuju:111
}
})
</script>
</html>