vue 基础语法（一）

半个开心果

已于 2022-08-26 09:05:43 修改

阅读量164

点赞数

分类专栏： vue javascript 文章标签： vue.js 学习前端

于 2022-08-24 17:54:26 首次发布

本文链接：https://blog.csdn.net/qq_37299479/article/details/125455374

版权

javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

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 的初体验

<body>
  <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>
</body>

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>
</body>

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

<body>
  <div id="app">
    <h4>当前计数 {{counter}}</h4>
    <!-- <button v-on:click = "counter++">+</button>
    <button v-on:click = "counter--">-</button> -->
    <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>
</body>

07 （理解）vue的MVVM

08-(理解)Vue的options选项

<body>
  <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>
</body>

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

<body>
  <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>
</body>

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

<body>
  <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>
</body>

11-(了解)定义vue的template

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

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