vue基础知识精讲

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量133 收藏 1
点赞数
分类专栏： 前端 文章标签： vue js javascript
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_36142158/article/details/110065040
版权

一、Vue实例生命周期函数

生命周期函数是vue实例在某一个时间点会自动执行的函数。

image

测试一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue实例生命周期函数</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app"></div>
    
        <script>
            //生命周期函数是vue实例在某一个时间点会自动执行的函数
            var vm = new Vue({
                el:"#app",
                template:"<div>{{test}}</div>",
                data:{
                    test: "Hello World!"
                },
                beforeCreate: function(){
                    console.log("beforeCreate");
                },
                created: function(){
                    console.log("created");
                },
                beforeMount:function(){
                    console.log(this.$el);
                    console.log("beforeMount");
                },
                mounted:function(){
                    console.log(this.$el);
                    console.log("mounted");
                },
                //组件销毁时，函数执行
                beforeDestroy:function(){
                    console.log("beforeDestroy");
                },
                //组件销毁完成之后，函数执行
                destroyed:function(){
                    console.log("destroyed");
                },
                //数据开始改变，还没渲染之前，函数执行
                beforeUpdate:function(){
                    console.log("beforeUpdate");
                },
                //数据渲染之后，函数执行
                updated:function(){
                    console.log("updated");
                }
            })
        </script>
    </body>
</html>

二、Vue的模板语法

2.1 差值表达式

{{}} 两个花括号

举个栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">{{test}}</div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"你好啊！"
                }
            })
        </script>
    </body>
</html>

这里的{{test}}就是差值表达式。

2.2 v-text

类似差值表达式，将vue传来的数据替换已有的数据。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-text="test"></div>
        </div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"你好啊！"
                }
            })
        </script>
    </body>
</html>

和差值表达式效果一样。

2.3 v-html

转义输出vue传来的数据。

举个栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{test}}</div>
            <div v-text="test"></div>
            <div v-html="test"></div>
        </div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"<h1>你好啊！</h1>"
                }
            })
        </script>
    </body>
</html>

看一下效果：

image.png

2.4 小结

差值表达式、v-text、v-html三种方式不仅仅可以接受变量，还可以写js语法。

eg：

<div>{{test + '世界'}}</div>
<div v-text="test + '世界'"></div>
<div v-html="test + '世界'"></div>

三、计算属性,方法与侦听器

3.1 计算属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性、方法、侦听器</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{fullName}}
            {{age}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName:"小",
                    lastName:"默",
                    age:"23" 
                },
                //计算属性
                computed:{
                    fullName:function(){
                        console.log("计算了一次");
                        return this.firstName + " " + this.lastName
                    }
                }
            })
        </script>
    </body>
</html>

计算属性具有缓存性，在此例中，若firstName和lastName的值没有发生改变，则fullName只计算一次。若发生改变则会再次计算。可在控制台依次调试验证。

3.2 方法

<div id="app">
			{{fullName()}}
			{{age}}
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					firstName:"小",
					lastName:"默",
					age:"23" 
				},
				//使用方法
				methods:{
					fullName: function() {
						console.log("计算了一次");
						return this.firstName + " " + this.lastName;
					}
				}
				//计算属性
				// computed:{
				// 	fullName:function(){
				// 		console.log("计算了一次");
				// 		return this.firstName + " " + this.lastName
				// 	}
				// }
			})
		</script>

使用方法时，效率没有计算属性高，因为无论值有没有改变，都会再次调用fullName方法，再次计算。

3.3 侦听器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性、方法、侦听器</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{fullName}}
            {{age}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName:"小",
                    lastName:"默",
                    fullName:"小 默",
                    age:"23" 
                },
                //侦听
                watch:{
                    firstName:function() {
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    },
                    lastName:function() {
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    }
                }
                //使用方法
                // methods:{
                //  fullName: function() {
                //      console.log("计算了一次");
                //      return this.firstName + " " + this.lastName;
                //  }
                // }
                //计算属性
                // computed:{
                //  fullName:function(){
                //      console.log("计算了一次");
                //      return this.firstName + " " + this.lastName
                //  }
                // }
            })
        </script>
    </body>
</html>

在此例中：当age改变时，缓存值不变，不会进入计算。当firstName改变时，会再次计算。

3.4 小结

由上面三个例子可以看出，computed（计算属性）和watch（侦听器）同样具有缓存机制，但是computed写法比较简便，而methods（方法）不具有缓存机制。

若需求可以同时用computed、watch、methods三种方式实现，优先级computed > watch > methods。

四、计算属性的 getter 和 setter

<div id="app">
            {{fullName}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName: "小",
                    lastName: "默"
                },
                computed:{
                    fullName:{
                        get:function(){
                            return this.firstName + " " + this.lastName;
                        },
                        set:function(value){
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                            console.log(value);
                        }
                    }
                }
            })
        </script>

在此例中：

computed中，不仅可以使用get获取值，也可以使用set设置值改变相关联的值，引起fullName重新计算。

五、Vue中的样式绑定

需求：通过点击文字，让文字改变颜色。

5.1 class的对象绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <style type="text/css">
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    isActivated: false
                },
                methods:{
                    handleDivClick: function() {
                        this.isActivated = !this.isActivated;
                    }
                }
            })
        </script>
    </body>
</html>

5.2 数组

​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <style type="text/css">
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div> -->
            <div @click="handleDivClick"
                 :class="[activated]">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    // isActivated: false
                    activated: ""
                },
                methods:{
                    handleDivClick: function() {
                        // this.isActivated = !this.isActivated;
                        // if(this.activated === "activated"){
                        //  this.activated = "";
                        // }else{
                        //  this.activated = "activated";
                        // }
                        this.activated = this.activated === "activated" ? "" : "activated";
                    }
                }
            })
        </script>
    </body>
</html>

​

通过改变activate的值，引用style。

5.3 style

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <!-- <style type="text/css">
            .activated {
                color: red;
            }
        </style> -->
    </head>
    <body>
        <div id="app">
            <!-- <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div> -->
            <!-- <div @click="handleDivClick"
                 :class="[activated]">
                Hello World
            </div> -->
            <div :style="styleObj" @click="handleDivClick">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    // isActivated: false
                    // activated: ""
                    styleObj:{
                        color:"black"
                    }
                },
                methods:{
                    handleDivClick: function() {
                        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
                    }
                    // handleDivClick: function() {
                    //  // this.isActivated = !this.isActivated;
                    //  // if(this.activated === "activated"){
                    //  //  this.activated = "";
                    //  // }else{
                    //  //  this.activated = "activated";
                    //  // }
                    //  this.activated = this.activated === "activated" ? "" : "activated";
                    // }
                }
            })
        </script>
    </body>
</html>

5.4 小结

无论是用class或者是style，都可以通过对象和数组的方式，为class或者style赋值，从而达到绑定样式的效果。

六、Vue中的条件渲染

6.1 v-if

使v-if默认为false，页面不会被渲染

<div id="app">
            <div v-if="show">
                {{message}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    show: false,
                    message: "Hello Xiaomo"
                }
            })
        </script>

运行，此时页面没有被渲染：

image.png

调出控制台，改变v-if（show）的默认值，发现页面被渲染了：

image.png

这就是vue中的条件渲染。

6.2 v-show

v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

6.3 v-else-if 与 v-else

<div id="app">
            <div v-if="show === 'a'">This is A</div>
            <!-- <div v-show="show" data-test="v-show">{{message}}</div> -->
            <div v-else-if="show === 'b'">This is B</div>
            <div v-else>This is others</div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    show:"a"
                }
            })
        </script>

v-if 与 v-else-if 与 v-else 需要连在一起写。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

七、Vue中的列表渲染

需求：将一个数组中的值，渲染到页面。

7.1 v-for

<div id="app">
            <div v-for="item in list">
                {{item}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:[
                        "hello",
                        "xiaomo",
                        "nice",
                        "to",
                        "meet",
                        "you"
                    ]
                }
            })
        </script>

使用v-for是最基础的循环。

7.2 唯一标识

<div id="app">
            <div v-for="(item, index) in list"
                 :key="item.id">
                {{item.text}} -- {{index}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:[{
                        id:"1",
                        text:"Hello"
                    },{
                        id:"2",
                        text:"xiao"
                    },{
                        id:"3",
                        text:"mo"
                    },
                    ]
                }
            })
        </script>

运行结果：

image.png

7.3 操作数组的七个方法

push -- 在数组的尾部添加一个或者多个元素，并返回数组的新长度

pop  -- 删除数组的最后一个元素，并返回它的删除值。

sort -- 返回排序后的数组

splice -- 用来删除或插入元素，会修改原数组

unshift -- 可向数组的开头添加一个或更多元素，并返回新的长度

shift -- 把数组的第一个元素从其中删除，并返回第一个元素的值

reverse -- 返回逆序数组

7.4 对象循环

<div id="app">
			<div v-for="(item, key, index) of userInfo">
				{{item}} -- {{key}} -- {{index}}
			</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					userInfo:{
						name:"xiaomo",
						age:23,
						gender:"male"
					}
				}
			})
		</script>

i小默
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-第3章 Vue 基础精讲
07-29
本章将深入讲解Vue的基础知识，帮助你快速掌握这个强大的框架。 一、安装与设置 在开始Vue的学习之前，你需要知道如何安装Vue。Vue可以通过CDN链接直接引入，也可以通过npm或yarn进行全局安装。对于开发环境，推荐...
vue组件精讲.docx
07-14
对于复杂的应用，掌握这些知识至关重要，可以帮助开发者更好地组织代码，提高代码复用性和可维护性。 总之，无论你是已经熟悉Vue.js的开发者还是希望深入理解组件化开发的读者，本小册都将为你提供宝贵的实践经验和...
vue.js精讲01
打杂人
11-10 713
文章目录 vue 和 ag 的区别。 vue雏形 常用指令 事件 vue + bootstrap 实现 todolist 相关源码 笔记及源码地址 ： https://github.com/wll8/vue_note 01 2017-09-13 view 一个 mvvm框架(库)，和 ag 类似。 比较小巧，容易上手。 mvc: mv
Vue基础精讲
weixin_34393428的博客
05-12 143
vue基础精讲 一、VUE的模板语法 vue的模板语法比较常用的有三种： {{msg}} 插值表达式是{{msg}},会以文本的方式，将data中相同名字的msg表现出来 v-html v-html="name"，v-html会以HTML代码的形式渲染出data 中name的内容 v-text v-text="name"，v-text会以文本的形式渲染出data中的name内容 ...
Vue 基础精讲(一)
SOALIN的博客
12-02 412
Vue 实例 创建实例并对实例的数据和方法进行操作 创建一个Vue实例，并让其接管id为root的DOM的显示 var vm = new Vue({ el: '#root' })
Vue 基础精讲
大家好，我是 ed.
02-18 250
Vue 基础精讲 Vue 官方文档：https://cn.vuejs.org/v2/guide/ VUE 实例 　　每个组件都是一个 vue 的实例。 　　一个 vue 项目是由实例组成的。 　　vue 实例上有很多的实例属性和方法。 <!DOCTYPE html> <html lang="en"> <head> <me...
Vue基础精讲 —— 深入理解v-model
qq_32614411的博客
08-24 625
未完待续 https://www.jianshu.com/p/4147d3ed2e60
vue前端知识笔记……
02-18
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。它以其易学易用、高效和可复用性而备受开发者喜爱。...这些知识对于开发复杂的前端应用至关重要，也是成为一名合格的Vue开发者的基础。
Vue精讲v1.0.pdf
12-23
### Vue精讲v1.0.pdf 知识点概览 #### 1. 前端体系概述 - **目标定位**：旨在帮助Java后台程序员深入理解前端技术，为成为互联网Java全栈工程师奠定坚实的基础。 - **核心内容**：本书聚焦于前端技术的核心组成部分...
全新Vue3.0全家桶 零基础入门到项目实战
06-30
本课程将基于 Vue3.0 正式版，从Vue基础语法入手，全面掌握 Vue3.0 全家桶技术栈，并结合实战项目开发，让你拥有Vue3.0项目开发经验，更好的掌握Vue开发企业项目的流程 。 本课程共包括三个模块 一、Vue基础篇 本...
Vue从入门到精通课程超详细
gjb760662328的博客
03-21 2679
一文从vue2.0脚手架安装、语法、组件到实战开发超详细讲解流程
vue精讲
04-13
本节主要是来讲解vue的基础使用,听完后基本可以满足日常的开发需要
初识Vue
Floatwor青舟的博客
10-30 1295
目录为什么学习流行框架框架和库的区别Vue.js简介安装第一个简单实例一些常用指令跑马灯小案例 为什么学习流行框架 企业中为了提高开发效率：在企业中，时间就是效率，效率就是金钱。 提高开发效率的发展历史：原生JS–>Jquery之类的类库–>前端模板引擎–>Angular.js/Vue.js等（能够帮助我们减少不必要的DOM操作，提高渲染效率。通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了） 在Vue中，一个核心的概念就是，让用户不再操作DOM元
Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性
qq_32614411的博客
08-16 2718
Vue组件基础定义 import Vue from 'vue' const compoent = { props: { active: { // type: Boolean, // required: true, validator (value) { return typeof value === 'boolean' ...
Vue实战项目开发--vue基础精讲
任性的wo的博客
06-08 9375
项目的源代码在GitHub上：点击查看Vue实例vue的每一个组件都是一个实例，该实例对应着很多属性和方法。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue实例&lt;/title&gt; &lt;scr
vue样式初始化_Vue 中的样式绑定
weixin_30716641的博客
12-28 705
class的对象绑定在开发的过程中，难免会给dom元素添加一些样式，在 Vue 之中我们该如何绑定样式呢？现在有这样一个想法，div被点击一次，变成红色，当再次被点击时，恢复为默认的颜色， 再点击一次又变成红色，想实现这样的操作，如果凭借以前对 Vue 的了解，好像是没有办法实现的，因为我们很难想到数据如何和样式进行绑定，Vue 是面向数据的一种编程方式，它不在是直接操作dom的编程方式了，所以呢...
Vue基础精讲 —— Vue中computed和watch使用场景和方法
qq_32614411的博客
08-16 4119
watch和computed都是以Vue的依赖追踪机制为基础，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。 methods用来定义函数，它需要手动调用才能执行，需要像”fuc()”这样去调用它（假设函数为fuc） computed是计算属性，事实上和data对象里的数据属性是...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 641
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1334
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值