Vue.js 基础

最新推荐文章于 2024-04-21 09:50:17 发布

读书的小蜗牛

最新推荐文章于 2024-04-21 09:50:17 发布

阅读量2k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58227247/article/details/129151059

版权

初识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ——— 引用于Vue.js官方

Vue的特征

数据驱动视图
双向数据绑定

数据驱动视图

在使用了 Vue 的页面中，Vue 会监听数据的变化，从而自动重新渲染页面的结构。

在这里插入图片描述

		-  好处：当页面所依赖的数据发生变化时，相应的页面也会重新渲染
		-  注意：数据驱动视图时`单向的数据绑定`，页面数据的主动更新无法引起数据原的同步更新

入手Vue

1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象

// 先在 title 标签下引入 Vue.js 文件

// 创建Vue实例并传入配置对象
const vm = new Vue({
  	el:'#root',  // el 是用来指定当前 Vue 实例所服务的容器
  	data:{			// data 中所存储的数据便是原数据，数据供 el 所指定的容器所使用
      name:'syyds',
      age:18
    }
})

2.打造root容器：

<div id='root'>
  <h1>{{ name.toUpperCase() }}</h1>  <!-- 页面中 SYYDS 会替换掉 {{ name.toUpperCase() }} -->
  <p>{{ age }} </p>  <!-- 页面中 18 会替换掉 {{ age }}  -->
</div>

root容器里的代码依旧符合html代码规范，只不过混入了一些特殊的Vue语法
root容器中的代码叫做Vue模板
一个Vue实例对应一个容器
{{ xxx }} 中的 xxx 是js表达式（注意：并不是js语句），并且 xxx 可以直接读取到 data 当中的数据
一旦数据源发生改变，那么页面中用到这个数据源的地方也会自动更新

Vue的模板语法

插值语法
- 功能:用于解析标签体内容
- 写法: {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性
指令语法
- 功能:用于解析标签(包括:标签属性标签体内容绑定事件…)
- 举例: v-bind:href=‘xxx’ 或简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到data中的所有属性
- 注意:Vue中有许多指令,且形式都是: v-???

<body>
  <!-- 准备好一个容器 -->
  <div id='root'>
    <h1>插值语法: {{ name }} </h1>
    <h1>指令语法: </h1>
    <!-- v-bind:href='url' 可以写成 :href='url' 其中 url 是表达式 -->
		<!-- 而 x 仅仅是一个属性 '哇咔咔' 仅作为一个字符串存在-->
    <a v-bind:href='url' x='哇咔咔'>点我去 {{ name }} 学习!</a>
  </div>
</body>
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      name:'Vue 官网',
      url:'https://cn.vuejs.org/'
    }
  })
</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" v-model:value="name"><br/> -->
			<!-- 简写 -->		
			双向数据绑定：<input type="text" v-model="name"><br/>
			<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
			 <h2 v-model:x="name">你好啊</h2>
</div>

el 属性的两种形式

    - new Vue时候配置el属性。
    - 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

第一种写法

// new Vue时候配置el属性
const vm = new Vue({
  el:'#root'
})

第二种写法

// 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
const vm = new Vue({
  data:{
    name:'hello'
  }
})
vm.$mount('#root')  // 来源于声名周期

data的两种形式

对象式
函数式

如何选择:
（1）如果涉及到组件开发，则使用函数式
(2）如果不涉及到组件开发，则使用对象式或者函数式都可以

// 对象式
const vm = new Vue({
  el:'#root',
  data:{
    name:'hello'
  }
})

// 函数式
const vm = new Vue({
  el:'#root',
  data:function () {
    .....
  }
})

data 函数式的简写形式

const vm = new Vue({
  el:'#root',
  data(){         // 冒号‘ ： ’与‘ function ’ 可以省略
    ....
  }
})

MVVM模型

在这里插入图片描述

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分

Model:表示当前页面渲染时所依赖的数据源
View:表示当前页面所渲染的DOM结构
ViewModel: Vue实例，是MVVM的核心

MVVM的工作原理

VIewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）链接在了一起

在这里插入图片描述

当数据源发生变换时，会 ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构

当表单元素值发生变化时，也会被VM监听到，Vm对把变化过后最新的值自动同步到Model数据源中

Object.defineproperty

let person = {
  name:'Tom',
  gender:'boy'
}
// define ：定义   property：属性
 Object.defineproperty(需要添加属性的对象,'具体要添加的属性',{
  ....
}) 

Object.keys(person) 可以获得一个以对象属性为元素的数组，但是里面没有age，因为age不参与枚举

第一种情况

Object.defineproperty(person,'age',{
  value:18 
})

此时给person 对象添加的age属性不参与枚举（遍历）的（在控制台中 age 的颜色是淡紫色）
Object.keys(person) 可以获得一个以对象属性为元素的数组，但是里面没有age，因为age不参与枚举

如果想要 age 属性参与枚举，可以配置 enumerable 属性

Object.defineproperty(person,'age',{
  value:18,
  enumerable:true // 控制属性是否可以被枚举（遍历），默认值是 false
})

此时的 age 属性虽然可以被枚举，但是却无法被修改了。

例如: 让 person.age = 20 虽然看似修改了，但是打印 person 时 age 属性依旧是 18

如果想要 age 属性可以被修改，可以配置 writable 属性

Object.defineporperty(person,'age',{
  value:18,
  enumerable:ture,
  writable:ture // 控制属性是否可以被修改,默认值是 false
})

如果想要 age 属性可以被删除，那么可以配置 configurable 属性

Object.defineproperty(person,'age',{
  value:18,
  enumerable:ture,
  writable:ture,
  configurable:ture // 控制属性是否可以被删除, 默认值是 false
})

第二中情况

利用 getter 与 setter 函数使 person 对象的 age 属性与外部变量 number 进行相关联

如若修改 age 属性，那么也会引起外部变量 number 的值发生变化
如果修改外部变量 number 那么也会引起 person 对象当中 age 属性的属性值发生变化

let number = 18
let person = {
  name:'Join',
  gender:'boy'
}
Object.defineprorerty(person,'age',{
  get() {
    console.log('有人读取了 age 属性')
    // 将 number 变量与 age 属性进行关联
    return number
  },
  set(value) {
    console.log('有人修改了 age 属性，且值是：',value)
    // 将 age 属性与 number 变量进行关联
    number = value
  }
})

当有人读取 age 属性时 get (getter)函数就会被调用，且返回值（return）就是 age 的属性值
当有人修改 age 属性时 set （setter）函数就会被调用，且会收到修改的值 value

数据代理

通过一个对象代理对另一个对象属性的操作（读或者写）

let obj = {
  x:10
}
let obj2 = {
  y:20
}
// obj2 相当于是 obj 的经纪人（代理），要访问 obj 徐经过 obj2
Object.defineprorperty(obj2,'x',{
  get(){
    return obj.x
  },
  set(value) {
    obj.x = value
  }
})

Vue当中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）
更加方便的操作data中的数据
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

const vm = new Vue({
  el:'#root',
  data:{
    name:'Tom',
    address:"China"
  }
})

在这里插入图片描述

事件处理

事件的基本使用：

      1. 使用`v-on:xxx` 或 `@xxx `绑定事件，其中`xxx`是事件名；
      2. 事件的回调需要配置在`methods`对象中，最终会在`vm`上；
      3. `methods`中配置的函数，`不要用箭头函数`否则`this`就`不是vm`了；
      4. `methods`中配置的函数，都是被`Vue`所管理的函数，`this`的指向是`vm `或 `组件实例对象(vc)`；
      5. `@click="demo" `和 `@click="demo($event)" `效果一致，但后者可以传参；

注意：在Vue中也有事件函数，在以前 function(event) {...} 中的 event 是事件参数，而在Vue

中 $event 也是事件参数，它存在的意义是当JavaScript默认的那个 event （事件参数）被覆盖时无事件参数生效的情况

<!-- 模板代码 -->
<div id='root'>
  <button v-on:click='showInfo'>点击显示我的名字</button>
  <button @click='showInfor2($event,666)'>点击我显示一些信息</button>
</div>

// javascript 代码部分
const vm = new Vue({
  el:'#root',
  data:{
    name:'Tom',
    address:'China'
  },
  methods:{
    showInfo(){
      // 在 methods 中可以通过 this 访问 data 身上的所有数据
      alert(this.name)
    },
    showInfor2(event,value) {
      console.log(event)
      alert('传过来的参数是：' + value)
    }
  }
})

以下是 $event 传过来的参数，是不是觉得和以前的事件函数传过来的参数一样

在这里插入图片描述

事件修饰符

Vue中的事件修饰符：

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

<!-- html部分 -->
<div id=root>
  	<!-- 阻止默认事件（常用） -->
  	<a href='https://cn.vuejs.org/' @click.prevent='showInfo'>点击我跳转</a>

  	<!-- 阻止事件冒泡（常用） -->
  	<div @click='showInfo'>
   	 <!-- 阻止事件冒泡后只有 button 会触发点击事件，而父级 <div> 不会触发点击事件 -->
    	<button @click.stop='showInfo'>点我提示信息</button>
  	</div>

  	<!-- 事件只触发一次（常用） -->
  	<button @click='showInfo'>点我显示信息</button>
</div>

// JavaScript 部分
const vm = new Vue({
  el:'#root',
  data:{
    name:'Amy'
  },
  methods:{
    showInfo(){
      alert('同学你好！')
    }
  }
})

键盘事件

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

回车 => enter

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

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键:可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<div id='root'>
  <input type='text' placeholder='请输入' @keydown.enter='showInfor'/>
</div>

const vm = new Vue({
  el:'#root',
  data:{
   	name:'Tom'
  },
  methods:{
    showInfor(){
      alert(this.name)
    }
  }
})

计算属性

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

备注：1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		测试：<input type="text" v-model="x"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
</div>

const vm = new Vue({
  el:'#root',
  data:{
    firstName:'张',
    lastName:'三'
  }，
  computed:{
  	fullName() {
  	// 1.初次访问数据时调用
  	// 2.所依赖数据被修改时调用
  		get(){
    		return this.firstName + '-' + this.lastName
  	},
   	 //set什么时候调用? 当fullName被修改时。
    	set(value) {
      	const arr = value.split('-')
      	this.firstName = arr[0]
      	this.lastName = arr[1]
   	 }
			}
		}
})

计算属性的简写形式

const vm = new Vue({
  el"'#root',
   data:{
    firstName:'张',
    lastName:'三'
  }，
   computed:{
       // 默认为 getter 函数            
      fullName() {
  			return this.firstName + '-' + this.lastName
		}
 	}   
})

侦听器

监视属性watch：

当被监视的属性变化时, 回调函数自动调用, 进行相关操作
监视的属性必须存在，才能进行监视！！
监视的两种写法：
- (1).new Vue时传入watch配置
- (2).通过vm.$watch监视

写法一

const vm = new Vue({
  el:'#root',
  data:{
    isHot:true
  },
  watch:{
    // 应该与被监听的属性名一致
    isHot:{
       // handler 是固定写法，表示当 被监听的属性 的值变化时，自动调用 handler 处理函数
      handler(newValue,OldValue) {
        console.log(newValue,oldValue)
      }
    }
  }
})

watch 侦听器会接收两个参数，一个是修改后的值 newValue ,一个是修改前的值 oldValue

写法二

const vm = new Vue({})

vm.$watch('被监听的属性',{
  // handler 是固定写法，表示当 被监听的属性 的值变化时，自动调用 handler 处理函数
  handler(newValue,oldValue){
    ......
  }
})

在初始化时便开始监听

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器的 hanlder。如果想让 watch 侦听器的 hanlder 立即被调用，则需要使用 immediate （立即的，直接的）选项

const vm = new Vue({
  el:'#root',
  data:{
    isHot:true
  },
  watch:{
    isHot:{
      immediate:true, // 初始化时让handler调用一下
       // handler 是固定写法，表示当 被监听的属性 的值变化时，自动调用 handler 处理函数
      handler(newVal,oldVal) {
      	console.log(newVal,oldVal)
    }
    }
  }
})

const vm = new Vue({})

vm.$watch('isHot',{
  immediate:true,
   // handler 是固定写法，表示当 被监听的属性 的值变化时，自动调用 handler 处理函数
  hanlder(newVal,oldVal){
    console.log(newVal,oldVal)
  }
})

深度监听

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选

项

监听多级结构中某个属性的变化

const vm = new Vue({
  el:"#root",
  data:{
    numbers:{
      a:1,
      b:2,
      c:{
        d:{
          e:666
        }
      }
    }
  }
})

这时我们如果想监听 e 属性怎么办？似乎无法监听到如此具体的属性。不怕，我们可以通过对象点的（ . ）的形式“ 点 ”出具体的属性进行监听。

const vm = new Vue({
  el:'#root',
  data:{
    number:{
      a:1,
      b:2,
      c:{
        d:{
          e:66
        }
      }
    }
  },
  watch:{
    // 虽然这里可以支持通过对象点出来的写法，但是这种方法必须要加引号才能会被正确识别和使用
    'number.c.d.e':{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    }
  }
})

监听多级结构中所有属性的变化

如果并不想监听某个对象的具体属性值的变化时，可以开启 deep 选项进行对象中所有属性的监听

const vm = new Vue({
  el:'#root',
  data:{
    number:{
      a:1,
      b:2,
      c:{
        d:{
          e:66
        }
      }
    }
  },
  watch:{
    number:{
      // 开启深度监听
      deep:true,
      handler(){
        .......
      }
    }
  }
})

侦听器的简写形式

const vm = new Vue({
  el:'#root',
  data:{
    isHot:true
  },
  watch:{
    // 简写形式
    isHot(newValue,oldValue) {
      .......
    }
  }
})

const vm = new Vue({})
// 简写形式
vm.$watch('isHot',(newValue,oldValue) = > {
  ......
})

绑定样式

绑定样式：

1. class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

条件渲染

条件渲染：

v-if

写法：

      - v-if="表达式" 
      - v-else-if="表达式"
      - v-else="表达式"

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除

注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”。

<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到{{name}}</h2> 
<h2 v-if="1 === 1">欢迎来到{{name}}</h2> 
<!-- v-else和v-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> 
<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'Tom',
				n:0
			}
		})
	</script>

<!-- v-if 和 template 的配合使用 -->
<!-- 渲染 DOM 的时候 template 不被编译，但是 v-if 会被编译生效-->
<template v-if='n === 1'>
  <h2> haha </h2>
  <p> yaya </p>
<template>

v-show

写法：v-show="表达式"

适用：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 (display : none; )

<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">欢迎来到{{name}}</h2>
<h2 v-show="1 === 1">欢迎来到{{name}}</h2>
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      name:'Tom'
    }
  })
</script>

列表渲染

v-for指令

  - 用于展示列表数据
  - 语法：v-for="(item, index) in xxx" :key="yyy"
  - 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

遍历数组：

<div id='root'>
  <ul>
    <li v-for='item in persons' :key='item.id'>
      名字：{{ item.name }}  年龄：{{ item.age }}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
    }
  })
</script>

遍历对象：

<div id='root'>
  <ul>
    <li v-for='(val,k) in car' :key='k'>
      对象的键：{{ k }} --- 与之对应的属性值：{{ val }}
    </li>
  </ul>
</div>
<script>
  const vm = new Vue({
    el:'#root',
    data:{
      car:{
        name:'奥迪A8',
				price:'70万',
				color:'黑色'
      }
    }
  })
</script>

key 的原理

虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

对比规则

旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key:
- 创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题

若对数据进行逆序添加、逆序删除等破坏顺序操作:
- 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM
- 会产生错误DOM更新 ==> 界面有问题。
开发中如何选择key
- 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

数据监测

如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName 或 index，value) 或 vm.$set(target，propertyName 或 index，value)

在Vue修改数组中的某个元素一定要用如下方法：

- 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象(data:{}) 添加属性！！！

const vm = new Vue({
      el: '#root',
      data: {
        student: {
          name: 'tom',
          age: 18,
          hobby: ['抽烟', '喝酒', '烫头'],
          friends: [
            { name: 'jerry', age: 35 },
            { name: 'tony', age: 36 }
          ]
        }
      },
      methods: {
        addSex() {
          // Vue.set(this.student,'sex','男')
          this.$set(this.student, 'sex', '男')
        },
        addFriend() {
          this.student.friends.unshift({ name: 'jack', age: 70 })
        },
        updateFirstFriendName() {
          this.student.friends[0].name = '张三'
        },
        addHobby() {
          this.student.hobby.push('学习')
        },
        updateHobby() {
          // Vue.set(this.student.hobby,0,'开车')
          this.$set(this.student.hobby, 0, '开车')
        },
        removeSmoke() {
          this.student.hobby = this.student.hobby.filter((h) => {
            return h !== '抽烟'
          })
        }
      }
    })

收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 配置input的value属性:
  - v-model的初始值是非数组，比如字符串，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符 (1)lazy：失去焦点再收集数据

(2)number：输入字符串转为有效的数字

(3)trim：输入首尾空格过滤

 <div id="root">
   <form @submit.prevent="demo">
     账号：<input type="text" v-model.trim="userInfo.account" /> <br /><br />
     密码：<input type="password" v-model="userInfo.password" /> <br /><br />
     年龄：<input type="number" v-model.number="userInfo.age" /> <br /><br />
     性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male" />               女<input type="radio" name="sex" v-model="userInfo.sex" value="female" /> 
    爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study" />             打游戏 <input type="checkbox" v-model="userInfo.hobby" value="game" />                 吃饭  <input type="checkbox" v-model="userInfo.hobby" value="eat" /> <br />
        所属城市
        <select v-model="userInfo.city">
          <option value="">请选择</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br />
        其他信息：
     <!-- 失去焦点时收集数据，将数据同步到 userInfo.other 中 -->
        <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
        <input type="checkbox" v-model="userInfo.agree" />阅读并接受
        <a href="https://cn.vuejs.org/">《用户协议》</a>
        <button>提交</button>
   </form>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#root',
      data: {
        userInfo: {
          account: '',
          password: '',
          age: 18,
          sex: 'female',
          // hobby 必须是数组，这样才会接收到 value 值
          hobby: [],
          city: 'beijing',
          other: '',
          agree: ''
        }
      },
      methods: {
        demo() {
          console.log(JSON.stringify(this.userInfo))
        }
      }
    })
  </script>

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注:(1)过滤器也可以接收额外参数、多个过滤器也可以串联

(2)并没有改变原本的数据, 是产生新的对应的数据

<!-- 这里使用了第三方包 dayjs 来进行时间的格式化 -->
<div id='root'>
  <!-- 不传参数的过滤器 -->
  <p> {{ time | timeFormater }}</p>
  <!-- 传参数的过滤器 -->
  <span>{{ time | timeFormater('YYYY_MM_DD') }}</span>
</div>

<script>
  // 全局过滤器
  Vue.filter('formater',function(val) {
    return dayjs(value).format(str)
  })
 
  const vm = new Vue({
    el:'#root',
    data:{
      time:1621561377603, //时间戳
    },
    // 局部过滤器
    filters:{
      // 过滤器的第一个参数始终接收的都是待过滤器处理的数据 value
      // 为形参 str 设置默认参数
      timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
        // return 返回过滤器的结果
        return dayjs(value).format(str)
      }
    }
  })
</script>

内置指令

v-text指令

作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

<div id='root'>
  <!-- p 标签里的 “哈哈” 会被 v-text 所绑定的 msg 里的数据替换掉 -->
  <p v-text='msg'>哈哈</p>
  <span>{{ msg }}</span>
  <!-- 发现 v-text 指令并不解析 html 标签 -->
  <p v-text='str'></p>
</div>

<script>
  const vm = new Vue({
    el:'#root',
    data:{
      msg:'Hello Word',
      str:'<h3>你好啊！</h3>'
    }
  })
</script>

在这里插入图片描述

v-html 指令

作用：向指定节点中渲染包含html结构的内容
与插值语法'{{ }}'的区别
- v-html会替换掉节点中所有的内容，{{xx}}则不会
- v-html可以识别html结构

注意：v-html有安全性问题

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<div id='root'>
  <div v-html='str'></div>
  <p>你好 {{ msg }} </p>
</div>

<script>
  const vm = new Vue({
    el:'#root',
    data:{
      msg:'Hello'
      str:'<h3>你好啊！</h3>'
    }
  })
</script>

在这里插入图片描述

v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id='root'>
  <h2 v-once>初始化的值: {{ number }}</h2>
  <h2>当前的值是： {{ number }} </h2>
  <button @click='number++'>点我数值 + 1</button>
</div>

<script>
	const vm = new Vue({
    el:'#root',
    data:{
      number:1
    }
  })
</script>

在这里插入图片描述

v-cloak 指令

首先我们先来看一段在不引入 Vue.js 代码的前提下的页面渲染效果

<div id="root">
	 <h2>{{ msg }}</h2>
</div>
<script>
	const vm = new Vue({
		el: '#root',
		data: {
			msg: 'Hello Word !'
		}
	})
</script>

在这里插入图片描述

由图可见，浏览器直接将插值语法渲染出来了，显然这对用户来说并不是一个很好的体验。然而 v-cloak 指令可以解决此问题

v-cloak 本质上是一个特殊的属性，它没有值，Vue实例创建并接管容器后，会自动删掉 v-cloak属性，所以我们可以配合CSS 的属性选择器将拥有 v-cloak 属性的标签隐藏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
      /* 属性选择器 */
			[v-cloak] {
				display: none;
			}
		</style>
    <!-- 如若不引入 Vue.js 那么模板中的插值语法始终不会被渲染 -->
		<!-- <script src="./vue-2.6.12.js"></script>	 -->
	</head>
	<body>
		<div id="root">
			<h2 v-cloak>{{ msg }}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: {
					msg: 'Hello Word !'
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

可以看到页面上并没有呈现未经编译的插值语法，直到引入 Vue.js 文件前

v-pre 指令

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

在这里插入图片描述

自定义指令

函数式

<div id='root'>
  <h2>当前 num 的值是：<span v-text='num'></span></h2>
  <h2>放大十倍是：<span v-big='num'></span></h2>
</div>
<script>
  const vm = new Vue({
    el:"#root",
    data:{
      num:1
    },
    directives:{
      // 指令与元素成功绑定时首先调用一次（一上来）
      // 指令所在模板（id ='root' 的容器）被重新解析时被调用
      big(element,binding) {
        // 首先打印，看看接收的这两个参数究竟是什么
        console.log(element,binding)
      }
    }
  })
</script>

在这里插入图片描述

可以看到，element 参数接收到的是一个真实的 DOM元素,那么就意味着我们现在可以手动操作 DOM，而 binding 接收的是一个对象

在这里插入图片描述

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

<div id='root'>
  <h2>当前 num 的值是：<span v-text='num'></span></h2>
  <h2>放大十倍是：<span v-big='num'></span></h2>
</div>
<script>
  const vm = new Vue({
    el:"#root",
    data:{
      num:1
    },
    directives:{
      big(element,binding) {
        // 首先打印，看看接收的这两个参数究竟是什么
        console.log(element,binding)
        element.innerText = binding.value * 10
      }
    }
  })
</script>

在这里插入图片描述

对象式

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

<div id='root'>
  <h2>当前 num 的值是：<span v-text='num'></span></h2>
  <h2>放大十倍是：<span v-big='num'></span></h2>
  <button @click='num++'>点我 num + 1 </button>
  <input type='text' v-fbind:value='num'>
</div>
<script>
  const vm = new Vue({
    el:"#root",
    data:{
      num:1
    },
    directives:{
      fbind:{
        // 指令与与元素成功绑定时调用（一上来）
        binding(element,binding){
          element.value = binding.value
        },
        // 指令所在元素被插入以页面时调用
        inserted(element,binding){
          // 进入此函数说明 input 元素已经在页面真正渲染出
          // 也就是被绑定元素插入父节点时调用 
          element.focus()
        },
        // 指令所在模板被重新解析时调用
        update(element,binding){
          element.value = binding.value
        }
      }
    }
  })
</script>

注意事项：对象式中的 update 函数的操作与binding 函数的操作在这里应一致，如果没有 update 函数，那么数据虽然改变了，但是数据的更新没有显示到页面上。

定义全局的自定义指令

<div id='root'>
  <button @click='num++'>点我 num + 1 </button>
  <input type='text' v-fbind:value='num'>
</div>
<script>
  Vue.directive('fbind',{
        //指令与元素成功绑定时（一上来）
      bind(element, binding) {
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value
      }
  })
  const vm = new Vue({
    el:"#root",
    data:{
      num:1
    }
  })
</script>

总结:

一、定义语法：
								(1).局部指令：
												new Vue({														new Vue({
													directives:{指令名:配置对象}   或   	directives{指令名:回调函数}
												}) 																		})
								(2).全局指令：
													Vue.directive(指令名,配置对象) 或  Vue.directive(指令名,回调函数)

						二、配置对象中常用的3个回调：
									(1).bind：指令与元素成功绑定时调用。
									(2).inserted：指令所在元素被插入页面时调用。
									(3).update：指令所在模板结构被重新解析时调用。

						三、备注：
									1.指令定义时不加v-，但使用时要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

读书的小蜗牛

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 基础

在使用了 Vue 的页面中，Vue 会，从而页面的结构。入手Vue 1.想让Vue工作，首先就是创建一个Vue实例，并且要传入一个配置对象 2.打造Vue的模板语法插值语法用于解析标签体内容 {{ xxx }} xxx 是js表达式,可以直接读取到 data 中的所有属性指令语法用于解析标签(包括:标签属性标签体内容绑定事件…) v-bind:href=‘xxx’ 或简写为 :href=‘xxx’ ,其中 xxx 同样是js表达式,并且可以直接读取到
复制链接

扫一扫