1 vue

约 2069 字大约 7 分钟

2025-05-04

Vue是一个用于构建用户界面的渐进式框架，免除原生JavaScript中的DOM操作，简化书写。

开始

创建项目

vue create 项目名

启动项目

npm run serve

vue对象

el属性指定选择器所管理的标签
data用于存储数据
methods用于存储定义的函数当设置好管理的标签后在该标签内就可以通过插值表达式直接使用vue中的数据了

  <div class="app">
    {{ msg }}
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        msg: 'Hello World'
      }
    })
  </script>

计算属性

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

声明在computed配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用{{计算属性名}}

computed:{
	计算属性名(){
		基于现有数据，编写求值逻辑
		return 结果
	}
}

相比于methods中的函数,计算属性具有缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存 . 依赖项变化了，会自动重新计算→并再次缓存

完整写法

计算属性默认的简写，只能读取访问，不能“修改"。如果要“修改”→需要写计算属性的完整写法。

计算属性是具有get和set方法的,非完整写法默认是get

computed:{
	计算属性名：{
		get() {
			一段代码逻辑（计算逻辑）
			return 结果
		}
		set（修改的值）{
			一段代码逻辑（修改逻辑）
		}
	}
}

watch侦听器(监视器)

监视数据变化，执行一些业务逻辑或异步操作。监听器会在监听的数据改变的时候调用,newValue是改变后的新值,oldValue是改变前的旧值 . 如果数据比较复杂需要使用引号包裹取值

new Vue({
    el: '.app',
	data: {
	    count:10,
	    obj:{
		    words:""
	    }
    },
    watch: {
	    count(newValue,oldValue){}
	    'obj.words'(newValue){}
    }
})

异步请求

将监听器函数像正常的函数一样设置异步请求即可

watch:{
	async 'obj.words'(newValue){
		const res = await axios({
			url:'https://applet-base-api-t.itheima.net/api/
			params:{
				words:newValue
			}
		})
		console.log(res.data.data)
	}
}

完整属性

deep : 深度监视,当监视的数据更改时就调用handler函数(监视obj时其内部的words和lang更改时都会触发)
immediate : 立刻执行,当监视的内容被创建时立即执行一次

new Vue({
    el: '.app',
	data: {
	    count:10,
	    obj:{
		    words:"",
		    lang:""
	    }
    },
    watch: {
	    obj:{
	    	deep:true,
		    immediate:true,
		    handler(newValue){}
	    }
    }
})

vue指令

vue指令就是带有v-前缀的特殊标签属性

v-html

以html的方式解析对应的文本

  <div class="app">
    <div v-html="msg"></div>
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        msg: '<a href="https://www.google.com">Google</a>'
      }
    })
  </script>

v-show

控制元素的显示或隐藏赋值为一个表达式,表达式的结果为true就是显示,表达式的结果是false就是隐藏

底层原理是切换css的display属性

v-if v-elif v-else

控制元素的显示与隐藏 v-if和v-elif后面跟表达式,值为true则显示,值为false则隐藏从上往下如果遇到为true的则不会执行后面的v-if或v-elif了,如果都不符合则显示v-else的

底层原理是根据判断条件选择是否创建或移除元素

v-on

用于注册事件(添加监听+提供处理逻辑) 简写形式使用@代替v-on:

当需要的事件逻辑比较复杂时可以将v-on中的值赋值为vue对象的methods中函数名如果需要函数传参也可直接像正常的函数调用那样传参语法

v-on:事件名="内联语句(要绑定的函数名)"
@事件名="内联语句(要绑定的函数名)"

示例

  <div class="app">
    <button v-on:click="count++">{{count}}</button>
    <button @click="count--">{{count}}</button>
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        count:10
      }
    })
  </script>

v-bind

用于设置动态属性简写形式可以省略v-bind直接在属性前加:

  <div class="app">
    <a v-bind:href="url">Hello World</a>
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        url : 'https://www.google.com'
      }
    })
  </script>

操作class

:class="对象/数组"

对象→键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1：布尔值，类名2：布尔值 }"></div>

数组→数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1，类名2，类名3 ]"></div>

操作style

<div class="box" :style="{ CSS属性名1:CSS属性值, CSS属性名2:CSS属性值 }"></div>

v-for

基于数据进行循环,多次渲染整个元素 item是元素,index是元素对应的索引,也可以省略item,当只有item一个元素时可以省略括号

  <div class="app">
    <ul>
      <li v-for="(item,index) in skills" :key="index">{{item}}-{{index}}</li>
    </ul>
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        skills:["五禁玄光气","逆流护身印","玄天斩灵剑"]
      }
    })
  </script>

:key属性用于帮助v-for排序 v-for的默认行为会尝试原地修改元素（就地复用）

如果不指定key的情况下删除一个元素那么默认删除的是最后一个元素,并将删除后的数据再使用原本的元素容器复用存放数据,如果删除的元素不是最后一个那么这个元素的样式会留下,但其中的数据被按照修改后的数据从前往后依次替换了

如果指定了key就可以定位到具体要修改的是哪个元素

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应)

v-model

作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容

  <div class="app">
    <input type="text" v-model="user" placeholder="请输入用户名">
    <input type="password" v-model="pwd" placeholder="请输入密码">
    <button @click="login">登录</button>
    <button @click="register">重置</button>
  </div>

  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '.app',
      data: {
        user: "",
        pwd: ""
      },
      methods: {
        login() {
          console.log(this.user, this.pwd)
        },
        register() {
          this.user = ""
          this.pwd = ""
        }
      }
    })
  </script>

常见的表单元素都可以用v-model绑定关联→快速获取或设置表单元素的值它会根据控件类型自动选取正确的方法来更新元素

指令修饰符

通过.指明一些指令后缀，，不同后缀封装了不同的处理操作用于简化代码

按键修饰符 @keyup用于监听按键弹起事件 , @keyup.enter监听键盘回车
v-model修饰符 v-model.trim去除首尾空格 v-model.number转数字
事件修饰符 @事件名.stop阻止冒泡 @事件名.prevent 阻止默认行为

defineAsyncComponent

异步加载一个组件里面是一个promise，在里面设置的component、loadingComponent、errorComponent分别对应于promise的已完成、进行中、已拒绝状态的组件

可以使用这个函数异步加载一个组件，将这个函数返回的组件挂载到页面上，当该组件未加载完毕时会显示loadingComponent的组件，当组件加载完成后会显示加载的组件，当组件加载失败时会显示errorComponent的组件

也可以使用它异步加载一个页面

响应式数据

API	传入	返回	说明
reactive	plain-object	对象	代理深度代理对象中的所有成员
readonly	plain-object or proxy	对象	代理只能读取代理对象中的成员，不可修改
ref	any		对value的访问是响应式的，如果给value的值是一个对象，则会通过reactive函数进行代理，如果已经是代理，则直接使用代理。因为proxy只能代理对象无法代理基本数据类型，所以ref就会将所有的数据类型都封装到一个对象中，这样就可以使用proxy代理了
computed	function		当读取value值时，会根据情况决定是否要运行函数

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)

1 vue

公告