Vue核心语法

news2024/12/26 22:19:31

Vue核心语法

vue下载

我们以前都是用的框架来搭建的，省去了很多内容，今天我们从原始的方式来使用vue，下面是下载地址
在这里插入图片描述

响应式

未使用响应式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app"></div>
        <script src="vue.min.js"></script> <!--这里引入的就是我们下载下来的vue.main.js-->
        <script>
            let value = '这是内容'
            document.getElementById('app').textContent=value
            // value = '新内容'
            // document.getElementById('app').textContent=value
            const vm=new Vue({
            })
        </script>
    </body>
</html>

在这里插入图片描述
我们把注释去掉

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app"></div>
        <script src="vue.min.js"></script> <!--这里引入的就是我们下载下来的vue.main.js-->
        <script>
            let value = '这是内容'
            document.getElementById('app').textContent=value
            value = '新内容'
            document.getElementById('app').textContent=value
            const vm=new Vue({
            })
        </script>
    </body>
</html>

在这里插入图片描述
从上面的演示可以看到，没有用响应式的时候，如果我们要变更元素，需要处理数据的逻辑，还需要再次操作一下DOM，很繁琐

let、var、const

const和let的关系

均不可重复声明

let声明的变量可以改变，值和类型都可以改变；const声明的常量不可以改变，这意味着，const一旦声明，就必须立即初始化，不能以后再赋值。

let 和 const 是值的修改问题

let和var的关系

var是函数作用域，而let是块作用域。在函数内声明了var，整个函数内都是有效的，在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（for循环内）定义的变量，在其外面是不可被访问的。

使用响应式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app"><!--1、先为元素定义一个id，后续这个元素会被定义为vue的生效位置-->
            <p>{{title}}</p> <!--4、这里的{{title}}即为插值表达式-->
            <p>{{content}}</p>
        </div> 
        <script src="vue.min.js"></script> <!--这里引入的就是我们下载下来的vue.main.js-->
        <script>
            const vm=new Vue({
                el: '#app' ,//2、 #号，即带选择器的使用方式，属性el，用于设置Vue的生效位置 ，选定了元素之后，它所有的响应式以及后续的语法功能，只会在app这个元素内部生效，在其他元素中编写的话，是没有效果的
                data(){    // 3、 固定写法,协商需要响应式的数据
                    return{
                        title: '这是标题文本',
                        content: '这是文本内容'
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
发现就展示出来了
还记得我们const vm=new Vue，那我们想要访问data里的数据，就可以通过这个vm实例来访问
在这里插入图片描述
我们也可以操作元素进行变更
在这里插入图片描述
这就是响应式编程了

这里绑定生效的位置，是不是让人想起了Vue脚手架创建的项目
在这里插入图片描述
在这里插入图片描述

methods属性

methods，顾名思义，是方法，里面就存放着我们定义的各种方法，比如说我要打印一写内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p>{{output()}}</p> <!--3、调用了output方法-->
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        title: '这是标题文本',
                        content: '这是文本内容'
                    }
                },
                // 1、methods属性，没有()，和data对比一下
                methods:{
                    output(){//2、这个就是带()的，定义的方法
                        console.log("methods方法执行了")
                        return '标题为:'+ this.title+',内容为:'+this.content
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

计算属性

那如果我要执行三次呢
复制两遍

<p>{{output()}}</p> <!--3、调用了output方法-->

在这里插入图片描述
问题是我什么都没变，还是调用了三次，是消耗资源的，这就引申出了计算属性这个概念

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p>{{output()}}</p>
            <p>{{output()}}</p>
            <p>{{output()}}</p> 
            <p>{{returnContent}}</p>  <!--3、多次执行计算属性中的方法，记住：这个计算属性调用的时候不能带()！-->
            <p>{{returnContent}}</p> 
            <p>{{returnContent}}</p> 
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        title: '这是标题文本',
                        content: '这是文本内容'
                    }
                },
                methods:{
                    output(){
                        console.log("methods方法执行了")
                        return '标题为:'+ this.title+',内容为:'+this.content
                    }
                },
                computed: { //1、计算属性
                    returnContent(){ //2、计算属性中定义方法
                        console.log("computed方法执行了")
                        return '标题为:'+ this.title+',内容为:'+this.content
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
我们发现明明写了三行

<p>{{returnContent}}</p>

但是只执行了一次，这就是计算属性的特点：具有缓存性

有意思

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p>{{output()}}</p>
            <p>{{output()}}</p>
            <p>{{output()}}</p> 
            <p>{{returnContent}}</p>  <!--3、多次执行计算属性中的方法，记住：这个计算属性调用的时候不能带()！-->
            <p>{{returnContent}}</p> 
            <p>{{returnContent}}</p> 
            <p>{{updateTitle()}}</p>  <!--4、修改一下data信息-->
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        title: '这是标题文本',
                        content: '这是文本内容'
                    }
                },
                methods:{
                    output(){
                        console.log("methods方法执行了")
                        return '标题为:'+ this.title+',内容为:'+this.content
                    },
                    updateTitle(){
                        this.title='new title'
                        console.log("updateTitle方法执行了")
                    }
                },
                computed: { //1、计算属性
                    returnContent(){ //2、计算属性中定义方法
                        console.log("computed方法执行了")
                        return '标题为:'+ this.title+',内容为:'+this.content
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
说明元素变更后，所有的页面上的涉及了这个元素变更的位置，绑定的方法都执行了一遍，甚至包括元素变更的方法自己

侦听器

监听你某个数据有没有变化，比如说某个data里的数据变化了，并不是只想变更页面元素，还想做点其他的东西，类似于一个钩子函数，而且，侦听的一定是响应式的数据哈，不是响应性的数据是不可以的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p>{{title}}</p> <!--3、元素展示，便于观察-->
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        title: '这是标题文本',
                        content: '这是文本内容'
                    }
                },
                watch:{ //1、监听属性，也就是侦听器
                    title(newValue,oldValue){ //2、定义方法，这个title就是方法名，也等于响应式数据的key，里面有两个参数，一个是新值一个是旧值
                        console.log(newValue,oldValue)
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
它的作用就是监听元素的变化，实际工作中，如果某个元素有变化，你可以发起网络请求或者修改数据库，随需求变化

指令

渲染指令

v-for
v-html
v-text
v-if //控制是否显示
v-show //也是控制是否显示，但是就算不显示，元素也不会销毁，只是不展示出来而已，而v-if则是直接销毁，元素的创建与销毁的成本是非常高的

v-for

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p v-for="item in obj">{{item}}</p>
            <p v-for="(item,key,index) in obj">{{item}}:{{key}}:{{index}}</p>
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        obj: {a:10,b:20,c:30}
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

属性指令

v-bind

v-bind

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <p title="就像鼠标放在图片上才显示出来的小字一样">这是原生的</p>
            <!--现在想要这个title不写死了，而是和响应式数据title绑定在一起-->
            <p v-bind:title = "title">这是使用v-bind:的</p>
            <p :title = "title">这是使用:的</p>
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        title: 'hello'
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件指令

v-on

v-on:click

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <button v-on:click="output">按钮绑定点击方法</button>
            <button @click="output2">注意不能用:来简写，要用@符号</button>
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                    }
                },
                methods:{
                    output(){
                        console.log("methods方法执行了")
                    },
                    output2(){
                        console.log("2methods方法执行了")
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

表单指令

怎么理解这个表单的意思，我的理解就是页面上可操作可变化的元素就是表单，例如：输入框

v-model

v-model

只能用于表单的双向绑定，双向的意思就比如页面上的一个输入框里的内容绑定了一个响应式数据，那有人操作了页面上输入框的内容，那响应式数据就也变更了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <!--通过v-model：的方式绑定了响应式数据-->
            <input type="text" v-model="inputValue">
            <!--只是用来展示，方便观察数据的变化-->
            <p v-text="inputValue"></p>
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        inputValue: '默认内容'
                    }
                }
            })
        </script>
    </body>
</html>

在这里插入图片描述

修饰符

什么是修饰符，修饰符是用来修饰指令的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatiable" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id = "app">
            <input type="text" v-model="inputValue">
            <p v-text="inputValue"></p>
            <!--通过trim修饰的v-model，就可以去除掉两边的空格-->
            <input type="text" v-model.trim="inputValue">            
        </div> 
        <script src="vue.min.js"></script> 
        <script>
            const vm=new Vue({
                el: '#app' ,
                data(){    
                    return{
                        inputValue: '默认内容'
                    }
                }
            })
        </script>
    </body>
</html>

在第一个输入框内输入空格
在这里插入图片描述
在第二个输入框内输入空格
在这里插入图片描述

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

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

相关文章

基于J-Link RTT Viewer输出日志(适用于JLink DAPLink STLink)

基于J-Link RTT Viewer输出日志(适用于JLink DAPLink STLink)

前言 通过RTT输出日志&#xff0c;可以不占额外的引脚和外设&#xff0c;速度非常快&#xff0c;几乎不影响程序的实时性。 参考官方介绍文档 安装J-Link驱动 官网下载地址&#xff0c;本文选择的是7.60版本&#xff0c;如果官网下载太慢&#xff0c;可以点击在CSDN下载 …
阅读更多...
linux入门进程概念中（僵尸进程，孤儿进程，进程优先级，并行和并发，环境变量）

linux入门进程概念中（僵尸进程，孤儿进程，进程优先级，并行和并发，环境变量）

目录 一、进程状态 1.看看Linux Kernel怎么说 1.1阻塞 2.进程状态查看 3.僵尸进程 3.1模拟僵尸进程的实验 3.2僵尸进程的危害 4.孤儿进程 4.1模拟孤儿进程实验 二、进程优先级 三、环境变量 3.1常见环境变量 3.2查看环境变量的方法&#xff1a; 3.3 加入环境变量 …
阅读更多...
性能测试基础知识及性能指标

性能测试基础知识及性能指标

目录 1.1、性能概述&#xff1a; 1.2 、测试目标 1.3 、性能测试方法 2 .1 、需求分析 2.2 、测试对象 2.3 、拆分对象 2.4 、指标分析 3.1 、用例设计 4.1、性能监控关键指标 结尾 &#x1f381;更多干货 前言&#xff1a;最近公司接了个项目&#xff0c;领导开会突…
阅读更多...
【python】面向对象语言的特性

【python】面向对象语言的特性

面向对象语言的特性 封装继承继承定义继承下的方法重写 类型注解变量类型注解函数(方法)类型注解Union 联合类型注解 多态定义抽象类 面向对象语言的三大特性&#xff1a;封装、继承、多态 本文主要来介绍这三个特性 封装 封装&#xff1a;指的是将对象的状态信息隐藏在对象内…
阅读更多...
nodejs(express)+TypeScripts环境

nodejs(express)+TypeScripts环境

初始化项目&#xff1a; npm init -y 安装包&#xff1a; npm i types/express //安装type类型的express如果不加types就是安装js文件&#xff0c;虽然对项目的运行没啥问题但是会没有提示npm i typescriptnpm i types/mysql安装完成后就开始配置了&#xff1a; 在项目的根…
阅读更多...
VCL组件DevExpress VCL图表控件中文指南 - 如何实现值标签自定义？

VCL组件DevExpress VCL图表控件中文指南 - 如何实现值标签自定义？

DevExpress VCL拥有230个VCL界面控件、40个自定义设计的VCL应用主题&#xff0c;它能帮助您创建优异的用户体验&#xff0c;提供高影响力的业务解决方案&#xff0c;并利用您现有的VCL技能为未来构建下一代应用程序。 在刚更新的DevExpress VCL v23.1组件库中&#xff0c;包含…
阅读更多...
英伟达GeForce Game Ready 536.40 WHQL驱动程序快速获取

英伟达GeForce Game Ready 536.40 WHQL驱动程序快速获取

6月底&#xff0c;随着英伟达RTX 4060显卡发布&#xff0c;英伟达随即发布了Game Ready 536.40 WHQL显卡驱动&#xff0c;为RTX 4060显卡提供支持。除了RTX 4060 显卡驱动支持外&#xff0c;还有其他方面的优化&#xff0c;驱动人生为大家带来536.40 WHQL驱动支持一览。 NVIDI…
阅读更多...
I2S协议

I2S协议

器件连接图&#xff1a; I2S&#xff08;Inter-IC Sound&#xff09;是一种数字音频传输协议&#xff0c;用于在集成电路之间传输音频数据。它通常用于连接音频设备&#xff0c;如数字音频处理器、音频编解码器、音频DAC和ADC等。 I2S协议通过三根线进行数据传输&#xff1a;时…
阅读更多...
Markdown的基本介绍、书写格式，并写一个示例

Markdown的基本介绍、书写格式，并写一个示例

Markdown是一种轻量级的标记语言&#xff0c;用于简洁地书写和格式化文本。它可以用于创建各种文档&#xff0c;如网页、博客文章、论坛帖子等。 Markdown的语法相对简单&#xff0c;易于学习和使用。以下是一些常用的Markdown语法和书写格式&#xff1a; 1. 标题&#xff1a…
阅读更多...
金山企业版杀毒软件平台“终端安全系统V9”linux客户端不能注册的问题解决方法。

金山企业版杀毒软件平台“终端安全系统V9”linux客户端不能注册的问题解决方法。

金山企业版杀毒软件平台“终端安全系统V9”&#xff0c;出现部分Linux客户端安装后无法注册到服务器的问题&#xff0c;本文提供了一种问题解决方法。 一、平台版本 平台为金山企业版杀毒软件平台“终端安全系统V9”&#xff1a; 平台端版本为V9.SP2.E1004 客户端安装包&…
阅读更多...
软件测试技能，JMeter压力测试教程，通过Jython调用Python脚本（二十三）

软件测试技能，JMeter压力测试教程，通过Jython调用Python脚本（二十三）

一、前言 前面在 BeanShell 里面是通过 java 脚本实现请求的预处理&#xff0c;jmeter里面也可以调用python的脚本&#xff0c;需安装 jython.jar 的插件 Jython 是 Python 的纯 Java 实现&#xff0c;它无缝地结合了 Java 类与 Python&#xff0c;使用户能以 Python 语言的语…
阅读更多...
解决打印机已经删除,但是wps打印时还会显示问题

解决打印机已经删除,但是wps打印时还会显示问题

进入桌面后&#xff0c;按下“Win R”组合键打开运行窗口输入“spool”并点击确定之后会进入路径为“C:\Windows\System32\spool”的文件夹中在spool文件夹中找到一个PRINTERS的文件夹&#xff0c;双击打开删除PRINTERS文件夹内的所有内容&#xff0c;不能删除的话需要先停止打…
阅读更多...
Apikit 自学日记：Mock 内置函数

Apikit 自学日记：Mock 内置函数

Mock内置函数教程 通过编写Javascript脚本设置响应内容&#xff0c;还可以直接使用内置函数设置“请求体触发条件”相关内容&#xff0c;设置的信息等同于在“请求体触发条件”输入框中的设置&#xff0c;如设置Header参数或者请求体参数等&#xff0c;设置完成后&#xff0c;…
阅读更多...
每日一练 | 华为认证真题练习Day71

每日一练 | 华为认证真题练习Day71

1、在使用FTP协议升级路由器软件时&#xff0c;传输模式应该选用&#xff08;&#xff09;。 A. 文字模式 B. 字节模式 C. 流字节模式 D. 二进制模式 2、DHCP服务器使用哪种报文确认主机可以使用IP地址&#xff1f; A. DHCP ACK B. DHCP DISCOVER C. DHCP REQUEST D. D…
阅读更多...
npm命令在控制台没有输出

npm命令在控制台没有输出

$ npm $ npm -v $ npm install package在控制台输出有关npm的所有命令都没有反应&#xff0c;没有报错没有信息&#xff0c;不知道是怎么回事。删掉了nodejs文件夹&#xff08;在C:/Program Files/nodejs和C:/users/<username>/AppData/Roaming/npm&#xff09;&#xff…
阅读更多...
无监控，不运维！Prometheus预测与告警详解（一）

无监控，不运维！Prometheus预测与告警详解（一）

文章部分内容来源于公众号——布博士&#xff08;擎创科技资深产品专家&#xff09; 前言&#xff1a; 说到Prometheus&#xff0c;很多人第一印象可能是希腊神话中泰坦火神的形象&#xff0c; 但在我们程序员的眼里&#xff0c;Prometheus 是一个用GO编写的系统监控和警报工具…
阅读更多...
WiFi模块IBF165,3路开关量输入,2路开关量输出,流量计脉冲计数

WiFi模块IBF165,3路开关量输入,2路开关量输出,流量计脉冲计数

产品特点&#xff1a; ● 3路开关量输入&#xff0c;2路开关量输出 ● DI每一路都可用作计数器或者频率测量 ● DO每一路都可独立输出PWM信号 ● 支持Modbus TCP 通讯协议 ● 内置网页功能&#xff0c;可以通过网页查询电平状态 ● 可以通过网页设定输出状态 ● 宽电…
阅读更多...
Windows 中使用 Linux 的 5 种方法详解

Windows 中使用 Linux 的 5 种方法详解

概要 作为一名开发者&#xff0c;你可能需要同时运行 Linux 和 Windows。幸运的是&#xff0c;有多种可以两全其美的方法&#xff0c;你不需要为每个操作系统购买不同的电脑。 在这篇文章中&#xff0c;我们将探讨在 Windows 机器上使用 Linux 的几种方法。其中一些是基于浏览…
阅读更多...
Spring Cloud Stream消息驱动项目集成

Spring Cloud Stream消息驱动项目集成

&#x1f4dd; 学技术、更要掌握学习的方法&#xff0c;一起学习&#xff0c;让进步发生 &#x1f469;&#x1f3fb; 作者&#xff1a;一只IT攻城狮 &#xff0c;关注我&#xff0c;不迷路 。 &#x1f490;学习建议&#xff1a;1、养成习惯&#xff0c;学习java的任何一个技术…
阅读更多...
Spark（9）：RDD的序列化

Spark（9）：RDD的序列化

目录 0. 相关文章链接 1. 闭包检查 2. 序列化方法和属性 3. Kryo 序列化框架 4. 核心点总结 0. 相关文章链接 Spark文章汇总 1. 闭包检查 从计算的角度, 算子以外的代码都是在 Driver 端执行, 算子里面的代码都是在 Executor 端执行。那么在 scala 的函数式编程中&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023