"> "> ">
  1. 在 index.html 文件中写上 <div id="app"></div>
    1. 上面内容相当于占个坑，未来 vue 编译好代码，往里面插入
  2. main.js 中引入 Vue
//2 引入 Vue
import Vue from 'vue';
import App from './app.vue';
  1. 创建一个 Vue 实例，一般一个项目，就一个 vue 实例完成显示
new Vue({
   // el: '#app', // 目的地
   // render: 'DOM结构' // 渲染的内容
   el: '#app', // 指定父容器，表示把上面App文件中的代码插入到 index.html 中 #app 元素中去
   render: function(createElement) {
   		return createElement(App)
      // App中包含的是<template>,<script>这些东西，不识别。
      // 所以我们用 createElement 将其生成为DOM结构
      // #app需要render函数中生成的 dom 结构
      // 所以我们还需要再 return 出去
   }
})

项目文件结构

my_project
	src 存放人看得懂的源代码，具有一定功能划分（MVC）
  dist 存放真实上线的代码（减少请求，混淆代码）机器能看懂
  webpack.config.js 打包生成 dist 下的代码
  package.json文件 包信息描述 & 运行命令 e.g. npm run dev,npm run build
  
  // 命令行: 
  // npm run build 立刻读取 webpack.config.js 文件，生成到dist目录
  // npm run dev (webpack-dev-server) 运行src下的代码，虚拟出build.js测试

常用命令

v-text

是元素的 innerText，只能在双标签中使用

<span v-text="{data}"></span>

v-html

是元素的 innerHTML，不能包含表达式 {{}}

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

v-if

元素是否移除或者插入

<div v-if="isShow">123123</div>

v-show

元素是否显示或者隐藏（display: none）

⭐️ v-model