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

Vue.js基础

news 2025/7/1 21:42:57

Vue.js

https://v2.cn.vuejs.org/https://cn.vuejs.org/

初识Vue

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

初始Vue

1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象

2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的Vue语法

3.root 容器里的代码被称为 Vue模板

4.Vue 实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用

6.{{XXX}}中 XXX要写js表达式，且XXX可以自动读取到data中的所有属性

7.一旦data 中数据发生改变，那么页面中用到该数据得地方也会自动更新

注意区分： js表达式和 js 代码（语句）

1.表达式：一个表达式会生成一个值，可以放任何一个需要值得地方：

(1)a

(2)a+b

(3)demo(1)

(4)x === y ? a : b

2.js 语句

(1)if(){}

(2)for(){}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 插值语法 --><h1>hello, {{name.toUpperCase()}}, {{address}}</h1></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//创建Vue 实例const x = new Vue({el:"#root", //el 用于指定当前Vue实例为哪个容器服务， 值通常为css选择器字符串// el:document.getElementById('root')data:{  //data用于存储数据， 数据供el所指定的容器去使用， 值我们暂时先写成一个对象name:'jack',address:'beijing'}})</script>
</body>
</html>

在这里插入图片描述

模板语法

Vue模板语法有2大类

1.插值语法:

功能:用于解析标签体内容。

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

2.指令语法:

功能:用于解析标签（包括:标签属性、标签体内容、绑定事件…）。

举例: v-bind :href="xxx”或简写为:href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

备注:Vue中有很多的指令，且形式都是: v-???，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> <div id="root"><h1>插值语法</h1><h3>你好，{{name}}</h3><hr/><h1>指令语法</h1><a v-bind:href="url">{{name}}一下</a>   <a :href="school.url.toUpperCase()">{{school.name}}一下</a></div><script>Vue.config.productionTip = falsenew Vue({el:'#root',data:{name:'百度',url:'http://www.baidu.com',school:{name:'淘宝',url: 'http://www.taobao.com',}}})</script>
</body>
</html>

在这里插入图片描述

数据绑定

Vue中有2种数据绑定的方式

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

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

备注:

1.双向绑定一般都应用在表单类元素上（如: input、select等)

2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><!-- 普通写法 --><!-- 单向数据绑定：<input type="text" v-bind:value = "name"><br> --><!-- 双向数据绑定：<input type="text" v-model:value="name"> --><!-- v-model 只能应用在表单元素（输入类元素）上 --><!-- 简写 -->单向数据绑定：<input type="text" :value="name"><br>双向数据绑定：<input type="text" v-model="name"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'huyq',}})</script>
</body></html>

MVVM模型

1.M:模型(Model)data中的数据

2.V:视图(View):模板代码

3.VM:视图模型(ViewModel):Vue实例

data中所有的属性,最后都出现在了vm身上。

vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

在这里插入图片描述

事件处理

事件的基本使用

1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名;

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

3.methods中配置的函数,不要用箭头函数! 否则this就不是vm了;

4.methods中配置的函数，都是被Vue所管理的函数。

this的指向是vm或组件实例对象5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}学习</h2><button v-on:click = "showInfo1">点我提示信息(不传参)</button><!-- 简写形式 --><button @click="showInfo2(66, $event)">点我提示信息(传参)</button> </div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '哈佛大学',},methods:{showInfo1(event) {// console.log(event.target.innerText);  //点我提示信息(不传参)// console.log(this); //此处的this是vmalert('同学你好!')},showInfo2(number){console.log(number, event); //66alert('同学你好!!')}}})</script>
</body></html>

事件修饰符

vue中的事件修饰符:

1.prevent: 阻止默认事件（常用）;

2.stop:阻止事件冒泡（常用）;

3.once:事件只触发一次（常用）;

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素时才触发事件;

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 -->
<form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

键盘事件

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.自定义健名=键码，可以去定制按键别名

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

计算属性

计算属性:

1.定义:要用的属性不存在,要通过已有属性计算得来。

2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter.

3.get函数什么时候执行?

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势:与methods实现相比，内部有缓存机制（复用）,效率更高,调试方便。

5.备注:

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

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


<body><!-- 准备好一个容器 --><div id="root">姓：<input type="text" v-model="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>姓名：<span>{{fullName}}</span></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName:'三',},computed:{// 计算属性fullName: {// get作用：当有人读取fullname时，get就会被调用，且返回值就是fullname的值//get 什么时候调用， 1.初次读取fullName, 2.所依赖的数据发生变化时get(){console.log('get 被调用了');return this.firstName + '-' + this.lastName},//当    fullName 被修改时，set调用set(value){console.log('set 被调用了');console.log(value);const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})</script>
</body>

计算属性简写


<body><!-- 准备好一个容器 --><div id="root">姓：<input type="text" v-model:value="firstName"><br><br>名：<input type="text" v-model="lastName"><br><br>姓名：<span>{{fullName}}</span></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName:'三',},computed:{// 简写//只考虑读取,不考虑修改fullName(){console.log('get 被调用了');return this.firstName + '-' + this.lastName}}})</script>
</body>

监听属性

监视属性watch

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

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

3.监视的两种写法:

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

<body>     <!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot}},//监视属性// watch:{//     isHot :{//          immediate: true, //初始化时， 让handler调用一下//         // handler什么时候调用？当isHot发生改变时。handler调用//         handler(newValue, oldValue){//             console.log('isHot 被修改了', newValue, oldValue);//         },//     }// }})vm.$watch('isHot', {immediate: true, //初始化时， 让handler调用一下// handler什么时候调用？当isHot发生改变时。handler调用handler(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue);},})</script>
</body>

深度监视

深度监视:

(1). vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变。

备注:

(1).vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

<body><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><h3>a的值是{{numbers.a}}</h3><button @click="add">点我让a+1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,numbers:{a:1,b:1,}},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot},add(){this.numbers.a++}},// 监视属性watch:{isHot :{immediate: true, //初始化时， 让handler调用一下// handler什么时候调用？当isHot发生改变时。handler调用handler(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue);   },},//监视多级结构中所有属性的变化numbers:{deep:true,//深度监视handler(){console.log('numbers改变了');}}}})</script>
</body>

监视属性简写

<body>   <!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {isHot: true,numbers:{a:1,b:1,}},//计算属性computed:{info(){return this.isHot ? '热' : '冷'}},methods: {changeWeather(){this.isHot = !this.isHot},},// 监视属性watch:{//简写isHot(newValue, oldValue){console.log('isHot 被修改了', newValue, oldValue);},}})</script>
</body>

绑定样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>绑定样式</title><style>.basic{width: 300px;height: 200px;border: 1px solid black;}.happy{background-color: pink;}.sad {background-color: gray;}.normal{background-color: skyblue;}.w1{background-color: green;}.w2{font-size: 30px;}.w3{border-radius: 10px;}</style>
</head><body><!-- 绑定样式:1.class样式写法:class="xxx"xXx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用.2. style样式:style="{fontsize: xxx}"其中xxx是动态值。: style="[a,b]"其中a、b是样式对象。 --><!-- 准备好一个容器 --><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><!-- 绑定class样式--对象写法 --><!-- <div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div> --><div class="basic" :style="styleObj">{{name}}</div><br><br><!-- 绑定class样式--数组写法 --><div class="basic" :style="styleArr">{{name}}</div><br><br></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '尚硅谷',mood: 'normal',classArr:['w1','w2','w3'],classObj:{w1:false,w2:false,w3:true,},// fsize:40,styleObj:{fontSize:'40px',color: 'red',backgroundColor : 'orange',},styleArr:[{fontSize: '50px',color: 'red',},{backgroundColor: 'blue',},]},methods: {changeMood(){const arr = ['happy', 'sad', 'normal']let i = Math.floor(Math.random() * 3)this.mood = arr[i]}},})</script>
</body></html>

条件渲染

条件渲染:

1.v-if

写法:

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else="表达式”适用于:切换频率较低的场景。

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

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

2.v-show

写法: v-show=“表达式”

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

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

3.备注:使用v-if的时,元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><!-- 使用v-show做条件渲染 --><h2 v-show="a">欢迎来到{{name}}</h2><!-- 使用v-if做条件渲染 --><h2 v-if="a">欢迎来到{{name}}</h2><h2>当前 n 的值是{{n}}</h2><button @click="n++">点我 n 加 1</button><div v-show="n === 1 ? true : false">Angular</div><div v-show="n === 2 ? true : false">React</div><div v-show="n === 3 ? true : false">Vue</div> <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><div v-show="n === 1">你</div><div v-show="n === 1">好</div><div v-show="n === 1">啊</div><template v-if=" n === 1"><div >你</div><div >好</div><div >啊</div></template></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: '安徽',// a:false,n:0},})</script>
</body></html>

列表渲染

基本列表

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

<body><!-- 准备好一个容器 --><div id="root"><!-- 遍历数组 --><h2>人员列表</h2><ul><!-- <li v-for="p in persons" :key="p.id">{{p.name + '-' + p.age}}</li> --><li v-for="(p, index) in persons" :key="index">{{p.name + '-' + p.age}}</li>   </ul><!-- 遍历对象 --><h2>汽车信息</h2><ul><li v-for="(value, k) of car" :key="k">{{k}} --- {{value}}</li></ul><!-- 遍历字符串 --><h2>汽车信息</h2><ul><li v-for="(char, index) of string" :key="index">{{index}} --- {{char}}</li></ul><!-- 遍历指定次数 --><h2>汽车信息</h2><ul><li v-for="(number, index) of 5" :key="index">{{index}}--- {{number}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {persons:[{ id: '001', name: '张三',  age: 18 },{ id: '002', name: '李四', age: 13 },{ id: '003', name: '王五', age: 19 },],car:{name:'audi',price:'70w',color:'黑色',},string : 'hello world',},})</script>
</body>

列表的过滤

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>列表的过滤</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p, index) in filPersons" :key="p.id">{{p.name + '-' + p.age + '-' + p.sex}}</li>   </ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//computed 实现const vm = new Vue({el: '#root',data: {keyWord: '',persons: [{ id: '001', name: '马冬梅', age: 18, sex: '女' },{ id: '002', name: '周冬雨', age: 13, sex: '女' },{ id: '003', name: '周杰伦', age: 19, sex: '男' },{ id: '004', name: '曾汪伦', age: 20, sex: '男' },],},computed:{//数字的过滤方法filPersons(){return  this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})}}})</script>
</body></html>

列表的排序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>列表的排序</title>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">升序</button><button @click="sortType = 1">降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p, index) in filPersons" :key="p.id">{{p.name + '-' + p.age + '-' + p.sex}}</li>   </ul></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//computed 实现const vm = new Vue({el: '#root',data: {keyWord: '',sortType: 0, //0 原顺序 2 升序 1 降序persons: [{ id: '001', name: '马冬梅', age: 18, sex: '女' },{ id: '002', name: '周冬雨', age: 13, sex: '女' },{ id: '003', name: '周杰伦', age: 19, sex: '男' },{ id: '004', name: '曾汪伦', age: 20, sex: '男' },],},computed:{filPersons(){const arr = this.persons.filter((p) => {return p.name.indexOf(this.keyWord) !== -1})//判断是否需要排序if(this.sortType){arr.sort((p1 , p2) => {return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age})}return arr}}})</script>
</body></html>

表单数据的收集

若:，则v-model收集的是value值，用户输入的就是value值

若:，则v-model收集的是value值，且要给标签配置value值。
若:

1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy: 失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"><form @submit.prevent="demo"><label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br><br><label for="pwd">密码：</label><input type="password" id="pwd" v-model="userInfo.password"><br><br><label for="age">年龄：</label><input type="number" id="age" v-model.number="userInfo.age"><br><br>性别：男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>爱好：吃饭<input type="checkbox" name="hobbby" value="eatting" v-model="userInfo.hobby">睡觉<input type="checkbox" name="hobbby" value="sleeping" v-model="userInfo.hobby">打豆豆<input type="checkbox" name="hobbby" value="hitting" v-model="userInfo.hobby"><br><br>所属校区：<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="anhui">安徽</option><option value="zhejiang">浙江</option><option value="jiangsu">江苏</option><option value="fujian">福建</option></select><br><br>其他信息：<textarea name="" id="" v-model.lazy="userInfo.other"></textarea><br><br><input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com" style="text-decoration: none;">《用户协议》</a><br><br><button>提交</button></form></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {userInfo:{account: '',password: '',age:'',sex: 'female',hobby: [],city: '',other: '',agree: '',}},methods: {demo(){console.log(JSON.stringify(this.userInfo));}},})</script>
</body></html>

过滤器

过滤器:

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

语法:

1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}

2.使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"

备注:

1.过滤器也可以接收额外参数、多个过滤器也可以串联

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

<body><!-- 准备好一个容器 --><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在是{{fmTime}}</h3><!-- methods实现 --><h3>现在是{{getFmtTime()}}</h3><!-- 过滤器实现 --><h3>现在是{{time | timeFormater}}</h3><!-- 过滤器实现 (传参)--><h3>现在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3><h3 :x="msg | mySlice">world</h3></div><div id="root2"><h2>{{msg | mySlice}}</h2></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示//全局过滤器Vue.filter('mySlice', function (value) {return value.slice(0,4)})new Vue({el: '#root',data: {time: 1723081550375,msg:'hello, world',},computed:{fmTime(){return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')}},methods:{getFmtTime(){return dayjs(this.time).format('YYYY年-MM月-DD日 HH:mm:ss')}},//局部过滤器filters:{timeFormater(value, str='YYYY年-MM月-DD日 HH:mm:ss'){return dayjs(value).format(str)},// mySlice(value){//     return value.slice(0,4)// }}})new Vue({el:'#root2',data:{msg: 'hello,world',}})</script>
</body></html>

内置指令

v-text指令

<body><!-- 准备好一个容器 --><div id="root"><div>{{name}}</div><div v-text="name"></div></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'hello',},})</script>
</body>

在这里插入图片描述

v-html指令

<body><!-- 准备好一个容器 --><div id="root"><div>{{name}}</div><div v-html="str"></div></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {name: 'hello',str:' <h3>你好</h3>'},})</script>
</body>

在这里插入图片描述

v-once指令

<body><!-- v-once指令:1.v-once所在节点在初次动态渲染后，就视为静态内容了。2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。--><!-- 准备好一个容器 --><div id="root"><h2 v-once>初始化的n值是{{n}}</h2><h2>当前的n值是{{n}}</h2><button @click="n++">点我n+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n:1,},})</script>
</body>

v-pre指令

<body><!-- V-pre指令:1.跳过其所在节点的编译过程。2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。--><!-- 准备好一个容器 --><div id="root"><h2 v-pre>hello world</h2><h2 v-pre>当前的n值是{{n}}</h2><button @click="n++">点我n+1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n: 1,},})</script>
</body>

v-cloak指令

<div id="app" v-cloak>  {{ message }}  
</div>

当 Vue 实例开始编译时，它会移除所有元素的 v-cloak 属性。因此，一旦 Vue 完成编译，[v-cloak] 选择器将不再匹配任何元素，这些元素将变得可见。这确保了用户不会看到未编译的模板。

自定义指令

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 --><!-- 准备好一个容器 --><div id="root"><h2>当前值是: <span v-text="n"></span></h2><h2>放大10倍后n的值是: <span v-big="n"></span></h2><button @click="n++">点我n加1</button><hr><input type="text" v-bind:value="n"><br><br><input type="text" v-fbind:value="n"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',data: {n: 1,},directives:{//big函数何时会被调用？// 1， 指令与元素成功绑定时// 2, 指令所在的模板被重新解析时big(element, binding){//element       =>      <span> </span>//binding.value =>          nelement.innerText = binding.value * 10},fbind:{//指令与元素成功绑定时调用bind(element, binding){element.value = binding.value},// 指令所在元素被插入页面时inserted(element, binding){element.focus()},// 指令所在的模板被重新解析时update(element, binding){element.value = binding.value}}}})</script>
</body></html>

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

生命周期

引出生命周期

生命周期:

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm或组件实例对象。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><div id="root"><h2 v-if="a">你好啊</h2><h2 :style="{opacity:opacity}">hello, world</h2></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {a:false,opacity:1,},methods: {// change() {//     setInterval(() => {//         this.opacity -= 0.01//         if (this.opacity <= 0) { this.opacity = 1 }//     }, 16);// }},// Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountdmounted() {setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) { this.opacity = 1 }}, 16);setTimeout(() => {this.a = true}, 2000);},})//通过外部的定时器实现， 不推荐// setInterval(() => {//     vm.opacity -= 0.01//     if(vm.opacity <= 0) {vm.opacity = 1}// }, 16);</script>
</body></html>

分析生命周期

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><!-- 准备好一个容器 --><div id="root"></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示new Vue({el: '#root',template:` <div><h2>当前值是: <span v-text="n"></span></h2><button @click="add">点我n加1</button><button @click="bye">点我销毁vm</button></div>`,data: {n:1,},methods: {add(){this.n++},bye(){this.$destroy()console.log('销毁');}},watch:{n(){console.log('n 变了');}},// 挂载流程beforeCreate() {//初始化：生命周期、事件、但数据代理还未开始，//此时无法通过vm访问到data中的数据，methods中的方法console.log('beforeCreate');// console.log(this);},created() {//初始化：数据监测、数据代理//此时可以通过vm访问到data中的数据，methods中的配置方法console.log('created');// console.log(this);},// vm.$mount(#root)beforeMount() {//此时页面呈现的是未经过Vue编译的DOM结构，所有的Dom的操作最终都不奏效console.log('mount');// console.log(this);},mounted() {//此时，页面中呈现的是经过Vue编译的DOM， 对dom的操作均有效// 一般在此进行： 开启定时器，发送网络请求， 订阅消息， 绑定自定义事件等初始化操作// console.log('mounted', this.$el);console.log('mounted')},// 更新流程beforeUpdate() {//此时，数据是新的，但页面是旧的console.log('beforeUpdate');// console.log(this.n);},updated() {//此时数据是新的，页面也是新的console.log('Updated');// console.log(this.n);},beforeDestroy() {// 此时vm中所有的data， methods、指令等等，都处于可用状态//马上要执行销毁过程//一般此阶段，关闭定时器，取消订阅消息、解绑自定义事件等收尾工作console.log('beforeDestroy');},destroyed() {console.log('destroyed');},})</script>
</body></html>

总结生命周期

常用的生命周期钩子:

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效,但原生DOM事件依然有效。

3.一般不会再beforeDestroy操作数据,因为即便操作数据，也不会再触发更新流程了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入vue --><script type="text/javascript" src="../js/vue.js"></script><title>Document</title>
</head><body><div id="root"><h2 v-if="a">你好啊</h2><h2 :style="{opacity:opacity}">hello, world</h2><button @click="stop">点我停止变换</button><button @click="opacity =  1">点我透明度变 1</button></div><script type="text/javascript">Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示const vm = new Vue({el: '#root',data: {a: false,opacity: 1,timer:0,},methods: {stop(){this.$destroy()}},// Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountdmounted() {this.timer = setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) { this.opacity = 1 }}, 16);setTimeout(() => {this.a = true}, 8000);},beforeDestroy() {clearInterval(this.timer)},})</script>
</body></html>

浏览器本地存储

localStorage

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>localStorage</title></head><body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.localStorage.setItem("msg", "hello");window.localStorage.setItem("person", JSON.stringify(p));}function readData() {const result = localStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {localStorage.removeItem("msg");}function deleteAllData() {localStorage.clear();}</script></body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.sessionStorage.setItem("msg", "hello");window.sessionStorage.setItem("person", JSON.stringify(p));}function readData() {const result = sessionStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {sessionStorage.removeItem("msg");}function deleteAllData() {sessionStorage.clear();}</script></body>
</html>

localStorage

点我保存一个数据

<button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.localStorage.setItem("msg", "hello");window.localStorage.setItem("person", JSON.stringify(p));}function readData() {const result = localStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {localStorage.removeItem("msg");}function deleteAllData() {localStorage.clear();}
</script>

## sessionStorage```html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空数据</button><script>let p = { name: "jack", age: 18 };function saveData() {window.sessionStorage.setItem("msg", "hello");window.sessionStorage.setItem("person", JSON.stringify(p));}function readData() {const result = sessionStorage.getItem("person");console.log(JSON.parse(result));}function deleteData() {sessionStorage.removeItem("msg");}function deleteAllData() {sessionStorage.clear();}</script></body>
</html>

查看全文

http://www.lryc.cn/news/446979.html