VUE核心学习笔记

Posted 天界程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE核心学习笔记相关的知识，希望对你有一定的参考价值。

VUE数据监测的原理

  1. vue会监视data中所有层次的数据

  2. 如何检测对象中的数据？

     通过setter实现监视，且要在new Vue时就传入要检测的数据

 （1）、对象中后追加的属性，vue默认不做响应式处理

 （2）、如需给后添加的属性做响应式，请使用如下API：

 		Vue.set(target,propertyName/index, value) 或

 		this.$set(target,propertyName/index, value)

  3. 如何检测数组中的数据？

    通过包裹数组更新元素的方法实现，本质就是做了两件事：

    （1）、调用原生对应的方法对数组进行更新。

    （2）、重新解析模板，进而更新页面。

  4. 在vue修改数组中的某一个元素一定要用如下方法：

    1、使用这些API：push() 、pop() 、shift()、unshift()、splice()、sort()、reverse()

    2、Vue.set() 或 this.$set()

    特别注意：Vue.set() 和 this.$set() 不能给vm（this）或者vm的根数据对象（在这里指vm.data 或 vm._data） 添加属性

<div id="root">
  <h2>学生信息</h2>
  <button @click="student.age++">年龄+1</button><br/>
  <button @click="addSex">添加性别属性，默认值：男（测试是否能响应式添加）</button><br/>
  <button @click="student.sex = '未知'">修改性别（测试是否能响应式修改）</button><br/>
  <button @click="addFriend">在列表首位添加一个朋友</button><br/>
  <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/>
  <button @click="addHobby">添加一个爱好</button><br/>
  <button @click="updateHobby">修改第一个爱好为：开车</button><br/>
  <button @click="removeHobby">过滤掉一个爱好为：睡觉</button><br/>
  
  <h2>学生姓名：student.name</h2>
  <h2>学生年龄：student.age</h2>
  <h2 v-show="student.sex">学生性别：student.sex</h2>
  <h2>爱好：</h2>
  <ul>
    <li v-for="(h,index) in student.hobby" :key="index">
      h
    </li>
  </ul>
  
  <h2>朋友们：</h2>
  <ul>
    <li v-for="(f,index) in student.friends" :key="index">
      f.name--f.age
    </li>
  </ul>
</div>


data:
  student:
    name:'tom',
    age:18,
    hobby:['吃饭','睡觉','打豆豆'],
    friends:[ 
    id:'001',name:'Bob',age:10,sex:'男',
    id:'002',name:'Alice',age:11,,sex:'女',
    id:'003',name:'Jame',age:12,sex:'男']
   
  ,
  
,
methods:
  addSex()
    //Vue.set(this.student,'sex','男') // 第一种
    this.$set(this.student,'sex','男') // 第二种
  ,
  addFriend()
    this.student.friends.unshift(name:'jack',age:70)
  ,
  updateFirstFriendName()
     this.student.friends[0].name = '张三'
     this.student.friends[0].age = 15
  ,
  addHobby()
    this.student.hobby.push('学习')
  ,
  updateHobby()
    //this.student.hobby.splice(0,1,'开车')
    //Vue.set(this.student.hobby,0,'开车')
    this.$set(this.student.hobby,0,'开车')
  ,
  removeHobby()
    this.student.hobby = this.student.hobby.filter((h)=>
      return h !== '睡觉'
    )

收集表单数据

  1. 若：<input type="text"/>, 则v-model收集的是value值，用户输入的就是value值。

  2. 若：<input type="radio"/>, 则v-model收集的是value值，且要给标签配置value值。

  3. 若：<input type="checkbox"/>,

     1、没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

 2、配置input的value属性：

 		（1）、v-model的初始值就是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

 		（2）、v-model的初始值就是数组，那么收集的就是value组成的数组

备注：v-mdel的三个修饰符：

  • lazy：失去焦点再收集
  • number：输入字符串转为有效的数字
  • trim：输入首尾空格并过滤掉

过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单的逻辑的处理）

  • 语法：

      1、注册过滤器：Vue.filter(name,callback) 或 new Vuefilters: 

  2、使用过滤器： xxx | 过滤器名称 或者 v-bind: 属性 = “xxx | 过滤器名称”

  • 备注：

      1、过滤器也可以接收额外参数、多个过滤器也可以串联，串联的过滤器过滤的数据是前一个过滤器return的数据

  2、并没有改变原本的数据，是产生新的对应的数据

<div id="root">
<!-- 过滤器会把你需要过滤的数据默认作为第一个参数，不需要你手动传参，你手动传参会作为第二个参数-->
  <!-- 1、在插值语法里面使用过滤器  -->
  <h2>过滤时间：time | timeFormter('YYYY-MM-DD') | mySlice</h2>
  
   <!-- 2、在v-bind单向绑定数据里面使用过滤器  -->
    <h2 :attr="name | mySlice">v-bind单向绑定属性</h2>
</div>

// 全局过滤器,在全局的组件和Vue实例都可以起作用
Vue.filter('mySlice',function(value)
  return value.slice(0,4)
)

new Vue(
  data:
    time:1621561377603, // 时间戳
  ,
  // 局部过滤器，只在当前vue实例起作用
  filters:
    timeFromter(value,str="YYYY-MM-DD HH:mm:ss")
      return dayjs(value).format(str)
    
  
)

vue指令

  • v-bind ：单向绑定解析表达式，可简写为 :xxx

  • v-model：双向数据绑定

  • v-for：遍历数组、对象、字符串

  • v-on：绑定事件监听，可以简写为 @事件名称

  • v-if：条件渲染（动态控制节点是否存在）

  • v-else：条件渲染（动态控制节点是否存在）

  • v-show：条件渲染（动态控制节点是否展示）

  • v-text：

      1、作用：向其所在的节点中渲染文本内容

  2、与插值语法的区别：v-text会替换掉节点中的内容，而xxx则不会替换节点的其他内容

  • v-html：

      1、作用：向指定节点中渲染包含html结构的内容。

  2、与插值语法的区别：

  		（1）、v-html会替换掉节点中所有的内容，xxx则不会

  		（2）、v-html可以识别html结构。

  3、严重注意：v-html有安全性问题！！！

  		（1）、在网站上动态任意HTML是非常危险的，容易导致XSS攻击

  		（2）、一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

  • v-cloak：没有值，是一个特殊属性

      1、本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

  2、使用css配合v-cloak可以解决网速慢时页面展示出xxx的问题

<style>
  [v-cloak]
    display:none;
  
</style>

<body>
  <div id="root">
    <h2 v-cloak>name</h2>
  </div>
</body>

data:
  name:'test'

  • v-once：没有值

      1、v-once所在的节点在初次动态渲染后，就视为静态内容了。

  2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
    <h2 v-noce>初始化的值num</h2> // 1，不会随着按钮的点击再次变化
    <h2 >自增计算后的值num</h2> // 随着按钮点击自增
    <button @click="num++">点我num+1</button>
</div>

data:
  num:1

  • v-pre：

      1、跳过其所在节点的编译过程

  2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

vue自定义指令

练习1、定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

练习2、定义一个v-fbind指令，和v-bind功能类似，但是可以让其所绑定的input元素默认获取焦点

<div id="root">
    <h2 >当前的值：<span v-text="num"></span></h2> 
    <h2 >自增计算后的值：<span v-big="num"></span></h2> 
    <button @click="num++">点我num+1</button>
    <input type="text" v-fbind:value="n" />
</div>

data:
  num:1
,
directives:
  // big函数何时会被调用？1.指令与元素成功绑定时（初次）。2.指令所在的模板被重新解析时。
  big(element,binding)
    console.log('big')
    element.innerText = binding.value * 10
  ,
  // 当指令直接写成函数时，相当于bind与update的方法功能
  fbind:
    // 指令与元素成功绑定时
    bind(element,binding)
      element.innerText = binding.value
    ,
    //指令所在元素被插入页面时
    inserted(element,binding)
      element.focus()
    ,
    // 指令所在的模板被重新解析时
    update(element,binding)
      element.innerText = binding.value
    
  


// 全局指令
Vue.directive('fbind',
    // 指令与元素成功绑定时
    bind(element,binding)
      element.innerText = binding.value
    ,
    //指令所在元素被插入页面时
    inserted(element,binding)
      element.focus()
    ,
    // 指令所在的模板被重新解析时
    update(element,binding)
      element.innerText = binding.value
    
  )
  
  Vue.directive('big',function(element,binding)
    console.log('big')
    element.innerText = binding.value * 10
  )

自定义指令总结：

一、定义语法

1、局部指令：

	new Vue（ directives:指令名：配置对象 ） 或  new Vue（ directives:指令名：回调函数 ）

2、全局指令：

	Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)

二、配置对象中常用的3个回调：

1、bind：指令与元素成功绑定时调用

2、inserted：指令所在元素被插入页面时调用。

3、update：指令所在模板结构被重新解析时调用。

三、备注：

1、指令定义时不加v- ，但是使用时要加v-；

2、指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

3、指令内回调函数指向的this时window，不是vm

以上是关于VUE核心学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

VUE核心学习笔记

VUE核心学习笔记

VUE核心学习笔记

VUE核心学习笔记

VUE核心学习笔记

VUE核心学习笔记