Vue学习笔记

最新推荐文章于 2025-03-06 23:30:00 发布

跨界科技汇

最新推荐文章于 2025-03-06 23:30:00 发布

阅读量1.1k

点赞数 23

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

本文链接：https://blog.youkuaiyun.com/Python_Ghost/article/details/142897831

版权

Vue概念：

为什么学习Vue：

更少的时间，干更多的活，开发网站速度快

原生js ---------------jQuery------------Vue

案例：把数组数据–循环渲染到页面上

原生js：

  <body>
    <ul id="myul"></ul>
  </body>
  <script>
    let arr = ['aa', 'bb', 'cc', 'dd', 'ee']
    let myUl = document.getElementById('myul')
    for (let i = 0; i < arr.length; i++) {
      let thenLi = document.createElement('li')
      thenLi.innerHTML = arr[i]
      console.log(thenLi)
      myUl.appendChild(thenLi)
    }
  </script>

vue：

<body>
    <div id="app">
      <ul>
        <li v-for="item in arr">{
  {item}}</li>
      </ul>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          arr: ['aa', 'bb', 'cc', 'dd', 'ee'],
        }
      },
    })
  </script>

注意：vue写起来很爽，vue的底层还是原生js

vue开发更加的效率和简洁，易于维护，快快快，现在很多的项目都是用vue开发的

vue是什么：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

什么是渐进式：

渐进式：逐渐进步，想用什么就用什么，不用全部都用

vue从基础开始学习，循序渐进向前学习

声明式渲染—组件系统—路由—vuex

什么是库和框架：

库：封装的属性和方法(jquery)

框架：拥有自己的规则和元素，比库强大的多(vue.js)

vue如何学：

每天的知识点做到了如指掌，花时间去记住结论和公式（语法）
记住vue指令的作用，基础语法，整理笔记
课上的例子，练习，案例，作业，项目反复的练习
学会查找问题和解决问题（弄个报错总结文档.md）

vue是渐进式的框架，有自己的规则，我们要记住语法，特点和作用，反复练习，多总结

vue的学习：

传统的开发模式：

基于html/css/js文件开发vue：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 第一步:引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 第二步：创建vue容器  
    vue的语法代码只能写在下面的div中 -->
    <div id="app"></div>
  </body>
  <!-- 第三步：创建vue实例 -->
  <script>
    // console.log(Vue)
    var vm = new Vue({
      el: '#app', //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
      data: {
        //Vue 实例的数据对象
        msg: 'hello word',
        flag: false,
        arr: [11, 2, 3, 4, 56, 6],
        num: 2,
      },
    })
  </script>
</html>

工程化的开发模式：

webpack环境中开发vue，最推荐，企业常用的方式

插值表达式：

目的：在dom标签中，直接插入内容

又叫：声明式渲染/文本插值

语法： { {表达式}}

    <div id="app">
      <!-- 插值表达式中不能写循环语法，不能写条件语句 -->
      <p>{
  {num}}</p>
      <p>{
  {num+1}}</p>
      <p>{
  {34}}</p>
      <p>{
  {flag}}</p>
      <p>{
  {flag?'hello':"nihao"}}</p>
      <p>{
  {str}}</p>
      <p>{
  {str +"vue是必须要学会的"}}</p>
      <p>{
  {'hello world'}}</p>
      <p>{
  {arr}}</p>
      <p>{
  {arr.reverse()}}</p>
      <p>{
  {obj}}</p>
      <p>{
  {obj.name}}</p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 3,
        flag: false,
        str: '大家一定要好好学习vue',
        arr: [11, 22, 333, 44],
        obj: {
          name: 'zs',
          age: 12,
        },
      },
    })
  </script>

总结：dom中插值表达式赋值，vue的变量必须在data中声明

vue基础——MVVM设计模式：

转变思想，用数据驱动视图改变; 操作dom的事，vue源码干了

设计模式:一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结

MVVM：

一种软件架构模式，决定了写代码的思想和层次

M : model 数据模型 (data中定义)

V ：view视图（html页面）

VM：ViewModel 视图模型(vue.js源码)

MVVM通过数据双向绑定让数据自动双向同步，不再需要操作DOM

V （修改视图）-----> M(数据自动同步)

M（修改数据）------>V（视图自动同步）

在这里插入图片描述

总结：vue源码采用MVVM设计模式思想，大大减少了DOM操作，提高开发效率

Vue指令：

指令 (Directives) 是带有 v- 前缀的特殊 attribute

每个指令，都有独立的作用

v-bind：

给标签属性设置变量的值

语法: v-bind:属性名=“vue变量”

简写： :属性名=“vue变量”

  <body>
    <div id="app">
      <!-- v-bind  属性绑定：   把vue变量的值，赋予给dom属性上，影响标签的显示效果 -->
      <a v-bind:href="url">我是a标记</a>
      <a :href="url">我是a标记</a>

      <hr />
      <img v-bind:src="imgurl" alt="" />
      <img :src="imgurl" alt="" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com',
        imgurl: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      },
    })
  </script>

v-on：

给标签定义事件

语法：

v-on:事件名=“要执行的少量代码”
v-on:事件名=“methods中的函数”
v-on:事件名=“methods中的函数(实参)”
简写：@事件名=“methods中的函数”

<body>
    <div id="app">
      <!--  v-on 事件绑定 -->
      <p>要购买的商品的数量{
  {count}}</p>
      <button v-on:click="count=count+1">增加1</button>
      <button v-on:click="addFn">增加1</button>
      <button v-on:click="addCount(5)">一次增5</button>

      <button @click="subFn">减1</button>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 2,
      },
      methods: {
        //专门用来定义函数（方法）的
        addFn() {
          //this代表的是当前的vue实例对象
          console.log(this)
          this.count++
        },
        addCount(num) {
          this.count += num //
        },
        subFn() {
          this.count--
        },
      },
    })
  </script>

v-on事件对象：

vue处理函数中，拿到事件对象

语法:

无传参: 通过形参直接接收
传参: 通过$event指定事件对象传给事件处理函数

<body>
    <div id="app">
      <a @click="fn" href="http://www.baidu.com">阻止百度</a>
      <hr />
      <a @click="eveFn(10,$event)" href="http://www.baidu.com"
        >阻止跳转到百度</a
      >
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn(e) {
          // 阻止默认行为
          e.preventDefault()
        },
        eveFn(num, e) {
          e.preventDefault()
        },
      },
    })
  </script>

v-on修饰符：

在事件后面.修饰符名,给事件带来更强大的功能

修饰符是由点开头的指令后缀来表示的

语法：

@事件名.修饰符 =“methods函数”
- .stop 阻止事件冒泡
- .prevent 阻止默认行为
- .once 程序运行期间，只触发一次事件处理函数
- .self 只当在 event.target 是当前元素自身时触发处理函数

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
      .main {
        width: 400px;
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div @click="fn1">
        <button @click.stop="btnFn">stop阻止事件冒泡</button>
        <a @click.prevent.stop="aFn" href="http://www.baidu.com"
          >prevent阻止默认行为</a
        >
        <button @click.once="onceFn">once触发一次</button>
      </div>

      <!--.self  只当在 event.target 是当前元素自身时触发处理函数  -->
      <div @click.self="fn1" class="main">
        <button @click="btnFn">stop阻止事件冒泡</button>
        <a @click.prevent="aFn" href="http://www.baidu.com"
          >prevent阻止默认行为</a
        >
        <button @click.once="onceFn">once触发一次</button>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        fn1() {
          alert('fn1')
        },
        btnFn() {
          alert('btnFn')
        },
        aFn() {
          alert('aFn')
        },
        onceFn() {
          alert('onceFn')
        },
      },
    })
  </script>

v-on按键修饰符：

给按键事件添加修饰符

语法：

@keyup.enter 监听回车按键
@keyup.esc 监听返回按键

<body>
    <div id="app">
      <input type="text" @keyup.enter="enterFn" />
      <br />
      <input type="text" @keyup.esc="escFn" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        enterFn() {
          alert('enterFn')
        },
        escFn() {
          alert('escFn')
        },
      },
    })
  </script>

v-text/v-html：

更新DOM对象的einnerText和innerHTML

语法：

v-text=“vue数据变量”
v-html=“vue数据变量"

<body>
    <div id="app">
      <p>{
  {str1}}</p>
      <p>{
  {str2}}</p>
      <hr />
      <p v-text="str1"></p>
      <p v-text="str2"></p>
      <hr />
      <p v-html="str1"></p>
      <p v-html="str2"></p>
      <!--  v-text把值当做普通字符串显示 
      
            v-html 把值当做html解析
      -->
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        str1: '<span>我是一个span标签</span>',
        str2: 'hello',
      },
      methods: {},
    })
  </script>

v-model：

主要用于表单元素，把value属性和vue数据变量，双向绑定到一起

语法：

v-model=‘vue数据变量’

双向数据绑定(vue内部采用MVVM设计模式)
- 数据变化–>视图自动同步
- 视图变化–>数据自动同步

<body>
    <div id="app">
      <!-- v-model:实现vue变量和表单标签value属性，双向绑定的指令 -->
      <div>
        <span>用户名</span>
        <input type="text" v-model="username" />
      </div>
      <div>
        <span>密码</span>
        <input type="password" v-model="pass" />
      </div>
      <div>
        <span> 来自于</span>
        <!-- 下拉菜单要绑定在select上 -->
        <select v-model="city">
          <option value="北京市">北京</option>
          <option value="南京市">南京</option>
          <option value="天津市">天津</option>
        </select>
      </div>

      <div>
        <span>性别</span>
        <input type="radio" value="男" v-model="gender" />男
        <input type="radio" value="女" v-model="gender" />女
      </div>

      <!-- 
遇到复选框  v-model的变量值
数组     关联的是复选框的value值
非数组     关联的是复选框的checked属性
       -->
      <div>
        <span>爱好</span>
        <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
        <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
        <input type="checkbox" v-model="hobby" value="打游戏" />打游戏
      </div>

      <div>
        <span>全选</span>
        <input type="checkbox" v-model="checkall" />
      </div>

      <div>
        <span>自我评价</span>
        <textarea v-model="content"></textarea>
      </div>

      <hr />
      <div>{
  {username}}</div>
      <div>{
  {pass}}</div>
      <div>{
  {city}}</div>
      <div>{
  {gender}}</div>
      <div>{
  {hobby}}</div>
      <div>{
  {checkall}}</div>
      <div>{
  {content}}</div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        username: '用户名',
        pass: '',

        city: '南京市',
        gender: '男',
        hobby: ['打游戏'],
        checkall: true,
        content: '',
      },
      methods: {},
    })
  </script>

v-model修饰符：

让v-model拥有更强大的功能

语法:

v-model.修饰符=“vue数据变量”
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy change时触发而非input 不会每次输入都执行事件

 <body>
    <div id="app">
      <div>
        <span>年龄</span>
        <input type="text" v-model.number="age" />
      </div>

      <div>
        <span>人生格言</span>
        <input type="text" v-model.trim="motto" />
      </div>

      <div>
        <span>自我介绍</span>
        <textarea v-model.lazy="content"></textarea>
      </div>
      {
  {content}}
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 0,
        motto: '',
        content: '',
      },
      methods: {},
    })
  </script>

v-show和v-if：

控制标签的显示隐藏

语法:

v-show=“vue变量”
v-if=“vue变量”

原理:

v-show用的是display:none控制标签的显示隐藏（频繁切换）
v-if 用的是插入和删除节点来控制标签的显示隐藏
v-else

<body>
    <div id="app">
      <h1 v-show="isOk">v-show的盒子</h1>
      <h1 v-if="isOk">v-if的盒子</h1>

      <div>
        <!-- v-if和v-else的两个标签必须紧挨着   -->
        <p v-if="age>15">我成年了</p>
        <p v-else>未成年</p>
      </div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isOk: true,
        age: 15,
      },
      methods: {},
    })
  </script>
</html>

v-for：

列表渲染，所在标签结构，按照数据数量循环生成

语法：

v-for=“(值,索引) in 目标结构”
v-for=“值 in 目标结构”

目标结构

可以遍历数组/对象/数字/字符串

<body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in arr">{
  {index}} ---{
  {item}}</li>
      </ul>
      <hr />
      <ul>
        <li v-for="obj in stuArr">
          {
  {obj.name}}---{
  {obj.sex}}---{
  {obj.hobby}}
        </li>
      </ul>
      <hr />
      <div v-for="(value,key) in tObj">{
  {key}}---{
  {value}}</div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: ['aaa', 'bbb', 'ccc', 'ddd'],
        stuArr: [
          {
            id: 1001,
            name: '孙悟空',
            sex: '男',
            hobby: '唱歌',
          },
          {
            id: 1002,
            name: '猪八戒',
            sex: '男',
            hobby: '背媳妇',
          },
        ],
        tObj: {
          name: '小妞',
          age: 12,
          class: '1班',
        },
      },
      methods: {},
    })
  </script>
</html>

vue数据监听-key的作用：

1、数组翻转 2、数组截取 3、更新值

数组变更方法，就会导致v-for更新，页面更新

(push,pop,shift,unshift,splice,sort,reverse)
数组非变更方法，返回新数组，不会导致v-for更新，可采用覆盖数组或this.$set

（filter，concat,slice）

  <body>
    <div id="app">
      <ul>
        <li v-for="(val,index) in arr" :key="index">{
  {val}}</li>
      </ul>
      <button @click="revBtn">数组翻转</button>
      <button @click="sliceFn">截取前3个</button>
      <button @click="updateFn">更新第一个元素值</button>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [4, 3, 2, 1, 4, 5, 7],
      },
      methods: {
        revBtn() {
          // 数组翻转 可以让v-for更新
          this.arr.reverse()
          // console.log(this.arr)
        },
        sliceFn() {
          // 数组slice 不会造成v-for更新
          // slice不会改变原数组
          // this.arr.slice(0, 3)
          // console.log(this.arr)

          // 解决v-for更新，覆盖原始数组
          let newArr = this.arr.slice(0, 3)
          this.arr = newArr
        },
        updateFn() {
          // 更新某个值的时候  v-for是监测不到的
          this.arr[0] = 1999

          // 解决  this.$set
          // 参数1  更新目标结构(对象/数组)
          // 参数2  更新位置
          // 参数3  更新值

          this.$set(this.arr, 0, 1999)
        },
      },
    })
  </script>

v-for如何更新DOM呢：

在这里插入图片描述

真实DOM：

document对象上，渲染到浏览器上显示的标签

在这里插入图片描述

虚拟DOM：

本质是保存节点信息，属性和内容的一个js对象

在这里插入图片描述

内存中虚拟DOM比较：

内存中比较变化的部分，然后给真实DOM打补丁(更新)

在这里插入图片描述

虚拟DOM好处：

提高DOM更新的性能，不频繁操作真实的DOM,在内存中找到变化的部分，更新真实的DOM（打补丁）

问题:

新的虚拟DOM根元素，或者属性变化，如何更新
具体如何比较新旧虚拟DOM

diff算法：

diff算法是通过同级比较  来比较新旧虚拟dom
根元素变化   删除重新建立整个dom树
根元素未变  属性改变   DOM复用 只更新属性

同级比较，根元素变化-整个dom树删除重建：

在这里插入图片描述

同级比较，根元素不变-属性改变更新属性：

在这里插入图片描述

标签内子元素/内容改变：

无key：

从第二个往后更新内容–性能不高

在这里插入图片描述

有key，值为索引：

有key属性，基于key的来比较新旧虚拟dom。移除key不存在元素

在这里插入图片描述

有key，key值唯一：

在这里插入图片描述

vue基础-动态class：

使用v-bind给标签class设置动态的值

语法：

:class=“{类名:布尔值}”

<style>
      .red_str {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
         :class="{类名:布尔值}"
         场景:  vue 变量控制标签是否应该有类名
       -->
      <p :class="{'red_str':bool}">动态class</p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
      },
    })
  </script>

vue基础-动态style：

给标签动态设置style的值

语法:

:style=“{css属性:值}”

  <body>
    <div id="app">
      <!-- 

        语法:

:style="{css属性:值}"
       -->

      <p :style="{backgroundColor:colorStr,color:str,border:borStr}">
        动态style
      </p>

      <p :style="{'background-color':colorStr,color:str,border:borStr}">
        动态style
      </p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        colorStr: 'red',
        str: '#fff',
        borStr: '5px solid blue',
      },
    })
  </script>

vue过滤器：

定义使用：

转换格式，过滤器就是一个函数，传入值返回处理后的值

过滤器只能用在插值表达式和v-bind表达式

场景：

字母转大写：输入 hello 输出 ‘HELLO’
字符串翻转输入’hello world’ 输出 ’dlrow olleh‘
时间戳转换为时间日期格式

语法：

全局： Vue.filter(‘过滤器名’,(值)=>{return 返回处理后的值})
局部: filters:(过滤器名字,(值)=>{return 返回处理后的值})

<body>
    <div id="app">
      <p>原来的样子:{
  {msg}}</p>
      <!-- 
        2:过滤器使用
        语法：  {
  {值|过滤器名字}}
       -->
      <p>{
  {msg | toUp}}</p>
      <p>{
  {msg | reverse}}</p>
    </div>
    <hr />

    <div id="main">
      {
  {str }}
      <p>{
  {str | reverse}}</p>
    </div>
  </body>
  <script>
    // 全局过滤器 任何一个vue文件中都可以使用
    /* 
    Vue.filter("过滤器的名字",(val)=>{return 处理后的值})
    */
    Vue.filter('reverse', (val) => {
      return val.split('').reverse().join('')
    })

    var vm = new Vue({
      el: '#app',
      data: {