文档:https://cn.vuejs.org/v2/guide/index.html
引入
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
第一个Vue应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1> <!-- 插入文本 -->
<div v-html='name'></div> <!-- 插入标签 -->
</div>
<script>
var app = new Vue({
el: '#app', // 挂载点,用来绑定dom中的某个标签
data: { // 数据帝想,给挂载标签下的变量赋值
message: '你好 Vue.js',
name: '<h1>bigllxx</h1>'
}
})
</script>
</body>
</html>
el 挂载点
- 不能挂载到html、body标签下
- 作用范围:挂载点及其所有子标签
el 支持的选择器:
<div id="app" class="app">{{ message }}</div>
<script>
var app = new Vue({
el: '#app', // id选择器
// el: '.app', // class选择器
// el: 'div', // 标签选择器
// 等等,建议使用id选择器
data: {
message: '你好 Vue.js'
}
})
</script>
data 数据对象
- 可以在data中写复杂的数据类型
- 在dom中通过 {{ }} 来引用
<div id="app">
message: {{ message }} <br />
author: {{ des.author }} <br />
link: {{ des.link }} <br />
language: {{ language[0] }} & {{ language[1] }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好 Vue.js',
des: {
author: '尤雨溪',
link: 'https://cn.vuejs.org/v2/guide/index.html',
},
language: ['中文', 'Englist'],
},
})
</script>