疾速入门 - Vue2 Tutorials (一)

2024年5月30日 200次阅读来源: nodejh

Vue 的官方文档对 Vue 引见异常细致，但官方文档运用在 HTML 中引入 vue 的体式格局举行解说，而现实项目中平常运用脚手架如 vue-cli 初始化项目。以至于刚看完文档时，却照旧不能马上马上 vue-cli 建立的项目代码。所以本文 vue-cli 构建的项目为基础，细致诠释其代码及对应的观点，并举行简朴的实践。

本文的代码在 https://github.com/nodejh/vue2-tutorials/tree/master/01.QuickStart

命令行东西

装置 vue-cli 并初始化项目

首先要全局装置 vue-cl：

$ npm install --global vue-cli

然后运用 vue-cli 初始化一个基于 webpack 模板的新项目，除了 Install vue-router? 选 N (No)，其他都能够直接回车选 Y (Yes)，因为我们临时不会讲到 vue-router：

$ vue init webpack demo
? Project name demo
? Project description A Vue.js project

? Author nodejh <jianghangscu@gmail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

装置依靠

$ cd demo
$ npm install
$ npm run dev

然后翻开浏览器，输入 http://localhost:8080 就能够看到界面。

接下来剖析一下代码。

代码剖析

项目目次组织以下：

├── README.md
├── build    # 编译项目的配置文件目次
├── config    # 配置文件目次
├── src    # 项目重要代码目次
├── static    # 静态资本
├── test    # 测试文件目次

开辟阶段的重要代码都在 src 目次中编写，vue-cli 默许生成了一些代码：

src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
└── main.js

能够发明，代码的后缀名有两种：

.js JS 文件
.vue Vue 组件，内里定义了 Vue 实例、模板、款式等。须要由 webpack 等东西来转换为 js 代码

接下来会一一诠释这些文件及代码。

main.js

main.js 是项目的进口文件，也是 webpack 打包的进口文件。内里最代码很少，重要就是经由过程 new Vue() 建立 Vue 实例：

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});

每一个 Vue.js 运用都是经由过程组织函数 Vue 建立一个 Vue 的根实例启动的。

在实例化 Vue 时，传入一个了一个对象，对象包括以下几个选项。

el

el 的值是 Vue 实例的挂载目的，这里是 #app，也就是 demo/index.html 中 id="app" 这个元素：

<div id="app"></div>

el 必需是一个已存在的元素。

api/#el

components

在说 template 之前，先来看看 components 属性。

components: { App } 等价于 components: { App: App }，是一个包括了对 Vue 实例可见的组件的哈希表。只要在 components 内里列出来的组件，才够在 template 内里运用。

假如我们把 components: { App } 改成 components: { App } 改成 components: { MyApp: App }，那末在 template 内里就须要如许运用：template: '<my-app />'。

因为 HTML 标签不辨别大小写，所以 components 内里的驼峰定名会自动转换为短横线。详见 camelCase vs. kebab-case

template

template 就是挂载到页面的模板。

这里的值是 <App/> 组件就是 components 属性中的 App，也就是经由过程 import 引入的 App 这个模板。

new Vue({
  el: '#app',
  // 这里的 <App/> 就是 components 属性的值 App
  template: '<App/>',
  components: { App },
});

所以这段代码的寄义就是，将 <App/> 这个模板挂载到元素 #app 上。

src/App.vue

src/App.vue 是一个典范的单文件组件。现实在项目中，我们写的基础都是组件，再依据须要用组件构成页面，这实在就是组件化。组件与组件之间互相自力，项目组织越发清楚，也更有利于保护。

一个组件内里封装了 HTML、CSS 和 JS，有本身自力的款式和逻辑。

<template> 就是组件中的模板，模板的代码都在 <template> 标签中，除 <hello> 以外都是一般的 HTML。因为 hello 也是一个组件，然后经由过程标签的情势注入到模板中。

为何模板中能运用 hello 这个组件呢？

这是因为 <script></script> 标签内里定义了 Hello（首字母大写）这个组件：

import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    // Hello 组件，即 ./components/Hello 的一个援用
    Hello  
  }
}

这里 components 属性的寄义，在之前已提到过了，只要在 components 内里列出来的组件，才被模板运用。这里列出了 Hello 这个组件，所以在 <template> 中我们能够运用 <hello>（前面也提到过， vue 会自动将驼峰法定名转为短横线）。

而 components 属性内里的 Hello，则是 ./components/Hello 这个组件的一个援用：

import Hello from './components/Hello'

末了就是 <style> 标签，内里就是一般的 CSS 了。

src/components/Hello.vue

末了再来看看 src/components/Hello.vue 这个组件的代码。

基础跟 src/App.vue 是一样的，除了下面这两个处所以外：

<h1>{{ msg }}</h1>

data () {
  return {
    msg: 'Welcome to Your Vue.js App'
  }
}

祝贺你！看到这里，我们就能够够真正最先写代码了。

{{}} 是 Vue 的一个模板语法，文本插值。如上面的例子所示，我们在 data 内里定义一个对象，就能够够在模板中经由过程 {{ }} 来访问。

data 虽然是一个函数，但它实行以后就等价于：

data: {
  msg: 'Welcome to Your Vue.js App'
}

当我们转变 msg 的值，在页面上衬着出来的数据也会转变。也就是数据和 DOM 绑定在了一同。

模板语法

插值

文本插值

上面我们已打仗到了文本插值 {{}}，{{ msg }} 将会被替代为对应数据对象上 msg 属性的值。不管什么时刻，绑定的数据对象（即 data）上 msg 属性发生了转变，插值处的内容都邑更新。

经由过程运用 v-once 指令，我们也能实行一次性地插值，当数据转变时，插值处的内容不会更新。但请留意这会影响到该节点上一切的数据绑定：

<h1 v-once>This will never change: {{ msg }}</h1>

纯 HTML

双大括号会将数据诠释为纯文本，而非 HTML 。为了输出真正的 HTML ，须要运用 v-html 指令：

<div v-html="rawHtml"></div>

这个 div 的内容将会被替代成为属性值 rawHtml，直接作为 HTML —— 数据绑定会被疏忽。注重，你不能运用 v-html 来复合部分模板，因为 Vue 不是基于字符串的模板引擎。组件更适合担负 UI 重用与复合的基础单位。

你的站点上动态衬着的恣意 HTML 能够会异常风险，因为它很轻易致使 XSS 进击。请只对可托内容运用 HTML 插值，毫不要对用户供应的内容插值。

JS 表达式

{{}} 中也能够写 JS 表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

指令

指令（Directives）是带有 v- 前缀的特别属性。

v-bind

{{}} 不能在 HTML 属性中运用。针对 HTML 属性须要运用 v-bind：

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有用 —— 假如前提被求值为 false 的话该属性会被移除：

<button v-bind:disabled="isButtonDisabled">Button</button>

v-bind 也能够缩写：

<div :id="dynamicId"></div>
<button :disabled="isButtonDisabled">Button</button>

v-on

v-on 用来监听 DOM 事宜：

<button v-on:click="doSomething"></button>

也能够缩写成下面如许：

<button @click="doSomething"></button>

v-if

<template>
  <p v-if="seen">Now you see me</p>
</template>

<script>
export default {
  name: 'hello',
  data: {
    seen: true
  }
}
</script>

这里 v-if 指令将依据表达式 seen 的值的真假来移除/插进去 <p> 元素。

v-for

v-for 指令能够绑定数组的数据来衬着一个项目列表：

<template>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</template>

<script>
  export default {
    data: {
      todos: [
        { text: '进修 JavaScript' },
        { text: '进修 Vue' },
        { text: '全部牛项目' }
      ]
    }
  }
</script>

实践

让我们把目光回到 Hello.vue。在这个组件内里有一些链接列表， Essential Links 和 Ecosystem，这些列表直接运用 HTML 编写：

<ul>
  <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
  <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
  <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
  <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
  <br>
  <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
  <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
  <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
  <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
  <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>

根据传统的写法，假如我们须要往内里增加链接的时刻，每次我们都得增加 <li> 和 <a> 标签。思索两个题目：

增加几个链接还好，假如要增加异常异常多呢？难到要复制几十次 <li> 和 <a> 标签？
假如要动态转变链接列表呢？岂非要运用 innerHTML 等要领修正 DOM？

智慧的你能够已想到了，很明显不须要这么做，我们能够运用模板语法。将链接信息写到 Vue 的数据对象 data 内里，然后经由过程动态绑定的体式格局，将数据绑定到 DOM。

所以修正以下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li v-for="essentialLink in essentialLinks">
        <a :href="essentialLink.link" target="_blank">{{ essentialLink.text }}</a>
      </li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li v-for="ecosystem in ecosystems">
        <a :href="ecosystem.link" target="_blank">{{ ecosystem.text }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      ecosystems: [
        {
          link: 'http://router.vuejs.org/',
          text: 'vue-router'
        },
        {
          link: 'http://vuex.vuejs.org/',
          text: 'vuex'
        },
        {
          link: 'http://vue-loader.vuejs.org/',
          text: 'vue-loader'
        },
        {
          link: 'https://github.com/vuejs/awesome-vue',
          text: 'awesome-vue'
        }
      ],
      essentialLinks: [
        {
          link: 'https://vuejs.org',
          text: 'Core Docs'
        },
        {
          link: 'https://forum.vuejs.org',
          text: 'Forum'
        },
        {
          link: 'https://gitter.im/vuejs/vue',
          text: 'Gitter Chat'
        },
        {
          link: 'https://github.com/vuejs/awesome-vue',
          text: 'awesome-vue'
        },
        {
          link: 'https://twitter.com/vuejs',
          text: 'Twitter'
        }
      ]
    }
  }
}
</script>

如许我们就把数据和视图分开了，模板内里的代码也简约了许多，不再须要写许多反复的代码。而且依据差别数据，我们也能展示出差别的 UI。

总结

本文细致解说了 vue-cli 初始化的项目代码，而且在解说代码的过程当中，引见了组织 vue 对象的一些参数，以及 vue 的一些基础观点，比方模板语法中的插值和指令。末了经由过程修正代码对以上知识点举行实践。

置信看到了这里，你对怎样运用 vue 写一个项目已有了开端相识。固然，看完本文，能够另有许多观点明白不清楚，这时候引荐去看一下 vue 的官方文档，这个时刻再去看官方文档，应当就会轻松许多了。

https://github.com/nodejh/nodejh.github.io/issues/38

    原文作者：nodejh
    原文地址: https://segmentfault.com/a/1190000010075694
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。