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

浏览 150

课文

从这节课起,我们将要进入 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 实例中可以定义很多属性,但我们还是要从最基础、最重要的属性开始学习。下面就是我们要学习的属性:

  1. el
  2. template
  3. data
  4. 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 事件侦听器和插值表达式)都将在接下来的课程中介绍。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1