Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上
数据绑定最常见的形式就是使用 {{...}}的文本插值:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '你好!'
}
})
</script>
</body>
</html>
表达式
vue提供了完全的 JS 表达式支持
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="content">
{{5+5}}<br>
{{ ok ? 'yes' : 'on' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">哈喽</div>
</div>
<script>
new Vue({
el: '#content',
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
})
</script>
</body>
</html>
在vue中 前面带v-的都是vue指令
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="content">
<p v-if="hello">11111</p>
<template v-if="yes">
<p>2222</p>
<p>333333</p>
<p>44444</p>
</template>
</div>
<script>
new Vue({
el: '#content',
data: {
hello: true,
yes: true,
}
})
</script>
</body>
</html>