MVVM思想

M：model 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，model里有变化会自动地通过Directives填写到视view中，
视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

Vue 声明式渲染

  1. <script>
  2.         new Vue({
  3.             el:"#app",                        //绑定元素
  4.             data:{                                //封装数据
  6.             },
  7.             methods:{                            //封装方法
  8.                 cancel(){
  9.                     this.num--;
  10.                 },
  11.             }
  12.             computed:{                        //计算属性
  14.             },
  15.             watch:{                                //监听器
  17.             },
  18.             filters:{                            //过滤器
  20.             }
  21.         })
  22. </script>

初始化项目

  1. npm init -y
  3. npm install vue

使用Vue脚手架进行开发

初始化项目

  1. 1 全局安装webpack
  2. npm install webpack -g
  3. 2 全局安装vue脚手架
  4. npm install -g @vue/cli
  5. 3 初始化vue项目
  6. vue init webpack appname:vue脚手架使用webpack模板初始化一个appname项目
  7. 4 启动vue项目
  8. 项目的package.json中有scripts,代表我们能运行的命令
  9. npm start = npm run dev: 启动项目
  10. npm run build:将项目打包

使用element-ui

  1. 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
  2. npm i element-ui -S
  4. 在 main.js 中写入以下内容：
  5. import ElementUI from 'element-ui';
  6. import 'element-ui/lib/theme-chalk/index.css';
  7. Vue.use(ElementUI);        //让 vue 使用 element-ui