vue 完整学习笔记（一）

2022.08.24 重学vue ，在此记录一下笔记

01  （了解）Vue.js 课程介绍

会用到 es6 语法

用到Xmind , Xmindzen 绘制流程图       

 

 前端路由？后端路由 ？对比的理解 参照前端路由和后端路由_Melody_lw的博客-CSDN博客_前端路由和后端路由的区别

一到六部分是基础知识，基础知识很多，需要不断的练习

七到九  高级部分

 十 补充部分

02  （理解）Vue.js 的认识和特点介绍

1、认识vue.js 

why study vue.js   ：重构公司现有项目；公司新项目使用vue技术栈；换工作需要vue技术；前端必备技能

简单认识一下vue.js：

        (1) 读音/vju:/ ，类似view

        (2) 渐进式框架：意味着可以将vue作为你应用的一部分嵌入其中；可以把旧项目用vue进行一点一点的重构；vue 全家桶: core(vue核心）+ VueRouter + VueX;

        (3) 学习vue前提： 具备一定的html，css，javascript基础

  jquery已经在慢慢退出，github已经在逐步把jquery移除

  es6 比 es5 好用，typescript 比 es6 好用

2、vue 特点：

解耦视图和数据，可复用的组件，前端路由技术，状态管理，虚拟DOM

3、vuejs 中的MVVM

view 层：视图层，通常指 DOM 层，主要是给用户展示各种信息

model 层：数据层，数据可以是我们固定的死数据，更多的是来自我们服务器，从网路上请求下来的数据

VueModel 层：视图模型层， 是view 和 model沟通的桥梁，一方面实现了 Data Bingding ，也就是数据绑定，将Model的改变实时的反应到 view 中，另一方面，它实现了 DOM Listener 也就是DOM 监听，当 DOM 发生一些事件（点击，滚动，touch等）时，可以监听到，并在需要的情况下改变对应的 Data.

03  （掌握）Vuejs 安装方式

方式一：cdn 引入 ：开发环境（未压缩版，包含了有帮助的命令行和警告），生产环境（压缩版，优化了尺寸和速度）

方式二：下载和引入

方式三：NPM安装管理

通过webpack 和CLI 的使用，就是npm方式

vscode 很好用，有很多好用的插件，可以任意定制你想用的任何的功能

04  （掌握）HelloVuejs 的初体验

  <div id="app">
    <h3>{{msg}}h3>
    <h3>{{name}}h3>
  div>
  <script src = "./js/vue.js">script>
  <script>
    /**
     * var 没有作用域，js设计早期的缺陷
     * let const 区别
     * let 定义变量
     * const  定义常量
     * 
     */
    const app = new Vue({
      el:"#app",//用于挂载要管理的元素
      data:{ //定义数据【可以自己定义，也可以来自网络】
        msg:"你好阿",
        name:"yxx"
      }
    })
 
    // 编程范式 ：命令式编程 (原始js) 、 声明式编程 (vue)
    
 
    // 原始js的做法
 
    // 创建div元素
    // 定义变量
    // 将变量的值放在div元素里面
 
    // 响应式：当数据发生改变的时候，页面会跟着发生响应
  script>

05  （掌握）Vue 列表的展示

body>
  <div id="app">
    <h4>四大名著h4>
    <ul>
      <li v-for = "item in books">{{item}}li>
    ul>
  div>
  <script src = "./js/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        books:["三国演义","水浒传","红楼梦","西游记"] //列表也是响应式的
      }
    });
    // 知识点：
    // v-for 指令
    // 数据是响应式的
  script>

 06  （掌握）小案例-计数器

  <div id="app">
    <h4>当前计数 {{counter}}h4>
    
    <button @click = "add">+button>
    <button @click = "substraction">-button>
  div>
  <script src = "./js/vue.js">script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        counter:0
      },
      methods:{
        add:function(){
          this.counter++;
          console.log("add被执行")
        },
        substraction:function(){
          this.counter--;
          console.log("substraction被执行")
        }
      }
    });
    // 知识点：
    // 新指令：v-on:click   @click    语法糖：一般是指简写
    // 新属性：methods 用于定义vue对象里面的方法
    // 函数里面用this获取data里面的counter，是因为内部做了proxy代理
   
  script>

07  （理解）vue的MVVM

 08-(理解)Vue的options选项

  <div id="app">
    <h3>{{msg}}h3>
  div>
  <script src = "./js/vue.js">script>
  <script>
    
  const app = new Vue({
    el:"#app",
    // el:document.querySelector("#app"),
    data:{//data  Object || Function，在组件中，data必须是一个函数
      msg:"hello world"
    },
    methods:{
 
    }
  })
 
  /**
   * 开发中 function 什么时候称为方法，什么时候称为函数
   * 方法：methods
   * 函数：function
   * 
   * 定义在类里面  叫做方法【方法都是和实例对象挂钩的】
   * 直接定义在script里面的
  */
 
  script>

09-(理解)什么是Vue的生命周期

  <div id="app">div>
  <script src = "./js/vue.js">script>
  <script>
  /*
    什么是vue的生命周期？
    生命周期：事物从诞生到消亡的整个过程
  */
    const app =  new Vue({
      el:"#app",
      data:{},
      methods:{},
      created(){
        console.log("created")
      }
    })
 
  script>

10-(理解)Vue的生命周期函数有哪些

  <div id="app">div>
  <script src = "./js/vue.js">script>
  <script>
    /**
     * 用的最多的：created  mounted
     * hook: 勾子的意思，表示回调的意思
     * 对照生命周期图 绿色的部分是内部在做的东西
     *                红色部分：勾子
     * 组件里面可能会用到 destoryed
    */ 
    const app =  new Vue({
      el:"#app",
      data:{},
      methods:{},
      beforeCreate(){
        console.log("beforeCreate")
      },
      created(){
        console.log("一般在这里做网络请求")
        console.log("created");
      },
      beforeMount(){
        console.log("beforeMount")
      },
      mounted(){
        console.log("mounted")
      },
      beforeUpdate(){
        console.log("beforeUpdate")
      },
      updated(){
        console.log("updated")
      },
      beforeDestory(){
        console.log("beforeDestory")
      },
      destoryed(){
        console.log("destoryed")
      }
    })
 
  script>

11-(了解)定义vue的template

利用webstorm 自定义代码块，这块vscode也可以实现，具体可参照VSCode自定义代码块详解 - 腾讯云开发者社区-腾讯云

这里告一段落，明天继续，希望可以坚持下去，加油！你是最棒的！