Day20 Vue基本教学(二)

适用于初学者的 Vue.js

必要条件

需要先在Windows或Windows子系统Linux版上安装Vue.js。建议在 Windows上安装初学者来学习，专业人员安装在 WSL上。

搭配 Visual Studio Code 使用 NodeJS

安装VS Code。 无论您是否打算在Windows或WSL上使用 Vue。

1. 开启命令列并建立新目录： mkdir HelloVue ，然後输入目录： cd HelloVue
2. 安装 Vue CLI： npm install -g @vue/cli
3. 建立您的 Vue 应用程序： vue create hello-vue-app
4. 开启新的 hello vue 应用程序的目录： cd hello-vue-app
5. 尝试在您的网页浏览器中执行新的 Vue 应用程序： npm run serve，在浏览器中看到「欢迎使用您的 Vue.js 应用程序」。 可以按下 Ctrl+C 停止 vue cli-服务服务器。
6. 请尝试在 VS Code 中开启 Vue 应用程序的原始程序码，以更新欢迎讯息，然後输入：code .
7. VS Code 将会启动并显示档案总管中的 Vue 应用程序。 再次在终端机中执行您的应用程序 npm run serve ，并将网页浏览器开启至 localhost，让您可以看到显示的 Vue 页面欢迎使用页面。 App.vue在 VS Code 中寻找档案。 请尝试将「欢迎使用您的 Vue.js 应用程序」变更为「欢迎使用蛙！」。 储存变更後，您就会看到 Vue 应用程序「热重载」。

组件

组件是Vue最为强大的特性之一。为了更好地管理一个大型的应用程序，需要将应用切割为小而独立、具有复用性的组件。在Vue中，组件是基础HTML元素的拓展，可方便地自订其资料与行为。下方的代码是Vue组件的一个范例，彩现为一个能计算滑鼠点击次数的按钮。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

模板

Vue使用基於HTML的模板语法，允许开发者将DOM元素与底层Vue实例中的资料相系结。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM彩现函式。结合回应式系统，在应用状态改变时，Vue能够智慧型地计算出重新彩现组件的最小代价并应用到DOM操作上。
此外，Vue允许开发者直接使用JSX语言作为组件的彩现函式，以代替模板语法。以下为可计算点击次数的按钮的JSX彩现版本（需组态相应Babel编译器）：

Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (h) {
    return (<button vOn:click={this.onclick}>Clicked {this.count} times</button>)
  },
  methods: {
    "onclick": function() {
      this.count = this.count + 1;
    }
  },
  mounted: function() {
    this.count = this.initial_count;
  }

回应式设计

回应式是指MVC模型中的视图随着模型变化而变化。在Vue中，开发者只需将视图与对应的模型进行系结，Vue便能自动观测模型的变动，并重绘视图。这一特性使得Vue的状态管理变得相当简单直观。

过渡效果

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：

• 在CSS过渡和动画中自动应用class
• 可以配合使用第三方CSS动画库，如Animate.css
• 在过渡勾点函式中使用JavaScript直接操作DOM
• 可以配合使用第三方JavaScript动画库，如Velocity.js

单档案组件

为了更好地适应复杂的专案，Vue支援以.vue为副档名的档案来定义一个完整组件，用以替代使用Vue.component注册组件的方式。开发者可以使用 Webpack或Browserify等构建工具来打包单档案组件。