初学vue的有福了

原创已于 2023-06-29 15:52:11 修改 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-04-24 17:20:37 首次发布

本文介绍了Vue.js的基础知识，包括如何从官网或CDN引入库，创建Vue实例并挂载到DOM元素，以及数据绑定的各种方式如v-model、v-bind和v-on。同时，详细讲解了v-model的双向数据绑定原理和数据代理的概念，以及事件监听和事件修饰符的使用。此外，还提到了计算属性和深度监听在响应式数据变化中的应用。

初学：从官网引入vue.js，或者用cdn引入https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js即可开始我们的学习之路。

1.第一步去创建一个实例，并且让我们的vue实例去挂载到这个容器上边

示例：<div id="root"></div>
var vm = new Vue({
      // 指定一个容器
      el: '#root',
     //当前已经进行了挂载了
)}

如果存在俩个容器的情况，第一个容器解析完之后，第二个将不会再去解析。一个容器只可以被一个new Vue实例接管。存在俩个vue实例的话，按照js单线程顺序，只会第一个接管。（只能存在一对一，不能存在多对多）

2.简单的v-model数据绑定，以及插值语法

<!-- 准备一个容器 -->
  <div id="qwer">
    <!-- 通过v-text指令将数据渲染到页面 -->
    <h1 v-text="msg"></h1>
    <!-- 通过v-html指令将数据渲染到页面 -->
    <h1 v-html="msg"></h1>
    <!-- 通过v-bind指令将数据渲染到页面 -->
		<!-- v-bind既是插值语法，也可简写： -->
    <h1 v-bind:title="msg"></h1>
		<!-- 简便写法 -->
    <h1 :title="msg"></h1>
    <!-- 通过v-on指令将数据渲染到页面 -->
    <h1 v-on:click="showMsg">点击我</h1>
    <!-- 通过v-model指令将数据渲染到页面 -->
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
    //这里用双括号就是v-model的原理
    //数据绑定
  </div>
  <script>
    var vm = new Vue({
      el: '#qwer',
      // 指定数据
      data: {
        msg: 'hello world'
      },
      // 指定方法
      methods: {
        showMsg() {
          alert(this.msg)
        }
      }
    })
  </script>

Vue模板中的语法有2大类

1.插值语法

功能：用于解析标签的内容

写法 {{xxx}},xxx是js的表达式，可以直接读取到data中的所有属性

2.指令语法

功能：用于解析标签（包括标签属性，标签体内容，绑定事件等等）

举例：v-bind:src="xxx",简写为 :src="xxx"，同理xxx也要写js表达式

可以直接读取到data中的所有属性。

Vue中有2种数据绑定的方法：

1.单向绑定(v-bind):数据只可以从data中流向页面。

2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

3.mvvm

m(model):是表示data中的值

v(view)：视图容器

vm(viewModel):连接他们俩个的桥梁

数据发生变化，视图也要跟着变化。因为vm帮我做了很多繁重的事情

可以用vm去接收我这个vue实例对象

4.何为数据代理

<script>
  // 通过一个对象代理另一个对象中得属性的操作  读和写
  let obj = {
    a:100
  }
  let obj1 = {
    b:500
  }
  //用原型去让obj1去代理obj的a
  Object.defineProperty(obj1,"a",{
    get(){
      return obj.a
    },
    set(val){
      obj.a = val
    }
  })
  </script>

5.Vue中的数据代理

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处:

更加方便了操作data中的数据

3.基本原理：

通过Objet.defineProperty()把data中的对象中所有的属性加到vm上

为每一个添加到vm的属性，都指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

4.在log里边的vm（_data）是数据劫持，为了方便修改data中的数据采取做的接触

6.事件的基本使用

 <div id="root">
    <!-- vue中的点击事件 -->
    <button v-on:click="showInfo">点我会有提示信息</button>
    <!-- 简写@click -->
    <button @click="showInfo">点我会有提示信息111</button>
    <!-- 传参数进来 -->
    <button @click="showInfochuancan(8520)">点我会有提示信息</button>
  </div>
  <script>
    new Vue({
      el: "#root",
      //因为咱们这个方法是用vue实例来提供的，必须要用methods这个方法
      methods: {
        showInfo() {
          alert('Hi there')
        },
        showInfochuancan(number) {
          console.log(number);
        }
      },
    })
  </script>

事件的基本使用:

1.使用v-on:xxx 或者@xxx来绑定事件，其次xxx是事件名字。

2.事件的回调需要配置在methods对象中，最终会在vm上。

3.methods中配置的函数，不要再使用箭头函数，不然this指向就不是vm了。会变成全局指向。

4.methods中配置的函数，都是被vue所管理的函数，this的指向是vm或者组件实例对象

7.事件修饰符

// Vue中的事件修饰符
            // .stop 阻止冒泡
            // .prevent 阻止默认事件
            // .capture 添加事件侦听器时使用事件捕获模式
            // .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
            // .once 事件只触发一次
            // .passive 事件的默认行为不会被阻止，并且可以在子类或方法调用链上进行优化。不过，在实现者在页面加载

8.键盘事件

1.vue中常用的按键别名：

回车=>enter

删除=>delete (捕获“删除”和“退格”键)

退出=> esc

换行=>tab

上=>up

下=>down

左=>left

右=>right

9.计算属性

计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineProperty()方法提供的getter和setter方法
3.get函数什么时候调用？
  1.初次读取时会执行一次
  2.当依赖的数据发生变化时，会再次执行
  3.优势：与methode实现相比，内部有缓存机制（复用），效率更高，调试方便

<body>
  <div id="root">
   姓:<input type="text" v-model:value="firstName"> <br/><br/>
   名:<input type="text" v-model:value="lastName"> <br/><br/>
   全称 <span>{{fullname}}</span>
  </div>
  <script>
    new Vue({
      el: "#root",
      data() {
        //在vue中data里边的就是属性，前边是属性名字，后边是属性值
        return {
          firstName: '张',
          lastName: '三'
        }
        
      },
      //把他们俩个需要合并这一步操作，就是计算属性
      computed:{
          //需要一个完整计算的方法
          fullname:{
            //get有什么作用，当有人读取fullname这个属性的时候，就会自动调用get方法，并且把他的值作为fullname的返回值
            //get什么时候会调用？
              //1.初次读取fullname
              //2.所依赖的数据发生变化时
            get(){
              return this.firstName+ "+" + this.lastName
            }
          }


          //简写形式，直接把fullname作为一个参数回调出去。在计算属性之中
          fullname(){
            return this.firstName+ "+" + this.lastName
          }
      },
    })
  </script>
</body>

10.监视属性

监视属性watch:

1.当被监视的属性变化时，回调函数自动调用，并且进行相关的操作

2.监视的属性必须存在，才能进行监视

3.监视的俩种写法

（1）new Vue时传入watch配置

（2）通过vm.$watch进行监视

watch:{
        //想要监视谁 监视ishot
        ishot:{
          //handler什么时候调用呢？当ishot发生改变的时候调用
          //handler里边有俩个值，一个新值，一个旧值
          handler(newValue,oldValue){
            console.log("ishot被改变",newValue,oldValue);
          }
        },
        //不止可以监听设置的属性，也可以监听其他的属性
        //这个是计算属性的属性
        info(newValue,oldValue){
          console.log(newValue,oldValue);
        }
      },

//要拿变量来接收vue才可以用vm
vm.$watch('ishot',{
      handler(newValue,oldValue){
        console.log(newValue,oldValue);
      }
    })

11.深度监听

data中存在一个这样的

问题：要如何监听到a呢？

data() {
        //在vue中data里边的就是属性，前边是属性名字，后边是属性值
        return {
          NUmbers:{
            a:1,
            b:2
          }
        }

答：

watch:{
        //监听多级结构中的某个属性
        "NUmbers.a":{
          handler(newValue,oldValue){
						console.log(newValue,oldValue);
            console.log("a被改变了");
          }
        },
}

问：如何拿到NUmbers.b的改变呢？

//监听多级结构中的每一个属性
//配置deep:true可以检测对象内布值改变
        NUmbers:{
          deep:true,
          handler(newValue,oldValue){
            console.log(newValue,oldValue);
            console.log("");
          }
        },

vue中的wacth默认不监听对象内部的纸改变（一层）

配置deep:true可以检测对象内布值改变

理解:监听器执行到他该走的一步时候

我们就可以在handler里边写判断

11.监听简写

 //监视属性
watch:{
	ishot(newValue,oldValue){
          console.log("ishot被改变",newValue,oldValue);
        },
}
//用vm身上的实例也可以到监听的效果
  vm.$watch('ishot',{
      handler(newValue,oldValue){
        console.log(newValue,oldValue);
      }
  })