提示
本文主要讲解 Vue 中的基础属性 el 和 data。@ermo
# Vue 中的元素绑定与数据
# Vue 实例中的 el 属性
Vue 实例的作用范围是什么？
Vue 实例会对选中的 el 元素以及器后代元素进行管理。
el 属性不仅可以使用 id 选择器，可以使用 CSS 中的所有选择器，建议使用 id 选择器，保证唯一。
Vue 实例可以作用除 html 和 body 的所有 html 标签。
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app" class="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
// el: '#app', // id 选择器
// el: '.app', // 类选择器
el: 'div', // 标签选择器
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
# Vue 实例中的 data 属性
Vue 实例中 data 属性，用于存放数据，data 属性中可以绑定复杂类型的数据。
比如数组和对象。对于绑定的复杂类型数据，在编写时要遵循 js 语法。
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
{{ message }}
{{ person }}
<li>{{ language[0] }}</li>
<li>{{ language[1] }}</li>
<li>{{ language[2] }}</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
language: ['Java', 'JavaScript', 'Python'],
person: {
name: "Lily",
age: 18
}
}
});
</script>
</body>
</html>
结果如下。
Hello Vue! { "name": "Lily", "age": 18 }
Java
JavaScript
Python