小白菜笔记 Vue （一）基础篇

写在前面：

学习Vue要转化思想：不要想着怎么操作 DOM，而是想着如何操作数据！

Vue 的文档很通俗易懂，学习细节移步官网

关于 Vue

Vue 是一套用于构建用户界面的渐进式（由浅入深）框架。

使用方式

• 使用 <script> 引入，可以到 BootCDN 搜索 Vue
• 使用 NPM 安装
• 使用 vue-cli 创建 Vue 应用

Vue 的两个构建版本

• 完整版：同时包含编译器和运行时的版本。

  对应文件名：vue.js/vue.min.js

• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

  对应文件名：vue.runtime.js/vue.runtime.min.js

PS：.min.js 文件为无注释无格式被压缩的 js 文件

两个版本的区别：

完整版能够编译 template，比如传入一个字符串给 template 选项（.vue文件/单文件组件），或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板。

使用 webpack 或 @vue/cli 引入时需额外设置

// 单文件组件
<template>
  <p>{{greeting}}</p>
</template>
<script>
  module.exports = {
    data: function () {
      return {
        greeting: "Hello World!"
      }
    }
  }
</script>
<style scoped>
/* 一些样式 */
</style>

运行时版本不能编译 template ，它通过 render(createElement) 渲染节点。

使用 webpack 或 @vue/cli 引入时默认使用此版

上面的例子用 render 渲染

new Vue({
  render(createElement) {
    return createElement('p', 'Hello World!')
  }
})

最佳实践：总是使用运行时版本，配合使用 vue-loader 在构建时把 .vue 文件内部的模板预编译成 JavaScript

Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

var vm = new Vue({
  // 选项
})

开始使用 Vue 吧 🌝

🤫 可以康康 public/index.html、src/main.js 和 src/App.vue 先熟悉下 Vue 是怎么用的