Vue2 基础一指令

news/2024/4/24 16:45:20/文章来源:https://blog.csdn.net/jiuchabaikaishui/article/details/136564837

代码下载

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,官网。

Vue基本使用

如何利用Vue将hello world 渲染到页面上
1、需要提供标签用于填充数据,在标签中使用插值语法的形式 即 {{}} 进行填充数据,插值表达式支持基本的计算操作。

2、引入vue.js库文件,一定要先引入Vue文件 在使用Vue语法 因为存在作用域的问题。

3、使用vue的语法做功能,使用 new Vue() 创建一个Vue的实例,在构造函数中以对象的形式做一些配置:

  • el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
  • data:模型数据(值是一个对象)

4、利用Vue将数据渲染到页面上,数据写在data里面。

    <h2>Hello world!</h2><div id="app1"><div>{{msg}}</div><div>{{1 + 2}}</div><div>{{msg + 'a' + 'b'}}</div></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app1',data: {msg: 'Hello Vue!'}});</script>

编译过程(Vue语法→原生语法)

Vue模板语法

前端渲染方式:

  • 原生js拼接字符串——(缺点:不同开发人员的代码风格差别很大,随着业务的复杂,后期的维护变得逐渐困难起来。)
  • 使用前端模板引擎——(优点:大家都遵循同样的规则写代码,代码可读性明显提高了,方便后期的维护。缺点:没有专门提供事件机制。)
  • 使用vue特有的模板语法

指令

指令的本质就是自定义属性,指令的格式:以v-开始(比如:v-cloak)

v-cloak指令

插值表达式存在“闪动”的问题,使用v-cloak指令可以解决该问题,原理就是先通过属性选择器隐藏,替换好值之后 v-cloak 属性会被自动去除再显示最终的值。

        <div v-cloak>{{msg}}</div>
数据绑定指令

v-text 指令 填充纯文本:

  • 用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
  • 如果数据中有HTML标签会将html标签一并输出

注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值

v-html 指令 填充HTML片段:

  • 存在安全问题
  • 本网站内部数据可以使用,来自第三方的数据不可以用
  • 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析 后输出

v-pre 指令 填充原始信息:

  • 显示原始信息,跳过这个元素和它的子元素的编译过程(分析编译过程)
    <div class="main" id="app"><div>{{msg1}}</div><div v-text="msg1"></div><div v-html="msg1"></div><div v-pre>{{msg1}}</div></div><script src="../js/vue.js"></script> <script>let vm = new Vue({el: '#app',data: {msg1: '<h1>Hello Vue</h1>'}});</script>
响应式
  • html5中的响应式(屏幕尺寸的变化导致样式的变化)
  • 数据的响应式(数据的变化导致页面内容的变化)

v-once 只编译一次:

  • 显示内容之后不再具有响应式功能
        <div v-once>{{msg1}}</div>

mvvm:
MVVM是前端视图层的概念,主要关注于视图层分离,也就是说MVVM把前端的视图层,分为了三部分 Model, View , ViewModel:

  • m model,数据层 Vue 中 数据层 都放在 data 里面
  • v view 视图,Vue 中 view 即 HTML页面
  • vm (view-model) 控制器 将数据和视图层建立联系,vm 即 Vue 的实例 就是 vm
双向数据绑定

v-model指令,限制在 <input><select><textarea>components 中使用

        <input type="text" v-model="msg">
事件绑定

v-on 用来绑定事件的,形式如: v-on:click 缩写为 @click:

    <div class="main" id="app"><!-- 在 html 中使用 data 里面的数据不需要使用 this --><button v-on:click="num++">按钮1</button><button @:click="num++">按钮1</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {num: 0}});</script>

事件函数的调用方式,可以直接绑定函数名称或者调用函数, Vue的实例的 methods 中主要定义函数:

    <div class="main" id="app"><button @click="say">按钮3</button><button @click="say()">按钮4</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',methods: {handle: function() {// 在函数中 使用data里面的数据 一定要加this console.log('num: ', this.num);}}});</script>

事件函数参数传递:

  • 如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
  • 如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
    <div class="main" id="app"><button @click="handle1">按钮5</button><button @click="handle2(1, 2, $event)">按钮6</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',methods: {handle1: function(e) {console.log(e.target.innerHTML);},handle2: function(p1, p2, e) {console.log('p1: ', p1);console.log('p2: ', p2);console.log(e.target.innerHTML);}}});</script>
事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符 修饰符是由点开头的指令后缀来表示的

  • .stop 阻止冒泡
  • .prevent 阻止默认行为
  • .self 只有事件从元素本身发出才触发处理函数
        <div @click="handle" style="background-color: red;"><button @click="handle1">按钮1</button><a href="https://www.baidu.cn/" @click.prevent="handle">百度</a><button @click.stop="handle1">按钮2</button></div><div @click.self="handle" style="background-color: cyan;"><button @click="handle1">按钮3</button></div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点 击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

在监听键盘事件时,经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符,常用的按键修饰符:

  • .enter 回车键
  • .esc 退出键
  • .tab tab键
  • .delete 删除键(捕获“删除”和“退格”按键)
  • .space 空格键
  • .up 上
  • .down 下
  • .left 左
  • .right 右
  • .keyCode 监听特定 keyCode 值对应的按键(例如 .65-a)
        <input type="text" v-on:keyup.enter.delete.left.up="handle"><input type="text" v-on:keyup.65="handle">

在Vue中可以通过全局 config.keyCodes 对象,自定义按键修饰符别名:

    <div class="main" id="app"><input type="text" v-on:keyup.kbA="handle"></div><script src="../js/vue.js"></script><script>Vue.config.keyCodes.kbA = 65;let vm = new Vue({el: '#app',methods: {handle: function() {// 在函数中 使用data里面的数据 一定要加this console.log('num: ', this.num);}}});</script>
简单计算器案例

实现简单的加法计算,分别输入数值a和数值b,点击计算按钮,结果显示在下面:

  • 通过v-model指令实现数值a和数值b的绑定
  • 给计算按钮绑定事件,实现计算逻辑
  • 将计算结果绑定到对应位置
    <div class="main" id="app"><h4>简单计算器案例</h4><div><span>数值A:</span><input type="text" v-model="a"> <br /><span>数值B:</span><input type="text" v-model="b"> <br /><button v-on:click="plus">相加计算</button> <br /><span>结果:</span><span v-text="result"></span></div></div><script>let vm = new Vue({el: '#app',data: {a: '',b: '',result: ''},methods: {plus: function() {this.result = parseInt(this.a) + parseInt(this.b);}}});</script>
属性绑定

v-bind 指令被用来响应地更新 HTML 属性,v-bind:href 可以缩写为 :href

    <div class="main" id="app"><a v-bind:href="baiduUrl">百度</a><a :href="baiduUrl">百度1</a></div><script>Vue.config.keyCodes.kbA = 65;let vm = new Vue({el: '#app',data: {baiduUrl: 'https://www.baidu.cn/'}});

v-model的低层实现原理是使用 v-bind 绑定 value 属性,使用 v-on 将输入域中的最新的数据覆盖原来的数据:

    <div class="main" id="app"><!-- v-model原理 --><div>{{msg}}</div><input type="text" v-bind:value="msg" v-on:input="inputHandle"><input type="text" :value="msg" @input="msg = $event.target.value;"></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {msg: 'Hello Vue!'},methods: {inputHandle: function(e) {this.msg = e.target.value;}}});</script>
class 样式绑定

class 样式处理有对象绑定和数组绑定两种:

    <style>.active {border: 1px solid red;width: 100px;height: 100px;}.err {background-color: orange;}</style><div class="main" id="app"><!-- 绑定对象 --><div v-bind:class="{active: isActive, err: isErr}">绑定对象</div><!-- 绑定数组 --><div v-bind:class="[activeClass, errClass]">绑定数组</div><!-- 对象绑定和数组绑定可以结合使用 --><div v-bind:class="[activeClass, errClass, {text: isText}]">对象绑定和数组绑定可以结合使用</div><!-- class绑定的值可以简化操作 --><div :class="objClasses">class绑定的值可以简化操作</div><div :class="arrClasses">class绑定的值可以简化操作</div><!-- 默认的class会保留 --><div class="default" :class="objClasses">默认的class会保留</div><button v-on:click="classHandle">切换</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {isActive: true,isErr: true,isText: true,activeClass: 'active',errClass: 'err',textClass: 'text',arrClasses: ['active', 'err', 'text'],objClasses: {active: true, err: true, text: true}},methods: {classHandle: function() {this.isActive = !this.isActive;this.isErr = !this.isErr;this.isText = !this.isText;if (this.activeClass === '') {this.activeClass = 'active';} else {this.activeClass = '';}if (this.errClass === '') {this.errClass = 'err';} else {this.errClass = '';}this.objClasses.active = !this.objClasses.active;this.objClasses.err = !this.objClasses.err;this.objClasses.text = !this.objClasses.text;if (this.arrClasses.length > 0) {this.arrClasses = [];} else {this.arrClasses = [this.activeClass, this.errClass, this.textClass];}}}});

绑定对象和绑定数组 的区别:

  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据(表示是否渲染的布尔值)
  • 绑定数组的时候数组里面存的是 data 中的数据(表示类名)

样式绑定相关语法细节:

  • 对象绑定和数组绑定可以结合使用
  • class绑定的值可以简化操作
  • 默认的class如何处理?默认的class会保留
style样式绑定

style 样式处理也有对象绑定和数组绑定两种:
CSS 属性名可以用驼峰式
组语法可以将多个样式对象应用到同一个元素

    <div class="main" id="app"><div :style="{border: borderStyle, width: widthStyle, height: heightStyle}"></div><div :style="objStyles"></div><div :style="[objStyles, overrideStyles]"></div><button @click="styleHandle">切换</button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {borderStyle: '1px solid blue',widthStyle: '100px',heightStyle: '200px',objStyles: {border: '1px solid green',width: '200px',height: '100px'},overrideStyles: {border: '5px solid orange',backgroundColor: 'blue'}},methods: {styleHandle: function() {if (this.heightStyle === '100px') {this.heightStyle = '200px';} else {this.heightStyle = '100px';}if (this.objStyles.width === '100px') {this.objStyles.width = '200px';} else {this.objStyles.width = '100px';}}}});
分支结构

v-ifv-elsev-else-ifv-show

v-if与v-show的区别:

  • v-if控制元素是否渲染到页面,是动态的向DOM树内添加或者删除DOM元素,v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件。
  • v-show控制元素是否显示(已经渲染到了页面),本质就是标签display设置为none,控制隐藏,v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
    <div class="main" id="app"><!-- 分支结构 --><div v-if="score>=90">优秀</div><div v-else-if="score<90&&score>=80">良好</div><div v-else-if="score<80&&score>=60">一般</div><div v-else>差</div><div v-show="flag">v-show</div><button @click="showHandle" v-text="flag ? '隐藏' : '显示'"></button></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {score: 99,flag: true},methods: {showHandle: function() {this.flag = !this.flag;}}});
循环结构

v-for 用于循环的数组、对象里面的值可以是对象,也可以是普通元素:

  • 不推荐同时使用 v-if 和 v-for,当 v-if 与 v-for 一起使用时, v-for 具有比 v-if 更高的优先级。
  • key 给每个节点做一个唯一标识(一般使用数据的id或者遍历序号),key的作用主要是帮助Vue区分不同的元素,从而提高性能,高效的更新虚拟DOM。
    <div class="main" id="app"><!-- 循环结构 --><div :key="value.id" v-for="(value, index) in fruits"><div v-if="value.id>1" :key="i" v-for="(v, k, i) in value" v-text="k + ': ' + v"></div></div></div><script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {fruits: [{id: 1,ename: 'apple',cname: '苹果'},{id: 2,ename: 'orange',cname: '橘子'},{id: 3,ename: 'banana',cname: '香蕉'}]}});

Tab选项卡案例

把tab栏 中的数替换到页面上:

  • 把 data 中 title 利用 v-for 循环渲染到页面上
  • 把 data 中 path 利用 currentIndex 序号取出渲染到页面上

默认的第一项tab栏高亮:

  • tab栏高亮 通过添加类名 current 来实现 (CSS current 的样式已经提前写好)
  • 在data 中定义一个 默认的 索引 currentIndex 为 0 给第一个li 添加 current 的类名
  • 通过动态绑定class 来实现 第一个li 的索引为 0 和 currentIndex 的值刚好相等
  • currentIndex === i 如果相等 则添加类名 current 否则添加 空 类名

点击每一个tab栏 当前的高亮 其他的取消高亮:

  • 给每一个li添加点击事件
  • 将 v-for 循环中的索引 i 赋值给 currentIndex

css:

        .tab > ul {list-style: none;margin: 0;padding: 0;}.tab > ul > li {float: left;width: 80px;height: 40px;line-height: 40px;text-align: center;border-top: 1px solid blue;border-left: 1px solid blue;box-sizing: border-box;}.tab > ul > li.current {background-color: orange;}.tab > ul > li:last-child {border-right: 1px solid blue;}.tab > div {clear: both;}

html:

    <div class="main" id="app"><div class="tab"><ul><li :class="currentIndex === i ? 'current' : ''" :key="v.id" v-for="(v, i) in list" v-text="v.title" @click="currentIndex = i"></li></ul><div><img v-bind:src="'../' + list[currentIndex].path" alt=""></div></div></div>

js:

    <script src="../js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {currentIndex: 0, // 选项卡当前的索引list: [{id: 1,title: 'apple',path: 'img/apple.png'},{id: 2,title: 'orange',path: 'img/orange.png'},{id: 3,title: 'lemon',path: 'img/lemon.png'}]}});

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙 Stage模型-AbilityStage、Context、Want

前提&#xff1a;基于官网3.1/4.0文档。参考官网文档 基于Android开发体系来进行比较和思考。&#xff08;或有偏颇&#xff0c;自行斟酌&#xff09; 一、 AbilityStage 1.概念 AbilityStage是一个Module级别的组件容器&#xff0c;应用的HAP在首次加载时会创建一个AbilitySt…

Vue3 配置 vite.config.js 解决跨域问题

Vue3 配置 vite.config.js 解决跨域问题 问题再现 Access to XMLHttpRequest at ‘http://localhost:8080/user/register’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested…

人工智能在日常生活中的应用

在我们的日常生活中&#xff0c;人工智能已经成为一种无处不在的力量&#xff0c;从智能家居到在线助手&#xff0c;再到高度个性化的服务和推荐&#xff0c;它无声地改变着我们的生活方式和习惯。随着技术的不断进步和普及&#xff0c;人工智能正以前所未有的速度和规模渗透到…

多线程系列(十二) -生产者和消费者模型

一、简介 在 Java 多线程编程中&#xff0c;还有一个非常重要的设计模式&#xff0c;它就是&#xff1a;生产者和消费者模型。 这种模型可以充分发挥 cpu 的多线程特性&#xff0c;通过一些平衡手段能有效的提升系统整体处理数据的速度&#xff0c;减轻系统负载&#xff0c;提…

http【详解】状态码,方法,接口设计 —— RestfuI API,头部 —— headers,缓存

http 状态码 1xx 服务器收到请求 2xx 请求成功 200 成功 3xx 重定向&#xff08;目标服务器返回另一个服务器的地址&#xff0c;浏览器会自动去访问另一个服务器&#xff09; 常见应用场景&#xff1a;搜索引擎&#xff0c;短网址 301 永久重定向 &#xff08;常用于已停服的…

Leetcoder Day42| 动态规划part09 打家劫舍问题

198.打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房…

Mybatis-Plus——06,CRUD查

CRUD查 一、普通查询1.1、通过id查询单个用户1.2、通过id查询多个用户1.3、条件查询 通过map封装 二、分页查询2.1、配置分页插件2.2、运行方法 三、通过wrapper条件构造器查询3.1、查询name不为空&#xff0c;email不为空&#xff0c;age大于18的用户3.2、查询nameJone的用户3…

利用Python副业赚钱,看完这篇你就懂了!_自学python能干些什么副业?

Python都可以做哪些副业&#xff1f; 1、兼职处理数据Excel整理数据功能虽然很强大&#xff0c;但在Python面前&#xff0c;曾经统治职场的它也的败下阵来。因为Python在搜集数据整理分析数据的过程中更加便捷&#xff0c;通过几行代码还可以实现自动化操作。 如果你学会Pyth…

大数据技术学习笔记(五)—— MapReduce(1)

目录 1 MapReduce 概述1.1 MapReduce 定义1.2 MapReduce 优缺点1.3 MapReduce 核心思想1.4 MapReduce 进程1.5 Hadoop 序列化类型1.6 MapReduce 编程规范1.7 WordCount 案例实操1.7.1 案例需求1.7.2 环境准备1.7.3 编写程序1.7.4 测试 2 MapReduce 序列化2.1 序列化概述2.2 自定…

Java数组常用操作

创建数组 int[] a {1,2,3};int[] a new int[]{1,2,3};int[] a new int[3];ArrayList<Integer> arr new ArrayList<>(); 添加元素 arr.add(99); //将99加入到数组末尾arr.add(3,99); //将99加入到指定索引3处访问元素 int c1 c[1]; int arr1 arr.get(1); …

kafka报文模拟工具的使用

日常项目中经常会碰到消费kafka某个topic的数据&#xff0c;如果知道报文格式&#xff0c;即可使用工具去模拟发送报文&#xff0c;以此测试代码中是否能正常消费到这个数据。 工具资源已上传&#xff0c;可直接访问连接下载&#xff1a;https://download.csdn.net/download/w…

【AI+应用】模仿爆款视频二次创作短视频操作步骤

本来不想水这篇的&#xff0c; 剪辑软件估计很多人用的比我还6。 今天自己遇到1个需求&#xff0c;我看到一篇公众号文章的视频觉得有意思&#xff0c;但视频有点长&#xff0c;我没带耳机看视频的习惯&#xff0c;就想着能不能下载下来&#xff0c; 提取视频的音频转为文字&am…

听 GPT 讲 client-go 源代码 (21)

分享更多精彩内容&#xff0c;欢迎关注&#xff01; File: client-go/applyconfigurations/storage/v1beta1/volumeattachmentstatus.go 在client-go中&#xff0c;client-go/applyconfigurations/storage/v1beta1/volumeattachmentstatus.go文件是用于处理VolumeAttachmentSta…

即插即用篇 | YOLOv8 引入 ParNetAttention 注意力机制 | 《NON-DEEP NETWORKS》

论文名称:《NON-DEEP NETWORKS》 论文地址:https://arxiv.org/pdf/2110.07641.pdf 代码地址:https://github.com/imankgoyal/NonDeepNetworks 文章目录 1 原理2 源代码3 添加方式4 模型 yaml 文件template-backbone.yamltemplate-small.yamltemplate-large.yaml

Redis中的SCAN渐进式扫描底层原理

Scan渐进式扫描原理 概述 由于Redis是单线程再处理用户的命令&#xff0c;而Keys命令会一次性遍历所有key&#xff0c;于是在命令执行过程中&#xff0c;无法执行其他命令。这就导致如果Redis中的key比较多&#xff0c;那么Keys命令执行时间就会比较长&#xff0c;从而阻塞Re…

MySQL面试题-锁(答案版)

锁 1、MySQL 有哪些锁&#xff1f; &#xff08;1&#xff09;全局锁 加了全局锁之后&#xff0c;整个数据库就处于只读状态了&#xff0c;这时其他线程执行以下操作&#xff0c;都会被阻塞&#xff1a; 对数据的增删改操作&#xff0c;比如 insert、delete、update等语句&…

JavaScript极速入门(2)

JQuery W3C标准给我们提供了一系列函数,让我们可以操作: 网页内容 网页结构 网页样式 但是原生的JavaScript提供的API操作DOM元素时,代码比较繁琐,冗长.我们学习使用JQuery来操作页面对象. JQuery是一个快速,简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常…

用开发CesiumJS模拟飞机飞行应用(一,基本功能)

本部分向您展示如何构建您的第一个 Cesium 应用程序&#xff0c;以可视化模拟从旧金山到哥本哈根的真实航班&#xff0c;并使用 FlightRadar24收集的雷达数据。您将学习如何&#xff1a; 在网络上设置并部署您的 Cesium 应用程序。 添加全球 3D 建筑物、地形和图像的基础图层。…

微服务架构 | 多级缓存

INDEX 通用设计概述2 优势3 最佳实践 通用设计概述 通用设计思路如下图 内容分发网络&#xff08;CDN&#xff09; 可以理解为一些服务器的副本&#xff0c;这些副本服务器可以广泛的部署在服务器提供服务的区域内&#xff0c;并存有服务器中的一些数据。 用户访问原始服务器…

【2024.03.05】定时执行专家 V7.1 发布 - TimingExecutor V7.1 Release

目录 ▉ 软件介绍 ▉ 新版本 V7.1 下载地址 ▉ V7.1 新功能 ▼2024-03-03 V7.1 - 更新日志 ▉ V7.0 新UI设计 ▉ 软件介绍 《定时执行专家》是一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。软件具有 25 种【任务类型】、12 种【触发器】触发方式&#x…