初学Vue

时间:2024-10-07 07:37:31

文章目录

  • 简介
    • 特点
  • 初识
  • Vue模板语法两大类
    • 插值语法
    • 指令语法
  • 两种数据绑定方式
    • 单项绑定(v-bind)
    • 双向绑定(v-model)
  • 数据代理
  • 事件处理
    • 基本使用
    • 事件修饰符
  • 键盘事件
  • 计算属性 computed

简介

  1. 一套用于构建用户界面的渐进式JavaScript框架
    Vue可以自底向上逐层的应用

特点

  1. 采用组件化模式,提高代码复用率、且让代码更好维护。
  2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
  3. 使用虚拟DOM+优秀Diff算法,尽量复用DOM节点。

初识

  1. 创建Vue实例,传入一个配置对象
<div id="root">
   <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  // 创建vue实例
  const x = new Vue({
    el: '#root',  // el用于指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串
    data: {  // data用于存储数据,数据会自动与el中的内容进行绑定
      name: 'mq'
    }
  })
</script>
  1. vue实例和容器是一一对应的
  2. 真实开发中只有一个Vue实例,并且会配合着组件一起使用
  3. {{xxx}}中的xxx要写js表达式,并且xxx可以自动读取到data中的所有属性
  4. 一旦data中的数据发生改变,那么模版中用到该数据的地方也会自动更新
    注意:
    js表达式 & js代码(语句)
    a. 表达式
    一个表达式会生成一个值,可以放在任何一个需要值的地方
    (1) a
    (2) a+b
    (3) demo(1)
    (4) x === y ? ‘a’ : ‘b’
    b. js代码(语句)
    (1) if(){}
    (2) for(){}

Vue模板语法两大类

插值语法

功能:用于解析标签体内的内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

指令语法

功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
v-bind:href=“xxx” 或 简写为 :href=“xxx”, xxx同样要写js表达式,且可以直接读取到data中的所有属性

各类语法简写
v-bind: ===> :
v-on: ===> @
v-model:value ===> v-model

<div id="root">
    <h1>插值语法</h1>
    <h1>Hello,{{name}},{{address}}</h1>
    <hr/>
    <h1>指令语法</h1>
    <a :href="url">点我去百度</a>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

        // 创建vue实例
    const x = new Vue({
        el: '#root',  // el用于指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串
        data: {  // data用于存储数据,数据会自动与el中的内容进行绑定
            name: 'mq',
            address: '北京',
            url: 'https://www.baidu.com/'
        }
    })
</script>

两种数据绑定方式

单项绑定(v-bind)

数据只能从data流向页面

双向绑定(v-model)

数据不仅能从data流向页面,还可以从页面流向data
备注:

  1. 双向绑定一般都应用在表单类元素上(例如:input、select等)
  2. v-model:value 可以简写为v-model,因为v-model默认收集的就是value值
<div id="root">
    单向数据绑定: <input type="text" name="" id="" :value="name"><br>
    双向数据绑定: <input type="text" v-model="name"/>
</div>
<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  // 创建vue实例
  const x = new Vue({
      el: '#root',  // el用于指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串
      data: {
          name: 'mq'
      }

  })
</script>

数据代理

  1. vue中的数据代理:
    通过一个对象代理对另一个对象中属性的操作(读/写)
  2. vue中数据代理的好处:
    更加方便的操作data中的数据
  3. 基本原理:
    通过Object.defineProperty() 把data对象中的所有属性添加到vm上。
    为每一个添加到vm上的属性,都指定一个getter/setter。
    在getter/setter内部去操作(读/写)data中对应的属性
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2, 'x', {
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})

在这里插入图片描述

事件处理

基本使用

  1. 使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
  2. 事件的回调需要配置在methods对象中,最终会在vm上;
  3. methods 中配置的函数,不要用箭头函数!否则this就不是vm了;
  4. methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或 组件实例对象;
  5. @click=“demo” 和 @click="demo($event)"效果一致,但是后者可以传参
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <button @click="showInfo1">点我提示信息1(不传参)</button>
  <button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      name: '河科院'
    },
    methods: {
      showInfo1() {
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      },
      showInfo2(number, event) {
        console.log(number,event);
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      }
    }
  })
</script>

事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用);
  2. stop:阻止事件冒泡(常用);
  3. once:事件只触发一次(常用);
  4. capture:使用事件的捕获模式;
  5. self:只有event.target是当前操作的元素是才触发时间;
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕
    注:可以连着写,例如即阻止冒泡又阻止默认事件
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>
  <a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示信息</a>
  <div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
  </div>
  <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2"  @click="showMsg(2)">div2</div>
  </div>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      name: '河科院'
    },
    methods: {

      showInfo(e) {
        // e.stopPropagation(),
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + this.name + '学习')
      },
      showMsg(num) {
        // e.stopPropagation(),
        // console.log(this);  // 此处的this指向Vue实例
        alert('欢迎来到' + num + '学习')
      },
    }
  })
</script>

键盘事件

  1. Vue中常用的按键别名:
    回车 => enter
    删除 => delete
    退出 => esc
    空格 => space
    换行 => tab(特殊,必须配合keydown去使用)
    上 => up
    下 => down
    左 => left
    右 => right
  2. Vue未提供别名的按键,可以使用按键原始的key值去绑定,但要注意要转为kebab-case(短横线命名)
  3. 系统修饰键(用法特殊):ctrl、alt、shift、meta
    a. 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
    b. 配合keydown使用:正常触发事件
  4. 也可以使用keyCode去指定具体按键(不推荐)
  5. Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

计算属性 computed

  1. 定义:要用的属性不存在,要通过已有属性计算得来
  2. 原理:底层借助Object.defineproperty方法提供getter和setter
  3. get函数什么时候执行
    a. 初次读取时会执行
    b. 当依赖的数据发生修改时会被再次调用
  4. 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
  5. 备注:
    a. 计算属性最终会出现在vm上,直接读取使用即可
    b. 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
<div id="root">
  姓:<input type="text" v-model="firstName"><br><br>
  名:<input type="text" v-model="lastName"><br><br>
  姓名:<span>{{fullName}}</span><br><br>
  姓名:<span>{{fullName}}</span><br><br>
  姓名:<span>{{fullName}}</span><br><br>
  姓名:<span>{{fullName}}</span>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false;  // 阻止vue在启动时自动生产提示

  new Vue({
    el: '#root',
    data: {
      firstName: 'mq',
      lastName: 'tjc'
    },
    computed: {
      // 完整写法
      fullName:{
        // get:当有人读取fullName时,get 就会被调用,且返回值就作为fullName的值
        // get 什么时候调用? 1. 首次读取fullName的时候,get会被调用 2. 当所依赖的数据发生改变的时候,fullName也会重新读取,此时get会被调用
        get(){
          return this.firstName + this.lastName
        }
      }

      // 简写
      fullName(){
        return this.firstName + this.lastName
      }
    }
  })
</script>