画布 1
整体
  Vue.js 是什么
    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
  声明式渲染
    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    data
      数据，是一个对象。
  系统指令
    v-bind：用于绑定属性。
      简写“:”
    v-on：事件绑定机制
      简写“@”
        常用事件
          - v-on:click
          - v-on:keydown
          - v-on:keyup
          - v-on:mousedown
          - v-on:mouseover
          - v-on:submit
    v-if：设置元素的显示和隐藏（添加/删除DOM元素）
      根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
      在切换时，元素和它的数据绑定会被销毁并重建。
      v-if与v-else-f中间不能加标签只能加注释
    v-show：设置元素的显示和隐藏
      据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
    v-if和v-show的区别
      区别：
        - v-if：每次都会重新添加/删除DOM元素
        - v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
      优缺点：
        - v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。
        - v-show：有较高的初始渲染消耗。也就是说，即使一开始`v-show="false"`，该节点也会被创建，只是隐藏起来了。而`v-if="false"`的节点，根本就不会被创建。
      - 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
      - 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
    v-for：根据数组中的元素遍历指定模板内容生成内容
      v-for="item in list"
    v-model：双向数据绑定,绑定value
      双向数据绑定，只能用于表单元素，或者用于自定义组件。
  vuecli
    安装：npm install -g @vue/cli
      先换源npm config set registry https://registry.npmmirror.com，再执行前面的安装
        显示版本号：vue -V
    文件夹下打开cmd创建项目
      vue create 项目名
    运行项目 npm run serve
      import 导入
      h => h(App) = function (h){return h(App)}
      .$mount('#app') = el:"app"
      template里面放html标签，只能有一个根标签
      script里面放js代码
      style里面放css样式代码
      export 导出 与import配对
        这里面的data要写成函数形式
  组件
    你可以将组件进行任意次数的复用
    props向子组件传递数据
        网络路径直接img=“地址”即可
  vue-router
    安装：npm view vue-router versions（查看router的版本号）
      npm install vue-router@3.5.3（安装router@后是版本号）
    引入vue-router
      import VueRouter from 'vue-router';
    router是vue的一个组件，需要use一下才能使用
      Vue.use(VueRouter)
    定义routes路由的集合，数组类型
const routes=[
//单个路由均为对象类型，path代表的是路径，component代表组件
{path:'/page1',component:() => import("./page1.vue")}
]
    //实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
routes
});
    new Vue({
//一定要注入到vue的实例对象上
router,
render: h => h(App),
}).$mount('#app')
  计算属性（computed）
    作用
      获取后台数据后进行数据处理
      计算属性在vue内部做了缓存，数据没有改变就不会重新计算，直接展示缓存数据
      基于data中的数据
    计算属性和methods的区别：
      methods没有缓存机制
  侦听器（watch）
    作用
      数据发生改变时，通知侦听器中绑定的方法进行处理
      数据变化时，执行异步操作或较大的操作