Vue.js 应用程序的基本结构

浏览 13

课文

从这节课起,我们将要进入 Vue.js 学习的第二阶段:Vue.js App 基本结构。 在这一节课中我们将学习 Vue.js 应用程序的结构。 # Vue 实例 作为一个渐进式框架,Vue.js 可以在任何网页工作,它可以管理整个页面或部分页面的功能。与其他很多前端框架一样,Vue 将作为一个**实例**添加到网页中,并且其所有资源都驻留在该对象中。每个 Vue.js 应用程序都从初始化一个 Vue 实例开始。Vue 实例被创建的代码如下: ```jsx var vm = new Vue({ // 配置对象 }) ``` 如上所示,Vue() 是一个接受 JavaScript 对象 ({...})的构造函数。作为参数传递给构造函数。Vue 的配置对象具有约定好的键(Key)。键代表一些属性,它们的值定义了 Vue.js 实例的行为方式。 **注:**该 Vue 实例可以在 HTML 文件中使用来定义 <script> 标签,也可以被放置在一个单独的 .js 文件中,然后在 HTML 页面上导入该文件。 Vue 实例中可以定义很多属性,但我们还是要从最基础、最重要的属性开始学习。下面就是我们要学习的属性: 1. el 2. template 3. data 4. methods 每个属性看起来都令人生畏,但不要担心!我们将一一解释。 ### el el 是 element(元素) 的缩写。 当 Vue 被创建的实例,它会在网页中控制的元素。该元素将由开发人员定义。它可以通过分配该元素(通常是一个 div) 来定义 id。这 id 是之后 Vue 实例操作元素的关键。 ```html <!-- 这是一个将 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 属性中对应的元素。 ```html <!-- 这是一个将 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 实例需要的所有变量。 ```html <!-- 这是一个将 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 属性中定义。 ```html <!-- 这是一个将 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 中查看并进行修改! ```html <!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 事件侦听器和插值表达式)都将在接下来的课程中介绍。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1