vue 知识点

于 2021-11-13 21:19:25 发布
阅读量891 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60378240/article/details/121309198
版权

1.了解vue,vue是什么

概念

vue是一套渐进式的 javacript 框架, 一套拥有自己规则的语法

渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

库和框架的概念

库: 封装的属性或方法 (例jquery.js)

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

开发方式

传统开发模式：基于html/css/js文件开发Vue

工程化(脚手架)开发方式：在webpack环境中开发Vue，这是最推荐, 企业常用的方式

2.脚手架-单vue文件

vue文件, 使用规则和特点:

  1. template里只能有一个根标签

  2. vue文件-独立模块-作用域互不影响

  3. style配合scoped属性, 保证样式只针对当前template内标签生效

  4. vue文件配合webpack, 把他们打包起来插入到index.html

<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

3.脚手架-清理欢迎界面

src/App.vue默认有很多内容, 可以全部删除留下框

<template>
  <div></div>
</template>

<script>
export default {

}
</script>

<style>

</style>

4.Vue语法-插值表达式

又叫: 声明式渲染/文本插值/大胡子语法

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

5.MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计).

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

    • M： model数据模型 (data里定义)

    • V： view视图 （页面标签）

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

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

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

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

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

6.Vue指令-v-bind动态属性

 vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

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

  • 语法：v-bind:属性名="vue变量"

  • 简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

 7.Vue指令-v-on事件绑定

  • 语法

    • v-on:事件名="methods中的函数"

    • v-on:事件名="methods中的函数(实参)"

  • 简写: @事件名="methods中的函数"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

 8.Vue指令-v-on事件对象

  • 语法:

    • 无传参, 通过形参直接接收

    • 传参, 通过$event指代事件对象传给事件处理函数

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

9.Vue指令-v-on修饰符

  • 语法:

    • @事件名.修饰符="methods里函数"

      • .stop - 阻止事件冒泡

      • .prevent - 阻止默认行为

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

 10.Vue指令-v-on按键修饰符

  • 语法:

    • @keyup.enter - 监测回车按键

    • @keyup.esc - 监测返回按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

11.Vue指令-v-model双向绑定1

  • 语法: v-model="vue数据变量"

  • 双向数据绑定

    • 数据变化 -> 视图自动同步

    • 视图变化 -> 数据自动同步

  • 最后演示: 用户名绑定 - Vue内部是MVVM设计模式

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签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="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: ""
    }
  }
};
</script>

12.Vue指令-v-model双向绑定2

  • 在复选框使用(重点: 有区别)

  • 在单选框使用

  • 在文本域使用

<template>
  <div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <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="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  }
};
</script>

13.Vue指令-v-model修饰符

  • 语法:

    • v-model.修饰符="vue数据变量"

      • .number 以parseFloat转成数字类型

      • .trim 去除首尾空白字符

      • .lazy 在change时触发而非inupt时

<template>
  <div>
    <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="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用

14.Vue指令-v-html

  • 语法:

    • v-html="vue数据变量"

  • 注意: 会覆盖插值表达式

<template>
  <div>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

 15.Vue指令-v-show和v-if

  • 语法:

    • v-show="vue变量"

    • v-if="vue变量"

  • 原理

    • v-show 用的display:none隐藏 (频繁切换使用)

    • v-if 直接从DOM树上移除

  • 高级

    • v-else使用

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>

 总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏

16.Vue指令-v-for

  • 语法

    • v-for="(值变量, 索引变量) in 目标结构"

    • v-for="值变量 in 目标结构"

  • 目标结构:

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

  • 注意:

    v-for的临时变量名不能用到v-for范围外

    同级标签的key值不能重复

 遍历数组

<template>
  <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"]
  }
}
</script>

遍历数组内对象

<template>
  <div id="app">
      <!-- 省略其他 -->
      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // ...省略其他
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        }
      ]
    }
  }
}
</script>

17.Vue基础_v-for更新监测

口诀:

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

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

 

<template>
  <div>
    <ul>
      <li v-for="(val, index) in arr" :key="index">
        {{ val }}
      </li>
    </ul>
    <button @click="revBtn">数组翻转</button>
    <button @click="sliceBtn">截取前3个</button>
    <button @click="updateBtn">更新第一个元素值</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: [5, 3, 9, 2, 1]
    }
  },
  methods: {
    revBtn(){
      // 1. 数组翻转可以让v-for更新
      this.arr.reverse()
    },
    sliceBtn(){
      // 2. 数组slice方法不会造成v-for更新
      // slice不会改变原始数组
      // this.arr.slice(0, 3)

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

      // 解决-this.$set()
      // 参数1: 更新目标结构
      // 参数2: 更新位置
      // 参数3: 更新值
      this.$set(this.arr, 0, 1000)
    }
  }
}
</script>

<style>

</style>

这些方法会触发数组改变, v-for会监测到并更新页面

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

这些方法不会触发v-for更新

  • slice()

  • filter()

  • concat()

 注意: vue不能监测到数组里赋值的动作而更新, 如果需要请使用Vue.set() 或者this.$set(), 或者覆盖整个数组

 总结: 改变原数组的方法才能让v-for更新

 

18.Vue基础_v-for就地更新

 v-for 的默认行为会尝试原地修改元素而不是移动它们。

 

<template>
  <div>
    <ul>
      <li v-for="(val, ind) in arr" :key="ind">
        {{ val }}
      </li>
    </ul>
    <button @click="btn">下标1位置插入新来的</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      arr: ['老大', "老二", '老三']
    }
  },
  methods: {
    btn(){
      this.arr.splice(1, 0, '新来的')
    }
  }
}
</script>

<style>

</style>

19.Vue基础_虚拟DOM

 .vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 在生成真实DOM片段, 才会渲染显示到真实DOM页面上

  1. 内存中生成一样的虚拟DOM结构(==本质是个JS对象==)

    因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了

    比如template里标签结构

<template>
    <div id="box">
        <p class="my_p">123</p>
    </div>
</template>

 对应的虚拟DOM结

  1. 以后vue数据更新

    • 生成新的虚拟DOM结构

    • 和旧的虚拟DOM结构对比

    • 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

==好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)==

==好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)==

20.Vue基础_key作用

无key, 就地更新

有key为索引, 就地更新

有key为id, 对比新旧DOM, 无则创建/删除

 

无key - 就地更新

v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

 

<ul id="myUL">
    <li v-for="str in arr">
        {{ str }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>
export default {
    data(){
        return {
            arr: ["老大", "新来的", "老二", "老三"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '新来的')
        }
    }
};

旧 - DOM结构 和 新 - DOM结构 对比过程

 

 

 性能不高, 从第二个li往后都更新了

 

有key - 值为索引 - 就地更新

  • 还是就地更新

因为新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的

 

<ul id="myUL">
    <li v-for="(str, index) in arr" :key="index">
        {{ str }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>
export default {
    data(){
        return {
            arr: ["老大", "新来的", "老二", "老三"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '新来的')
        }
    }
};

key为索引-图解过程 (又就地往后更新了)

 

 

  1. v-for先循环产生新的DOM结构, key是连续的, 和数据对应

  2. 然后比较新旧DOM结构, 找到区别, 打补丁到页面上

    最后补一个li, 然后从第二个往后, 都要更新内容

口诀: key的值有id用id, 没id用索引  

有key - 值为id - 性能最高

key的值只能是唯一不重复的, 字符串或数值

v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签

新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建

旧DOM结构的key, 在新的DOM结构里没有了, 则==移除key所在的标签==

 

<template>
  <div>
    <ul>
      <li v-for="obj in arr" :key="obj.id">
        {{ obj.name }}
        <input type="text">
      </li>
    </ul>
    <button @click="btn">下标1位置插入新来的</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '老大',
          id: 50
        },
        {
          name: '老二',
          id: 31
        },
        {
          name: '老三',
          id: 10
        }
      ],
    };
  },
  methods: {
    btn(){
      this.arr.splice(1, 0, {
        id: 19, 
        name: '新来的'
      })
    }
  }
};
</script>

<style>
</style>

 总结: 不用key也不影响功能(就地更新), 添加key可以提高更新的性能

 

21.Vue基础_动态class

  • 语法:

    • :class="{类名: 布尔值}"

<template>
  <div>
    <!-- 语法:
      :class="{类名: 布尔值}"
      使用场景: vue变量控制标签是否应该有类名
     -->
    <p :class="{red_str: bool}">动态class</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bool: true
    }
  }
}
</script>

<style scoped>
  .red_str{
    color: red;
  }
</style>

 总结: 就是把类名保存在vue变量中赋予给标签

 

  • 语法

    • :style="{css属性: 值}"

 

<template>
  <div>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

<style>

</style>

总结: 动态style的key都是css属性名

 

22.Vue计算属性-缓存

 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

 

 

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

总结: 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

 

Vue计算属性-完整写法

 语法:

 

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

需求:

  • 计算属性给v-model使用

页面准备输入框

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
    完整语法:
    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }
*/
export default {
    computed: {
        full: {
            // 给full赋值触发set方法
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

<style>

</style>

 总结: 想要给计算属性赋值, 需要使用set方法

 

23.Vue侦听器-watch

 可以侦听data/computed属性值改变

 语法:

 

watch: {
	"被侦听的属性名" (newVal, oldVal){
	
    }
}

完整例子代码:

 

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

总结: 想要侦听一个属性变化, 可使用侦听属性watch

 

Vue侦听器-深度侦听

 侦听复杂类型

语法:  

 

watch: {
    "要侦听的属性名": {
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

完整例子代码:

 

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true
    }
  }
}
</script>

<style>

</style>

 总结: deep深度侦听, handler固定方法触发

 

Asen_web
关注
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5963
一个前端小白的自学之路，完结之日即成为大白之日。
Vue面试题及Vue知识点整理
10-17
主要介绍了Vue面试题及Vue知识点整理，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
整理vue的一些基本知识点
weixin_44237840的博客
05-26 724
基础篇 一、说说你对MVVM的理解 它采用双向绑定 Model-View-ViewModel的缩写，Model代表数据模型， View代表UI组件，ViewModel将View和Model关联起来 数据会保存到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知ViewModel层更新数据 注【这里还需要了解MVC/MVP/MVVM区别】 MVC【M（Model）V（View）C（Controller）】: 所有的通信都是单向的。 View：视图-- 用户界面，是直接面向用户界面的视图层
Vue知识点汇总
编程界明世隐的博客
04-09 2195
一、MVVM的理解 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View...
Vue 知识点总结
GillianQi
06-21 441
1. MVVM? 对比MVC   MVVM(Model-View-ViewModel):    Model: 数据模型，可以定义数据修改和操作的业务逻辑　　　View: UI组件，将数据组件转换成UI展示　　　ViewModel: 同步View和model的对象　　　View和Model没有直接的联系，通过ViewModel进行交互，　ViewModel通过双向数据绑定把View层和Model层联...
VUE重点知识介绍
liuerchong的博客
08-18 674
vue基础-一重点 01-基础-vue是什么? vue.js 是前端js框架 库和框架的区别(方法是否需要自己来调用) 02-基础-为什么学vue 传统技术栈无法解决复杂项目的业务逻辑 企业需求 vue最容易上手 03-基础-vue能做什么 几乎没有DOM操作 适合SPA项目开发 04-基础-vue特点 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML 05-基础-一些链接 vue官网->收藏 06-基础-vue三种安装方式 本地文件 cdn引入 npm i vue 07-基础-H
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
Vue知识点串讲.md
07-10
Vue知识点串讲.md
vue知识点总结.md
03-01
vue知识点总结.md
vue知识点思维导图.png
02-04
vue知识点
Vue常见知识点
web分享客的博客
09-17 1031
MVVM是什么？ MVVM是Model-View-ViewModel的缩写。Model代表数据模型，View代表UI页面组件，用于展现给用户的，ViewModel是监听模型数据的改变和控制视图行为、处理用户交互，是连接Model和View层次的交叉点。 在MVVM架构下，View和Model之间没有直接的联系，二十通过ViewModel进行交互，Model和ViewModel之间的交互是双向的...
VUE常见知识点整理
SUN_O_MOON的博客
12-11 293
#el-select 绑定对象值 <el-select v-model="data" placeholder="请选择" size="small" value-key="id" clearable> <el-option v-for="(item,index) in channelData" :key="item.id" ...
Vue面试中，经常会被问到的面试题/Vue知识点整理
weixin_34310127的博客
09-10 9132
看看面试题，只是为了查漏补缺，看看自己那些方面还不懂。切记不要以为背了面试题，就万事大吉了，最好是理解背后的原理，这样面试的时候才能侃侃而谈。不然，稍微有水平的面试官一看就能看出，是否有真才实学还是刚好背中了这道面试题。（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-V...
Vue重要知识小结
Tybyqi的博客
10-24 510
vue sync修饰 （1）双向数据绑定，父子组件之间信息的交互  1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件，然后在父组件中通过@进行监听，那么可以实现通信过程  2⃣️使用简单的方式传递，如上图中emmit(updete:title),然后在v-bind:title.sync='title',从而实现双向数据绑定 （2）双...
Vue入门知识点—初识vue
王伟伟的博客
04-20 533
Vue入门知识点—初识vue本博客所有内容为博主学习之时自整理，算不上什么干货，如有错误欢迎大家批评指正Vue介绍 Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应
vue重要知识点
qq_40994735的博客
09-27 5635
1 基础部分 1.1 v-if与v-show的区别 v-if隐藏式隐藏节点，v-show隐藏式css display：none 频繁切换显示与隐藏建议使用v-show，次数少建议使用v-if 1.2 watch与computed的区别 watch监听数据变化，computed从现有的数据计算新的数据 watch没有缓存，而computed有缓存 watc不能异步，而computed可以异步 watch是一对多的关系，而computed是多对一关系 1.3 watch的深度监听 handler 还有
vue--知识点总结
任性的wo的博客
09-18 2318
vue--知识点总结： 目录 1. v-if与v-show的区别 2. Vue的双向数据绑定原理 3.  Vue的生命周期 4. 封装 vue 组件的过程  5. 理解vuex 6.vue页面间传值 1. v-if与v-show的区别 相同点：v-if与v-show都可以动态控制dom元素显示隐藏 不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该...
Vue重点
weixin_34097242的博客
01-03 193
2019独角兽企业重金招聘Python工程师标准>>> ...
vue重点
qq_36981190的博客
07-20 206
1、生命周期 created vue实例创建，data 数据的初始化，属性方法运算，事件回调 motunted 挂载完成，模板中的HTML渲染到HTML页面中 updated 跟新数据并渲染htmlDOM树 destroyed 销毁实例，事件，回调函数机制移除 ...
vue知识点pdf分享
最新发布
10-25
Vue.js是一种用于构建用户界面的JavaScript框架，由Evan You于2014年创建。它采用了响应式的数据绑定和组件化的开发方式，使得开发者能够更轻松地构建高效、可维护的前端应用程序。 在Vue的知识点中，首先需要了解Vue的基本概念和核心特性。Vue的核心是响应式数据绑定，它允许开发者将数据与DOM元素进行绑定，使得数据的变化能够自动反映到界面上。此外，Vue还提供了指令、计算属性、监听器等功能，方便开发者处理复杂的数据逻辑和交互行为。 另外，Vue的组件化开发模式也是非常重要的知识点。通过将应用程序拆分成一系列独立的组件，开发者可以更好地管理和复用代码。Vue提供了组件的定义、组件通信、组件生命周期等功能，方便开发者构建可扩展的应用程序。 除了基本的概念和核心特性，Vue的知识点还包括路由管理、状态管理、动画效果等方面。路由管理允许开发者通过URL的变化来实现页面之间的切换和导航，使得应用程序可以呈现更好的用户体验；状态管理用于管理应用程序的全局状态，方便各个组件之间的数据通信和共享；动画效果可以为应用程序增加交互性和视觉效果。 综上所述，一个完整的Vue知识点的PDF分享应当包括Vue的基本概念、响应式数据绑定、组件化开发模式、路由管理、状态管理和动画效果等方面的内容。通过学习这些知识点，开发者可以更好地掌握Vue的使用方法，提高前端开发的效率和质量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值