当前位置：首页 > article >正文

初学Vue

article 2024/12/27 14:54:50

文章目录

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

简介

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

特点

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

初识

创建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>

vue实例和容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，并且xxx可以自动读取到data中的所有属性
一旦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
备注：

双向绑定一般都应用在表单类元素上（例如：input、select等）
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>

数据代理

vue中的数据代理：
通过一个对象代理对另一个对象中属性的操作（读/写）
vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过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
    }
})

在这里插入图片描述

事件处理

基本使用

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods 中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或组件实例对象；
@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中的事件修饰符：

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素是才触发时间；
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>

键盘事件

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

计算属性 computed

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助Object.defineproperty方法提供getter和setter
get函数什么时候执行
a. 初次读取时会执行
b. 当依赖的数据发生修改时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
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>