【笔记】Vue2学习笔记

发表于 更新于 分类于 阅读次数：

前言

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。（维基百科）

HTML环境使用Vue2

引入依赖

1
<script src="unpkg.com/vue@2/dist/vue.min.js"></script>

挂载根组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app"></div>

<script>
  const root = {
    el: "#app",
    data: {
      key: "value"
    },
    methods: {
      fn() {
        ...
      }
    }
  };
  new Vue(root);
</script>

Nodejs环境使用Vue3（Webpack）

下载依赖

1
npm install -g @vue/cli

初始化项目

1
vue create <project_name>

挂载根组件

public/index.html
1
<div id="app"></div>
src/App.vue
1
2
3
4
5
6
7
<template></template>

<script>
  export default {
    ...
  }
</script>

Vue2的模板指令

传送门

完成

参考文献

哔哩哔哩——Python小清风
哔哩哔哩——黑马程序员