Vue.js 应用程序的基本结构
浏览 746
课文
从这节课起，我们将要进入 Vue.js 学习的第二阶段：Vue.js App 基本结构。
在这一节课中我们将学习 Vue.js 应用程序的结构。
Vue 实例
作为一个渐进式框架，Vue.js 可以在任何网页工作，它可以管理整个页面或部分页面的功能。与其他很多前端框架一样，Vue 将作为一个实例添加到网页中，并且其所有资源都驻留在该对象中。每个 Vue.js 应用程序都从初始化一个 Vue 实例开始。Vue 实例被创建的代码如下：
var vm = new Vue({
// 配置对象
})
如上所示，Vue() 是一个接受 JavaScript 对象 ({...})的构造函数。作为参数传递给构造函数。Vue 的配置对象具有约定好的键（Key）。键代表一些属性，它们的值定义了 Vue.js 实例的行为方式。
**注：**该 Vue 实例可以在 HTML 文件中使用来定义 <script> 标签，也可以被放置在一个单独的 .js 文件中，然后在 HTML 页面上导入该文件。
Vue 实例中可以定义很多属性，但我们还是要从最基础、最重要的属性开始学习。下面就是我们要学习的属性：
- el
- template
- data
- methods
每个属性看起来都令人生畏，但不要担心！我们将一一解释。
el
el 是 element(元素) 的缩写。
当 Vue 被创建的实例，它会在网页中控制的元素。该元素将由开发人员定义。它可以通过分配该元素（通常是一个 div） 来定义 id。这 id 是之后 Vue 实例操作元素的关键。
<!-- 这是一个将 id 设置为 'app' 的 div -->
<div id='app'></div>
<script>
new Vue({
// 将 #app 作为 el 的值
// 之后 Vue 对 DOM 的操作都会基于这个 div
el: '#app'
})
</script>
template
template 是模板的意思。
template 定义了什么 Vue 实例显示的内容。template 可以提供一段 HTML 代码。这段代码会替换 el 属性中对应的元素。
<!-- 这是一个将 id 设置为 'app' 的 div -->
<div id='app'></div>
<script>
new Vue({
// 将 #app 作为 el 的值
// 之后 Vue 对 DOM 的操作都会基于这个 div
el: '#app' ,
// 模板中的 div 会替换掉上面那个 id 为 app 的 div
template: `
<div>
<h1>I am the template from the Vue instance!</h1>
</div>
`
})
</script>
data
data 是数据的意思。
它存储了 Vue 实例需要的所有变量。
<!-- 这是一个将 id 设置为 'app' 的 div -->
<div id='app'></div>
<script>
new Vue({
// 将 #app 作为 el 的值
// 之后 Vue 对 DOM 的操作都会基于这个 div
el: '#app' ,
// 模板中的 div 会替换掉上面那个 id 为 app 的 div
template: `
<div>
<h1>I am the template from the Vue instance!</h1>
</div>
`,
data: {
name: '张三',
age: 18
}
})
</script>
methods
methods 是方法的意思。
除了一个 template（显示模板）和一个 data（存储数据），Vue 实例可能还需要执行一些任务。为此，它也可以有自己的方法或函数，可以在 methods 属性中定义。
<!-- 这是一个将 id 设置为 'app' 的 div -->
<div id='app'></div>
<script>
new Vue({
// 将 #app 作为 el 的值
// 之后 Vue 对 DOM 的操作都会基于这个 div
el: '#app' ,
// 模板中的 div 会替换掉上面那个 id 为 app 的 div
template: `
<div>
<h1>I am the template from the Vue instance!</h1>
</div>
`,
data: {
name: '张三',
age: 18
}
methods: {
incrementAge() {
this.age++
}
}
})
</script>
提醒：Vue 只有在网页上已经通过 script 标签导入了 vue.js 才能创建实例，比如： <script src="https://cdn.jsdelivr.net/npm/vue"></script>
总结
总结本课，下面提供的可执行示例可以帮助您在了解 Vue.js 应用程序的基本结构后提供对 Vue.js 应用程序的进行体验！
你可以将代码复制到 VSCode 中查看并进行修改！
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app"></div>
<script>
new Vue({
el: '#app',
template:
`<div>
<h1>Vue.js 应用</h1>
<p> {{name}}的年龄： {{age}}</p>
<button @click="incrementAge">加一岁</button>
</div>
`,
data: {
name: '张三',
age: 18
},
methods: {
incrementAge() {
this.age++
}
}
})
</script>
</body>
</html>
在上面的例子中，重点是如何通过设置 template，data 以及 methods，使一个完整的 Vue 应用可以正常运行。
注意： 如果您目前不了解上面提供的示例中的所有内容，请不要担心，因为之前未讲解的内容（例如 click 事件侦听器和插值表达式）都将在接下来的课程中介绍。
评论
暂无评论