前端技术Vue学习笔记--001

前端技术Vue学习笔记

文章目录

  • 前端技术Vue学习笔记
    • 1、Vue2和Vue3比较
    • 2、Vue简介
    • 3、Vue快速上手
    • 4、插值表达式{{}}
    • 5、Vue响应式特性
    • 6、Vue指令
      • 6.1、v-html指令
      • 6.2、v-show指令和v-if指令
      • 6.3、v-else指令和v-else-if指令
      • 6.4、v-on指令
        • 6.4.1、v-on指令基础
        • 6.4.2、v-on调用传参
      • 6.5、v-bind指令
      • 6.6、v-for指令
      • 6.7、v-model指令
    • 7、波仔案例
    • 8、小黑记事本

1、Vue2和Vue3比较

在这里插入图片描述

2、Vue简介

概念:Vue是一个用于构建用户界面渐进式框架

  • 构建用户界面:给予数据动态渲染页面
  • 渐进式:循序渐进的学习
  • 框架:一套完整的项目解决方案,提升开发效率(理解记忆规则)

优点:大大提升开发效率。
缺点:需要理解记忆规则–>官网

3、Vue快速上手

创建Vue实例,初始化渲染的核心步骤:

  1. 准备容器
  2. 引入vue.js(开发版本)
  3. 创建Vue实例 new Vue()
  4. 指定配置项el、data==》渲染数据
    • el指定挂载点,选择器指定控制的是哪个盒子
    • data提供数据

代码展示

 <body><!-- 1.准备容器(vue所管理的范围) --><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h3>{{msg}}</h3> </div><!-- 2.引入开发版本的vue.js核心包(官网) --><script src="../vue.js"></script><!-- 3.创建vue实例 --><script>// 一旦引入Vue.js核心包,在全局环境下,就有了Vue构造函数const app = new Vue({//通过el配置选择器,指定Vue管理的是那个盒子el : '#app',//通过data提供数据data : {msg : 'hello radan'}})</script></body>

vue.js生产版本和开发版本的区别
在这里插入图片描述

4、插值表达式{{}}

插值表达式{{}}是一种Vue的模版语法。

  1. 作用:利用表达式进行插值,渲染到页面中

    表达式:是可以被求值的代码,JS引擎会将其计算出一个结果

  2. 语法:{{表达式}}

代码练习

 <body><div id="app"> <h3>{{title}}</h3> <p>{{nickname.toUpperCase()}}</p><p>{{age > 18 ? '成年' : '未成年'}}</p><p>学生姓名:{{student.name}}</p><p>居住地址:{{student.address}}</p></div><script src="../vue.js"></script><script>const app = new Vue({el : '#app',data : {title : 'hello radan',nickname : 'My name is radan',age : 19,student : {name : 'yjr',address : '甘肃白银'}}})</script></body>

结果展示
在这里插入图片描述

  • 注意点

    • 使用的数据必须存在(data)

    • 支持的是表达式,而非语句,比如:if、for

    • 不能在标签属性中使用{{}}插值

	<p>hobby</p><p>{{if}}</p><p title="{{username}}">我是一个标签</p>

5、Vue响应式特性

响应式:

  • 数据改变,视图自动更新
  • 使用Vue开发->专注于业务核心逻辑即可

访问数据和修改数据(data中的数据,最终会被添加到实例上):

  • 访问数据实例.属性名
  • 修改数据实例.属性名=新值

在这里插入图片描述
代码练习
在这里插入图片描述


Vue开发者工具下载教程

6、Vue指令

指令就是带有v-前缀的特殊属性,不同属性对应不同的功能。
Vue指令:带有v-前缀的特殊标签属性

例如:v-if、v-html、v-for’等等

6.1、v-html指令

作用:用于将动态生成的HTML代码插入到特定的元素中。
使用v-html指令的语法如下:

<div v-html="htmlContent"></div>

其中,v-html绑定一个Vue实例中的数据属性(例如htmlContent),这个属性的值应该是一个包含HTML代码的字符串。然后,Vue会将这个字符串的内容渲染为实际的HTML,并将其插入到div元素中。

实例:

<head><title>v-html指令练习</title></head><body><!-- v-html:所谓这个质量就相当于Html中的 innerHtml    将字符串以html的格式显示的显现--><div id="app" ><h3 v-html="msg"></h3> </div><script src="../vue.js"></script><script>const app = new Vue({el : '#app',data : {msg : "<a href='https://www.baidu.com/'> 点击跳转到百度</a>"}})</script></body>

测试结果
在这里插入图片描述

6.2、v-show指令和v-if指令

  1. v-show(简单的显示和隐藏)

    v-show指令的底层原理:切换css的display属性值为none来控制显示和隐藏。

    • 作用:控制元素的显示隐藏
    • 语法:v-show=“表达式” 表达式中为true显示,false隐藏
    • 适用场景:频繁切换显示隐藏的场景
  2. v-if(条件渲染)

    v-if指令的底层原理:根据 判断条件控制元素的创建和移除。

    • 作用:控制元素的显示隐藏(条件渲染)
    • 语法:v-if=“表达式” 表达式中为true显示,false隐藏
    • 适用场景:要么显示,要么隐藏,不频繁切换的场景

实例

<body><!-- v-show指令的底层原理:切换css的display属性值为none来控制显示和隐藏v-if指令的底层原理:根据 判断条件控制元素的创建和移除。--><div id="app" ><h3 v-show="flag">我v-show指令</h3> <h3 v-if="flag">我是v-if指令</h3> </div><script src="../vue.js"></script><script>const app = new Vue({el : '#app',data : {flag : false //为ture时,显示元素;为false隐藏元素}})</script></body>

测试结果
在这里插入图片描述

v-if和v-show的区别:

  1. 当个条件值为true时,两者都会将元素显示的显现出来(几乎一样)
  2. 当条件值为false时,两者稍微有些差异:
    • v-if并不会将元素代码添加到html代码块中
    • v-show将css的display属性值设置为none来隐藏该元素。但是代码会显示到html代码中

6.3、v-else指令和v-else-if指令

  1. 作用:辅助v-if进行判断渲染
  2. 语法:v-else  v-else-if=“表达式”
  3. 注意点:这两个指令需要配合v-if指令一起使用

实例练习::
在这里插入图片描述

<body><div id="app" ><!-- 性别:两个条件值的判断 --><h3 v-if="gender === 1">我是一个男生</h3> <h3 v-else>我是一个女性</h3> <!-- 分数:多条件值判断 --><h3 v-if="score >= 90">分数{{score}},成绩非常优秀</h3> <h3 v-else-if="score >= 70">分数{{score}},成绩优秀</h3> <h3 v-else-if="score >=60">分数{{score}},成绩及格</h3> <h3 v-else>分数{{score}},成绩不及格/h3> </div><script src="../vue.js"></script><script>const app = new Vue({el : '#app',data : {gender : 1,  //1表示男生,2表示女生score : 75   //不同的分数,进行不同的操作}})</script></body>

测试结果:
在这里插入图片描述

6.4、v-on指令

6.4.1、v-on指令基础

  • 作用:注册事件 = 添加监听 + 提供处理逻辑

  • 语法

    • v-on:事件名 = “内联语句”
    • v-on:事件名 = “methods中的函数名”
  • v-on:简写@事件名

  • 注意:methods函数内的this指向当前的Vue实例

v-on:事件名 = “内联语句”

	<button @click="count--"></button>{{count}}<button v-on:click="count++"></button>

v-on:事件名 = “methods中的函数名”
在这里插入图片描述
如何在函数中调用data中的数据?

  • 在函数体中直接使用data中的1数据
 methods : {fn(){console.log('fn方法执行了!');  alert(isShow);}}

报错信息:
在这里插入图片描述

原因:当我们在函数体中直接使用数据名调用时,会把这个数据当作全局变量去寻找,很显然全局并没有这个数据,这个数据只存在于当前Vue实例中,是一个局部变量。

解决上述错误的方法:

  1. 由于数据会被挂载到Vue实例上,所有可以通过实例名.数据名调用
  2. 在Vue中,this关键字都指向当前实例。(this.数据名)

      第一种方式相对而言维护不便,Vue实例名一修改函数中的所有实例名都要随着变动,不利于维护。第二种方式用的比较多,也是一个完美的选择。

按钮控制文字的显示和隐藏的代码练习:

<body><!-- 按钮来控制显示和隐藏 --><div id="app" ><!-- 通过methods中的函数利用v-on绑定事件 fn是函数名  --><button @click="fn">切换显示和隐藏</button>   <br/><!-- 频繁的切换隐藏利用v-show指令;偶尔切换隐藏利用v-if指令 --><span v-show="isShow">{{text}}</span></div><script>const app = new Vue({el : '#app',data : {isShow : true,  //通过isShow来控制文字是否显示text : 'radan学习Vue指令'},methods : {fn(){//如何在函数中调用data中的数据?  //1.由于数据会被挂载到Vue实例上,所有可以通过实例名.数据名调用--app.isShow = !app.isShow;//2.在所有函数中,Vue提供this关键字来指向当前实例this.isShow = !this.isShow;}}})</script></body>

6.4.2、v-on调用传参

在这里插入图片描述
自动售货机练习:

<body><!-- 自动售货机练习  --><div id="app" ><div class="box"><h3>自动售货机</h3><button @click="buy(5)">牛奶5元</button><button @click="buy(2)">鸡蛋2元</button><button @click="buy(3)">面包3元</button><h3>当前剩余金额:{{money}}</h3></div></div><script>const app = new Vue({el : '#app',data : {money : 120},methods : {buy(num){this.money -= num;}}})</script></body>

测试结果:
在这里插入图片描述

6.5、v-bind指令

  1. 作用动态的设置HTML的标签属性 --> src、url、title等等
  2. 语法v-bind:属性名=“表达式”
  3. 注意简写形式 :属性名=“表达式”

实例练习

	<body><!-- 图片url、title参数绑定  --><div id="app" ><!-- 利用v-bind标签将data数据域中的imgUrl和src的imgUrl绑定起来--><!-- alt:属性值当图片无法显示时,提供的文字提示--><img v-bind:src="imgUrl" :title="title" :alt="altInfo"/></div><script>const app = new Vue({el : '#app',data : {imgUrl : '../images/kebi.png',title : '科比Us',altInfo : '图片无法显示'}})</script></body>

所谓:v-bind指令就是就是绑定的意思,将data中的数据信息和HTML标签中的信息绑定起来

6.6、v-for指令

  1. 作用基于数据循环,多次渲染整个元素(数组、对象、数字
  2. 遍历数组语法:v-for = “(item,index) in 数组”
    • item (数组中的每一项),index(下标)
    • 省略index:v-for=“item in 数组”

小书城练习:

<body><!-- v-for指令练习 --><div id="app" ><h3>radan水果商场</h3><ul><li v-for="(item,index) in booklist" :key="item.id"><span>{{index+1}}</span><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fn(item.id)">删除</button></li></ul></div><script>const app = new Vue({el : '#app',data : {index : 0,booklist: [{id:1,name:'《红楼梦》',author:'曹雪芹'},{id:2,name:'《西游记》',author:'吴承恩'},{id:3,name:'《水浒传》',author:'施耐庵'},{id:4,name:'《三国演义》',author:'罗贯中'}]},methods:{fn(id){//利用delete方法删除数组的的元素// this.$delete(this.booklist,a-1)//通过 id 进行删除数组中的对应项  ->filter  //filter:根据条件,保留满足条件的对应项得到一个新数组//注意:filter操作后的数组并不会覆盖原数组,而是产生一个新的数组(我们需要做覆盖操作)this.booklist = this.booklist.filter(item => item.id !== id);}}})</script></body>

v-for中的key

不加key时:
    v-for的默认行为会尝试原地修改元素(就地服用)
key的作用:
    给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。

key的注意点:

  1. key的值只能是字符串或数字类型
  2. key的值必须具有唯一性
  3. 推荐使用id作为key(唯一),不推荐使用index作为key(会变化不对应)
    在这里插入图片描述

6.7、v-model指令

  1. 作用表单元素使用,双向数据绑定–>可以快速获取或设置表单元素内容

    • 数据变化 --> 视图自动更新
    • 视图变化 -->数据自动更新
  2. 语法v-model=‘变量’

登录练习

  <body><!-- v-model指令练习 --><!-- v-model 可以让数据和试图,形成双向数据绑定1. 数据变化,视图自动更新2. 视图变化,数据自动更新作用:可以快速获取或设置表单元素的内容--><div id="app" ><h3>登录案例</h3>用户名: <input type="text" v-model="username"/><br/><br/>&nbsp;&nbsp;&nbsp;码: <input type="password" v-model="password"/><br/><br/><button @click="login">登录</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button @click="reset">重置</button>  </div><script>const app = new Vue({el : '#app',data : {username : '',password : '' },methods : {login(){console.log(this.username+"   "+this.password);//这里获取到视图中的数据,直接配合后端发送请求即可。},reset(){this.username='';this.password='';}}})</script></body>

测试结果

在这里插入图片描述

7、波仔案例

思路:

  1. 6张图片需要一个数组
  2. 访问数组得有一个下标 (v-bind:src=“images[index]”)
  3. 按钮和index得有一个绑定事件的关系(v-on或者@)
  4. 前一个和后一个图片需要有判断按钮是否显示(v-show)

测试代码

 <body><!-- 图片切换案例-波仔的学习之路 --><!-- 思路:1.   6张图片需要一个数组2.   访问数组得有一个下标  (v-bind:src="images[index]")3.   按钮和index得有一个绑定事件的关系(v-on或者@)4.   前一个和后一个图片需要有判断按钮是否显示(v-show)--><div id="app" ><div class="box"><button v-show="index > 0" @click="index--">上一页</button><br/><img :src="images[index]" alt="" :title="index"><br/><button v-show="index < images.length-1" @click="index++">下一页</button></div></div><script>const app = new Vue({el : '#app',data : {index : 0,images: ['../images/bozai01.png','../images/bozai02.png','../images/bozai03.png','../images/bozai04.png','../images/bozai05.png','../images/bozai06.png']}})</script></body>

测试结果

波仔

JS中操作数组的几个好方法:

向数组中添加一个元素

 //向数组添加一个元素this.projectList.unshift({id  : +new  Date(),name : this.projectInfo})

从数组中删除一个元素

//通过id删除数组的指定元素this.projectList = this.projectList.filter(item => item.id !== id);

清空数组中的所有元素

//清空数组中的所有元素this.projectList=[]

8、小黑记事本

利用所学的知识点完成以下功能
在这里插入图片描述
功能总结:

  1. 列表渲染

    • v-for    key的设置   以及插值表达式{{}}
  2. 删除功能

    • v-on调用传参   filter过滤   覆盖修改原数组
  3. 添加功能

    • v-model数据绑定   unshift修改原数组添加
  4. 底部统计和清空

    • 数组.length累计数量
    • 覆盖数组清空列表
    • v-show控制隐藏、

代码实现

<body><div id="app" ><!-- 头部区域 --><header ><h1>小黑记事本</h1><input placeholder="请输入任务" v-model="projectInfo" /><button  @click="addProject">添加任务</button></header><!-- 列表区域 --><section class="main"><ul ><li  v-for="(item,index) in projectList" :key="item.id"><div  class="view"><span>{{index + 1 }}、</span><label>{{item.name}}</label><button v-on:click="del(item.id)">×</button></div></li></ul></section><!-- 统计和清空 --><!-- 当没有任务时,不出现合计和清空任务的选项 --><footer class="footer" v-show="projectList.length > 0"><!-- 统计 --><span >合计:<strong>{{projectList.length}}</strong></span><!-- 清空 --><button @click="delAll">清空任务</button></footer></div><script>//添加功能// 1. 通过v-model获取输入框的内容   与data双向绑定// 2. 给添加按钮进行事件绑定// 3. 将输入框的内容添加到数组中const app = new Vue({el : '#app',data : {projectInfo : '',projectList : [{id : 1,name : '跑步锻炼1000米'},{id : 2,name : '跳神一百次'},{id : 3,name : '打篮球一小时'}]},methods : {del(id){//通过id删除数组的指定元素this.projectList = this.projectList.filter(item => item.id !== id);},delAll(){//清空数组中的所有元素this.projectList=[]},addProject(){//数组中添加元素    元素值为this.projectInfoif(this.projectInfo.trim() === ''){alert('添加的内容不能为空')}else{//向数组添加一个元素this.projectList.unshift({id  : +new  Date(),name : this.projectInfo})}this.projectInfo=''}}})</script></body>

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

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

相关文章

Kubernetes_核心组件_kubelet_kubelet服务全解析(二)

文章目录 前言kubelet 架构kubelet 职责Node管理(节点管理)Pod管理 kubelet管理Podkubelet如何管理当前节点上所有Podkubelet三个端口kubelet获取Pod清单kubelet通过CRI接口管理Pod以及里面的容器 PodWorker的工作细节PodWorker的工作细节PLEG组件PLEG报错 kubelet创建并启动Po…

arcgis-利用等高线数据生成dem栅格

1、打开cass&#xff0c;展高程点&#xff0c;绘制三角网&#xff0c;绘制等高线&#xff0c;删除三角网和高程点。如下&#xff1a; 2、得到的等高线图&#xff0c;如下&#xff1a; 3、保存文件为dwg格式&#xff0c;随后打开arcmap软件&#xff0c;打开dwg的线层数据&#x…

网络安全防御篇之安全问题及防火墙简介

网络安全常识及术语 网络的脆弱性 什么样的网络是安全的

Java当中的深拷贝和浅拷贝

文章目录 一、前提二、浅拷贝1. BeanUtils实现浅拷贝 三、深拷贝1. 实现Cloneable接口并重写clone()方法&#xff1a;2. 使用序列化与反序列化&#xff1a; 一、前提 在计算机的内存中&#xff0c;每个对象都被赋予一个地址&#xff0c;该地址指向对象在内存中存储的位置。当我…

【MATLAB第59期】基于MATLAB的混沌退火粒子群CSAPSO-BP、SAPSO-BP、PSO-BP优化BP神经网络非线性函数拟合预测/回归预测对比

【MATLAB第59期】基于MATLAB的混沌退火粒子群CSAPSO-BP、SAPSO-BP、PSO-BP优化BP神经网络非线性函数拟合预测/回归预测对比 注意事项 不同版本matlab 不同电脑 加上数据集随机&#xff0c;BP权值阈值随机&#xff0c;进化算法种群随机&#xff0c;所以运行结果不一定和我运行…

集成了32位Cortex®M0内核XMC1302T038X0200AB、XMC1302Q040X0200AB 32MHz 200KB 闪存 工业MCU

XMC1000 32位工业 MCU 将 ARM Cortex™-M0 核心与领先的 65nm 制造工艺相结合&#xff0c;克服了目前 8 位设计的局限。XMC1000系列让目前的 8 位用户有机会享受 32 位的功耗&#xff0c;同时不在价格或易用性上做出妥协。XMC1000 在其细分市场提供最为广泛的闪存产品线&#x…

3分钟,快速上手Postman接口测试

Postman是一个用于调试HTTP请求的工具&#xff0c;它提供了友好的界面帮助分析、构造HTTP请求&#xff0c;并分析响应数据。实际工作中&#xff0c;开发和测试基本上都有使用Postman来进行接口调试工作。有一些其他流程的工具&#xff0c;也是模仿的Postman的风格进行接口测试工…

下载|GitLab 2023 年 DevSecOps 全球调研报告:安全左移深入人心、AI/ML 蔚然成风

目录 谁应该对应用程序安全负主要责任&#xff1f; 安全实践的最大挑战 AI 驱动研发&#xff0c;提升研发效率 各个角色使用的工具数量是多少&#xff1f; 一体化 DevSecOps 平台有哪些优势&#xff1f; 56%、74%、71%、65%、57% 这些数字和 DevSecOps 结合在一起&#xf…

android adb命令获取处于当前屏幕的Activity

android adb命令获取处于当前屏幕的Activity 使用adb命令&#xff1a; adb shell dumpsys activity activities 输出&#xff0c;例如: ACTIVITY MANAGER ACTIVITIES (dumpsys activity activities) Display #0 (activities from top to bottom): * Task{38ef601 #5281 typ…

Java当中的栈

栈的理解 栈&#xff08;Stack&#xff09;是一种受限的线性数据结构&#xff0c;所谓受限是指栈只暴露栈顶和栈底的操作&#xff0c;其底层是由数组实现的。栈的特性是先进后出。 常用方法 注意上面的peek()方法和pop()方法的区别&#xff01; 实例 import java.util.Stack…

grpc中间件之链路追踪(otel+jaeger)

参考文档 https://github.com/grpc-ecosystem/go-grpc-middleware/blob/main/examples/client/main.go https://github.com/grpc-ecosystem/go-grpc-middleware/blob/main/examples/server/main.go https://github.com/open-telemetry/opentelemetry-go/blob/main/example/jaeg…

sql中group by 的使用

1、概述 Group By 从字面意义上理解就是根据By指定的规则对数据进行分组&#xff0c;所谓的分组就是将一个数据集划分为若干个小区域&#xff0c;然后针对若干个小区域进行数据处理 2、原始表 3、简单的Group By 示例1 select 类别&#xff0c;数量 as 数量之和 from A gro…

android studio 离线打包配置push模块

1.依赖引入 SDK\libs aps-release.aar, aps-unipush-release.aar, gtc.aar, gtsdk-3.2.11.0.aar, 从android studio的sdk中找到对应的包放到HBuilder-Integrate-AS\simpleDemo\libs下面 2.打开build.gradle&#xff0c;在defaultConfig添加manifestPlaceholders节点&#xff0c…

【代码随想录 | Leetcode | 第十天】哈希表 | 三数之和 | 四数之和

前言 欢迎来到小K的Leetcode|代码随想录|专题化专栏&#xff0c;今天将为大家带来哈希法~三数之和 | 四数之和的分享✨ 目录 前言15. 三数之和18. 四数之和总结 15. 三数之和 ✨题目链接点这里 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], num…

JVM运行时区域——对象创建内存分配过程

新创建的对象&#xff0c;都存放在伊甸园区域&#xff0c;当垃圾回收时&#xff0c;将伊甸园区域的垃圾数据销毁&#xff0c;然后将存活的对象转移到幸存者0区域&#xff0c;之后创建的新的对象还是存放在伊甸园区域&#xff0c;等到再次垃圾回收后&#xff0c;将伊甸园区域和幸…

HTML5——基础知识及使用

HTML 文件基本结构 <html><head><title>第一个页面</title></head><body>hello world</body> </html> html 标签是整个 html 文件的根标签(最顶层标签).head 标签中写页面的属性.body 标签中写的是页面上显示的内容.title 标…

Ansible自动化运维学习——综合练习

目录 (一)练习一 1.新建一个role——app 2.创建文件 3.删除之前安装的httpd服务和apache用户 4.准备tasks任务 (1)创建组group.yml (2)创建用户user.yml (3)安装程序yum.yml (4)修改模板httpd.conf.j2 (5)编写templ.yml (6)编写start.yml (7)编写copyfile.yml (8…

Python爬虫技术及其原理详解

概要 随着互联网的发展&#xff0c;大量的数据被存储在网络上&#xff0c;而我们需要从中获取有用的信息。Python作为一种功能强大且易于学习的编程语言&#xff0c;被广泛用于网络爬虫的开发。本文将详细介绍Python爬虫所需的技术及其原理&#xff0c;并提供相关的代码案例。 …

Mac电脑文件夹无权限问题

sudo cp 16.5.zip /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport 走到之前的folder &#xff0c;右键选择get info更改權限, 再應用到所有子文件夹 右下解鎖再加自己Read & Write, -右邊拉下應該可以應用到所有子文件 这样就可以…

ES6——Iterator 和 for...of 循环

Iterator:遍历器 是一接口&#xff0c;为不同的数据结构提供统一的访问机制&#xff0c;只要当前数据结构部署了iterator接口&#xff0c;当前数据结构就可以遍历。 作用&#xff1a;1、为不同的数据结构&#xff0c;提供统一的访问机制 2、使当前数据结构的成员依次被访问 3…