Vue.js基础特性、生命周期及常用指令

news2024/11/28 2:30:08

目录

一、Vue构造选项

el根标签

data数据对象

methods定义方法

二、生命周期

三、常用指令


一、Vue构造选项

选项说明
el唯一根标签,决定Vue实例会管理哪一个DOM节点
dataVue实例对应的数据对象
methods定义Vue实例的方法,可以在其他地方调用,也可以在指令中使用
computed定义Vue实例的计算属性,可以在其他地方调用,也可以在指令中使用,本质上是一个属性而不是一个函数,在电泳时不用加小括号
components定义Vue实例的子组件
filters定义Vue实例的过滤器
watch监听数据变化,观察和响应Vue实例上的数据变动

el根标签

        在创建Vue实例时,必不可少的一个选项就是el。el表示唯一根标签,用于指定一个页面中已存在的DOM元素来挂载Vue实例,即通过class或id选择器将页面DOM元素与Vue实例进行绑定。

data数据对象

        data是Vue实例的数据对象,Vue.js会将data对象的属性转换为getter/setter,从而让data属性能够响应数据变化,格式如下:

var app = new Vue( { 数据 } )

(1)以对象(Object)的形式,代码如下:

    <div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"Mustache表达式通过data为对象获取content的值"
            }
        })
    </script>

(2)以函数(function)的形式,代码如下:

        <div id="app">{{content}}</div>
        <script>
            var app = new Vue({
                el:"#app",
                data:function(){
                    return{
                        content:"Mustache表达式通过data为对象获取content的值"
                    }
                }
            })
        </script>

methods定义方法

        methods用来定义Vue实例中的方法,可以通过Vue实例直接访问这些方法。通过methods定义的方法还可以作为页面中的事件处理方法使用,一旦事件被触发,即执行相应的方法进行处理。基本语法如下:

        <script>
            var app = new Vue({
                methods:{
                    方法名:function(){ }
                }
            })
        </script>

演示单击按钮修改文本:

        <p>单击按钮修改文本</p>
        <div id="app">
            <p>{{msg}}</p>
            <button @click="doChange">请单击</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"初始化文本!"
                },
                methods:{
                    doChange:function(){
                        this.msg="新的文本!" //改变data中msg属性的值
                     }
                }
            })
        </script>

执行结果对比

二、生命周期

 一个Vue实例完整的生命周期可以分为4个阶段:

初始化阶段、模板编译阶段、挂载阶段、卸载阶段

生命周期流程详细介绍如下:

(1)实例化Vue: new Vue()

(2)初始化事件和生命周期:init events 和 init lifecycle

(3)执行beforeCreate钩子函数

(4)挂载数据(属性赋值)

(5)执行Created钩子函数

(6)检查

(7)执行beforeMount钩子函数

(8)模板编译

(9)执行Mounted钩子函数

(10)执行before Update钩子函数

(11)执行updated钩子函数:Vue实例销毁之前

(13)执行destroyed钩子函数:Vue实例销毁后

三、常用指令

1、v-text

        v-text用来在DOM元素内部插入文本内容,该指令以文本的方式更新元素的内容,即使是HTML代码,它也只当作普通字符串处理,不会解析标签,与插值表达式作用相同。

        <div id="app" v-text="msg"></div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"Hello,v-text!"
                }
            })
        </script>

 

 注意:如果同时显示用户前台数据,那么就需要用插值表达式;如果只是单独显示Vue实例里的数据,建议使用“v-text”指令。

2、v-html

        v-html用来在DOM元素内部插入HTML代码内容

        <div id="app" v-html="msg"></div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"<h1>Hello,v-html!</h1>"
                }
            })
        </script>

可以看出v-text与v-html指令不同的是,v-html绑定的数据可以是HTML结构 

3、v-cloak

        v-cloak指令可以隐藏未编译的Mustache标签直到关联实例结束编译

        <style>
            [v-cloak]{
                display:none;
            }
        </style>
        <div id="app"v-cloak>{{msg}}</div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"Hello,v-cloak!"
                }
            })
        </script>

 4、v-bind

        v-bind指令用于实现单向动态数据绑定

        <div id="app">
            <input v-bind:value="msg">
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"Hello,v-bind!"
                }
            })
        </script>

注意:当改变app.msg的值时,页面文本框中的数据会自动更新,但不能实现视图驱动数据变化,所以v-bind指令时单向数据绑定,而不是双向数据绑定

v-bind可以省略v-bind,简写为一个冒号“ :

<!-- 完整写法 -->
<img v-bind:src="src"></img>
<!-- 简写 -->
<img:src="src"></img>

5、v-on

        v-on指令用来绑定事件监听器

        <div id="app">
            <p>{{msg}}</p>
            <button v-on:click="sayHello">请单击</button>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    msg:"Hi"
                },
                methods:{
                    sayHello:function(){
                        this.msg="Hello,v-on!"
                    }
                }
            })
        </script>

 v-on可以直接使用“@”简写:

<!-- 完整写法 -->
<a v-on:click="do"></a>
<!-- 简写 -->
<a @click="do"></a>

 所有支持Vue.js的浏览器中都能正确解析简写方式,并且它们不会出现在最终渲染的标签中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/372705.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

慢SQL出现原因、优化、开启慢查询日志

文章目录慢SQL:出现原因&#xff1a;解决方式&#xff1a;开启慢查询日志&#xff1a;慢SQL: 出现原因&#xff1a; &#xff08;1&#xff09;数据库表索引设置不合理 &#xff08;2&#xff09;SQL语句有问题&#xff0c;需要优化 解决方式&#xff1a; &#xff08;1&am…

Java 抽象类和接口

文章目录一、抽象类1. 抽象类定义2. 抽象类成员特点二、接口1. 接口概述2. 接口成员特点3. 类和接口的关系4. 抽象类和接口的区别5. 接口案例三、形参和返回值一、抽象类 1. 抽象类定义 在 Java 中&#xff0c;一个没有方法体的方法应该定义为抽象方法&#xff0c;而类中如果…

现在转行做程序员的多吗?

曾经有一名程序员说&#xff0c;他在编写程序时&#xff0c;就像一个发明家在做实验&#xff1b;当他把程序编好可以运行时&#xff0c;他就已经是个发明家了。 程序员作为众多转行人员首选的职业&#xff0c;也是被大众熟知了。但我们需要知道的不仅是它作为一个职业的定义&a…

Spring超级全家桶,学完绝对是惊艳面试官的程度

前言Spring框架自2002年诞生以来一直备受开发者青睐&#xff0c;它包括SpringMVC、SpringBoot、Spring Cloud、Spring Cloud Dataflow等解决方案。有人亲切的称之为&#xff1a;Spring 全家桶。很多研发人员把spring看作心目中最好的java项目&#xff0c;没有之一。所以这是重点…

AtCoder Beginner Contest 290 G. Edge Elimination(思维题 枚举+贪心)

题目 T(T<100)组样例&#xff0c;每次给出一棵深度为d的k叉树&#xff0c; 其中&#xff0c;第i层深的节点个数为 保证k叉树的所有节点个数tot不超过1e18&#xff0c; 求在k叉树上构建一棵大小恰为x的连通块&#xff0c;所需要断开的最少的树边的条数(x<tot<1e18)…

VScode远程连接服务器-过程试图写入的管道不存在-could not establist connection to【已解决】

问题描述 使用服务器的过程中突然与服务器断连&#xff0c;报错如下&#xff1a;could not establist connection to [20:23:39.487] > ssh: connect to host 10.201.0.131 port 22: Connection timed out > [20:23:39.495] > 过程试图写入的管道不存在。 > [20…

hook与mixin

看完vue3就开始看vue3的源码&#xff0c;表示很懵~ 刚把rollup打包搞完&#xff0c;这不响应式就接着来了&#xff01;&#xff0c;还是写篇直接使用vue3的博客清清脑吧&#xff01; 什么是hook、mixin&#xff1f; mixin: Vue2中多个组件内存在重复JS业务逻辑&#xff0c;使…

JavaScript 闭包【自留】

闭包的概念理解 闭包的定义 ✅ 这里先来看一下闭包的定义&#xff0c;分成两个:在计算机科学中和在JavaScript中。 ✅ 在计算机科学中对闭包的定义(维基百科): 闭包(英语:Closure)&#xff0c;又称词法闭包(Lexical Closure)或函数闭包(function closures);是在支持头等函数…

QT之OpenGL模板测试

QT之OpenGL模板测试1. 概述2. 使用步骤及函数介绍3. Demo4. 参考1. 概述 当片段着色器处理完一个片段之后&#xff0c;模板测试(Stencil Test)会开始执行&#xff0c;和深度测试一样&#xff0c;它可能会丢弃片段。被保留下来的片段会进入深度测试。 一个模板缓冲中&#xff…

Web Spider Babel安装 Ast抽象语法 - 基本使用

文章目录一、资源地址二、遍历2.1 树结构遍历模式2.2 案例三、下载安装四、案例操作总结提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、资源地址 Ast反混淆语法在线网址&#xff1a;https://astexplorer.net Babel官方文档&#xff1a;https://ww…

玩转Linux内核进程调度,这一篇就够(所有的知识点)

一&#xff0c;进程的分类 在 CPU 的角度看进程行为的话&#xff0c;可以分为两类&#xff1a; CPU 消耗型&#xff1a;此类进程就是一直占用 CPU 计算&#xff0c;CPU 利用率很高IO 消耗型&#xff1a;此类进程会涉及到 IO&#xff0c;需要和用户交互&#xff0c;比如键盘输…

性能测试流程

性能测试实战一.资源指标分析1.判断CPU是否瓶颈的方法2.判断内存是否瓶颈的方法3.判断磁盘I/O是否瓶颈的方法4.判断网络带宽是否是瓶颈的方法二.系统指标分析三.性能调优四.性能测试案例1.项目背景2.实施规划&#xff08;1&#xff09;需求分析&#xff08;2&#xff09;测试方…

Faster-Rcnn修改转数据集文件

目录 学习python的一些基础知识 argparser assert关键字 让你秒懂Python 类特殊方法__getitem__ lxml.etree.fromstring的使用 统计一下json文件内的种类 正脸红外光 正脸-混合红外光 正脸-交叉偏振光 正脸-平行偏振光 正脸-紫外光 正脸-棕色光 调用mydataset可视化…

我的 System Verilog 学习记录(5)

、 引言 本文简单介绍 System Verilog 语言的 控制流。 前文链接&#xff1a; 我的 System Verilog 学习记录&#xff08;1&#xff09; 我的 System Verilog 学习记录&#xff08;2&#xff09; 我的 System Verilog 学习记录&#xff08;3&#xff09; 我的 System Ver…

算法课堂-分治算法

分治算法 把一任务分成几部分&#xff08;通常是两部分&#xff09;来完成&#xff08;或只完成一部分&#xff09;&#xff0c;从而实现整个任务的完成 或者你可以把递归理解为分治算法的一部分 因为递归就是把问题分解来解决问题 例子 称假币 最笨的方法&#xff1a;两两称…

(三十六)大白话数据库幻读,本质到底是个什么问题?

上一讲我们给大家讲解了不可重复读这个问题&#xff0c;这个问题简单来说&#xff0c;就是一个事务多次查询一条数据&#xff0c;结果每次读到的值都不一样&#xff0c;这个过程中可能别的事务会修改这条数据的值&#xff0c;而且修改值之后事务都提交了&#xff0c;结果导致人…

多变量线性回归模型

多变量线性回归模型 模型参数为n1维向量&#xff0c;此时模型公式为 hθ(x)θ0x0θ1x1θ2x2...θnxnh_{\theta}(x)\theta_{0}x_{0}\theta_{1}x_{1}\theta_{2}x_{2}...\theta_{n}x_{n} hθ​(x)θ0​x0​θ1​x1​θ2​x2​...θn​xn​ 可以简化为 hθ(x)θTXh_{\theta}(x)\th…

Gradle7.4安装与基本使用

文章目录一.前言二.下载Gradle三.Gradle镜像源-全局级配置四.配置Gradle wrapper-项目级配置五.Gradle对测试的支持五.生命周期5.1 settings文件六.Gradle任务入门6.1 任务行为6.2 任务依赖方式七. Dependencies依赖引入7.1 依赖冲突及解决方案八.Gradle整合多模块SpringBoot九…

NLP复习大纲

第一章&#xff1a;概述 1. 什么是自然语言处理&#xff1f; 计算机具备人类的听、说、读、写、译、问、答、搜索、摘要、对话和聊天等能力 知识和常识进行推理和决策 支持客服、诊断、法律、教学等场景 2. 自然语言处理的主要任务有哪些&#xff1f; 分析、理解、转换、…

要理解网络,其实不就是理解这三张表吗

我们如果要理解数据是如果在网络世界中穿梭的&#xff0c;那其实只要了解其中的三张表就可以了。这三张表分别为路由表、转发表、ARP 表。 假设我们用聊天工具聊天的时候&#xff0c;我在北京&#xff0c;你在广东&#xff0c;当我给你发送一条消息的时候。搭载这这条消息的数据…