Vue2知识点总结及学习心得

林无静树898

已于 2022-12-16 17:17:36 修改

阅读量297

点赞数

文章标签：学习 vue.js javascript

于 2022-11-26 11:12:09 首次发布

本文链接：https://blog.csdn.net/weixin_60537353/article/details/128049437

版权

Vue2中文文档

1.模板语法

插值

   <body>
     <div class="app">
       <!-- 模板语法中支持表达式，不支持语句
       表达式：会生成一个值，比如a,a+b,demo(1),ok ? 'YES' : 'NO'
       就是我们可以拿一个变量在表达式左边接到值,可以用+连接-->
       <h1> Hello {
   {
   address+name}},{
   {
   name}},{
   {
   1+1+num}}</h1>
       <h2>{
   {
   school.name}}</h2>
     </div>
     <script>
       // 阻止Vue在启动时生成生产提升
       Vue.config.productionTip = false
       var app = new Vue({
   
         el: '.app',
         // data中用于存储数据，数据供el所指定的容器去使用,data中数据改变，页面也会随之改变
         data: {
   
           name: 'Vue!',
           address: '北京',
           num: 2,
           school: {
   
             name: '国防科大'
           }
         }
       })

指令

 <div id="root">
    <h1>插值语法</h1>
    <h3>你好，{
     {
     name}}</h3>
    <hr>
    <h1>指令语法</h1>
    <a v-bind:href="url">点我去B站</a>
    <!-- 指令简写 -->
    <a :href="url.toUpperCase()">点我去B站</a>
    <!-- 动态参数 -->
    <a :[att]="url">动态参数</a>
    <hr>
    <h1>dom事件</h1>

  </div>
  <script>
    new Vue({
     
      el: '#root',
      data: {
     
        name: 'jact',
        url: 'https://www.bilibili.com/',
        att: 'href'
      }
    })

2.el和data两种写法

<div id="root">
    <h1>{
   {
   name}}</h1>
  </div>
  <script>
    const v = new Vue({
   
      el: '#root',
      /* data: {
      //   name: '对象式data写法'
      } */
      //data写法2函数式
      //vue管理的函数不要写箭头函数，否则this就不再是Vue实例了
      data: function () {
   
        return {
   
          name: '函数式data写法'
        }
      },
    })
    console.log(v);
    // setTimeout(() => {
   
    //   v.$mount('#root');el第2种写法
    // }, 1000)
  </script>

3.数据绑定

v-bind ⭐️

拿到的是“”双引号里面的值,没加则拿到的是字符串

  <!-- v-bind数据只能从data流向页面 -->
    <h2>单向数据绑定：<input type="text" :value="name"></h2>
    <!-- v-module只能应用在表单类元素上，对应的value属性 -->
    <h2>双向数据绑定：<input type="text" v-model:value="name"></h2>
    <h2>双向数据绑定简写：<input type="text" v-model="name"></h2>

v-model

v-model绑定的值不能是props传过来的值，因为props是不可以修改的
props传过来的若是对象类型的值，只要不直接修改对象而是修改对象中的属性时Vue不会报错，但不推荐这样做

4.MVVM模型

M—model(模型)：对应data中的数据

V–View(视图)：模板代码

VM–ViewModel(视图模板):Vue实例对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jSW2F9R4-1669432222699)(D:\新的开始md\Vue\image\1.png)]

5.Object.defineProperty

基本使用

object.defineProperty(obj,prop,descriptor)

只有用这个方法加进去的才受控制

obj:必需。目标对象
prop:必需。需定义或修改的属性的名字

descriptor:必需。目标属性所拥有的特性

value:设置属性的值
writable:值是否可以重写修改。true/false,默认为false
enumerable:目标属性是否可以被枚举。true/false,默认为false
configurable:目标属性是否可以被删除或是否可以再次修改特性true/false，默认为false
这里id是本身有的，所以不受控制

  var obj = {
     
      id: 1,
      pname: '小米',
      price: 1999
    };
    // 有则修改，无则添加
    Object.defineProperty(obj, 'num', {
     
      value: 1000,
      // 因为writable默认为false
    });
    obj.num = 3;
    obj.id = 3;
    console.log(obj);//id:3,num:1000

getter和setter数据代理

  let number = 18;
      let person = {
   
        name: '张三',
        sex: '男'
      }
      Object.defineProperty(person, 'age', {
   
        /*- value:设置属性的值
        - writable:值是否可以重写修改。true/false,默认为false
        - enumerable:目标属性是否可以被枚举。true/false,默认为false
        - configurable:目标属性是否可以被删除或是否可以再次修改特性true/false，默认为false*/

        //当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值  
        get() {
   
          // 无论你咋修改person的值它都是取number
          console.log('有人读取了age属性');
          return number
        },
        //当有人修改age属性时，set函数就会被调用，且会收到修改的具体值
        set(value) {
   
          console.log('有人修改了age属性,且值是' + value);
          number = value;
        }
      })

简单数据代理

  let obj = {
   
      x: 100
    }
    let obj2 = {
   
      y: 100
    }
    Object.defineProperty(obj2, 'x', {
   
      // 当有人读取Obj2的x属性时，就会调用get函数，且返回的值会给x
      get() {
   
        return obj.x
      },
      //当有人修改Obj2的x属性时，set函数就会被调用，且会收到修改的具体值
      set(value) {
   
        obj.x = value
      }
    })

Vue中的数据代理

也是利用Object.defineProperty中的getter和setter

<h1 id="main">学校名称: {
   {
   name}} <br>
    校址: {
   {
   address}}</h1>
  <script>
    const vm = new Vue({
   
      el: '#main',
      data: {
   
        name: '井冈山大学',
        address: '江西吉安'
      }
    })
    console.log(vm);
    console.log(vm.address === vm._data.address);//true,江西吉安

6.事件处理⭐️

事件回调要写到methods对象上,this.name可以拿到data里面的name数据

1.使用v-on:xxx或者@click绑定事件，xxx是事件名，2.事件回调要写到methods对象上，最终会在vm中，3.this指向vm或组件实例对象,4.@click='demo’和=demo($event)效果一致

<div id="root">
    <h2>欢迎来到{
   {
   name}}学习</h2>
    <button @click="showInfo">不传参</button>
    <button v-on:click="showInfo2(66)">传参</button>
    <button @click="showInfo3('刘总',$event)">传2个参数和evert</button>
  </div>
  <script>
    const vm = new Vue({
   
      el: '#root',
      data: {
   
        name: '武当派',
      },
      methods: {
   
        showInfo(e) {
   
          console.log(e.target);
          console.log(this === vm);//true
        },
        showInfo2(number) {
   
          console.log(number);
        },
        showInfo3(str, e) {
   
          console.log(str);
          console.log(e);
        }
      },
    })

Vue中的事件修饰符

还可以连着使用.stop.prevent，可以看文档

prevent：阻止默认事件(常用)
stop：阻止事件冒泡(常用)
once：事件只触发一次(常用)
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive:事件的默认行为立即执行，无需等待事件回调执行完毕

对图片的监听

<!-- @Load监听图片是否加载完 -->

    <img v-lazy='showImage' @load="imageLoad">

 methods:{
   

      imageLoad(){
   

         this.$bus.$emit('itemImageLoad')

Vue中常用键盘事件

enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

<div id="root">
   <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
 </div>
 <script>
   new Vue({
     
     el: '#root',
     methods: {
     
       showInfo(e) {
     
         console.log(e.target.value);
       }
     },
   })

7.method与computed的区别

computed计算属性会有缓存，依赖数据改变才会重新触发，下面打印一个，methods打印3次

computed⭐️

计算属性不要加(),是靠返回值拿东西的;
刚加载页面初始化自动触发一次，然后依赖数据发生改变也会触发
如果值只读取，则可以简写，如果还要修改则得写setter

  <span>{
   {
   fullName}}</span><br>
    <span>{
   {
   fullName}}</span><br>
    <span>{
   {
   fullName}}</span>
  </div>
  <script>
    new Vue({
   
      el: '#root',
      data: {
   
        user: '刘',
        name: '总'
      },
      computed: {
   
        fullName() {
   
          console.log('444');
          return this.user + '-' + this.name
        }
      }
      // methods: {
   
      //   fullName() {
   
      //     console.log('444');
      //     return this.user + '-' + this.name
      //   }
      // },

8.watch侦听器

Vue自身可以检测对象内部值的改变，但是watch默认不行，得加deep:true

配合本地存储贼好用

import {
    setItem, getItem } from "@/utils/storage";
export default {
   
  components: {
    searchHistory, SearchSuggest, SearchResult },
  name: "Search",
  data() {
   
    return {
   
      searchText: "",
      isResultSHow: false, //控制搜索结果的展示
      searchHistories: getItem("SEARCH-HISTORY") || [], //搜索的历史记录
    };
  },
  watch: {
   
    searchHistories(newVal) {
   
      setItem("SEARCH-HISTORY", newVal);
    },
  },

<div id="root">
    <h1>今天天气很{
   {
   info}}</h1>
    <button @click="change">切换天气</button>
    <hr>
    <h3>a的值是:{
   {
   numbers.a}}</h3>
    <button @click="numbers.a++">点我让a+1</button>
  </div>
  <script>

    const vm = new Vue({
   
      el: '#root',
      data: {
   
        isHot: true,
        numbers: {
   
          a: 1,
          b: 1
        }
      },
      computed: {
   
        info() {
   
          return this.isHot ? '炎热' : '凉爽';
        }
      },
      methods: {
   
        change() {
   
          this.isHot = !this.isHot
          //console.log(vm);
          //写法2
          // this.$watch('isHot', {
   
          //   deep: true,
          //   handler() {
   
          //     console.log('f方法2');
          //   }
          // })
        },
      },
      watch: {
   
        isHot: {
   
          //immediate: true,初始化时handler调用一下
          handler(news, olds) {
   
            console.log('isHot被修改了');
            console.log(news, olds);
          }
        },
        numbers: {
   
          // 监听多级结构中某个属性的变化
          deep: true,
          handler() {
   
            console.log('对象发生了变化');
          }
        }
      }
    })

watch简写

不需要额外参数只有handler时可以简写比如监听isHot
this指向vm
isHot(news){
   
  console.log(news);}

watch与computed的区别

比如整个定时器，用watch，computed返回不了
异步计算优先用watch，其他都用computed

关键字搜索案例⭐️

watch实现
```
<div id<
```

最低0.47元/天解锁文章