Vue 基础语法

ops/2024/9/23 12:52:38/

【1】模板语法

（1）差值表达式

  • {{}}是 Vue.js 中的文本插值表达式。

    • 它用于在模板中输出数据或表达式的值。当数据或表达式的值发生变化时，插值表达式会自动更新。

  • 补充：三目运算符

    • 它的基本语法是 Condition ? A : B，意思是当 Condition 为真时，执行 A，否则执行 B。

image-20240424185144908

<body>
<div id="app"><li>字符串：{{name}}</li><li>数值：{{age}}</li><li>数组：{{list1}}</li><li>对象：{{obj1}}</li><li>字符串：{{link1}}</li><li>运算：{{1 + 2 +3 + 4}}</li><li>三目运算符：{{1 > 2 ? 'Y' : 'N'}}</li>
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {name: 'bruce',age: 18,list1: [1, 2, 3, 4],   // 数组obj1: {name: 'Darker', age: 19},link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'}})
</script>

【2】文本指令

（1）v-html和v-text

  • ​ v-html

    • v-html 指令用于更新元素的 innerHTML。

    • 这个指令可以输出真正的 HTML 内容，而不仅仅是纯文本。

      • 如果你尝试用双花括号 {{ }} 插入 HTML，它将被转义并显示为纯文本。
      • 但是使用 v-html 可以直接插入 HTML 内容。

    • 使用 v-html可能会带来 XSS 攻击的风险

  • v-text

    • v-text 指令用于更新元素的文本内容。
    • 它基本上与双花括号 {{ }} 的功能相同，但 v-text 不会在元素上创建额外的文本节点。
    • 如果元素已经包含文本内容，v-text 会替换这些文本内容。

image-20240424172743630

<body>
<div id="app"><div v-html="htmlContent"></div><div>{{htmlContent}}</div><hr><div v-text="textContent"></div><div>{{textContent}}</div>
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {htmlContent: '<span style="color: red">标签：红色文字</span>',textContent: '纯文本内容'}})
</script>

（2）v-if和v-show

  • v-if
    • v-if 指令用于条件性地渲染一个元素。
    • 只有当其表达式的值为真值时，才会渲染元素及其内容。如果表达式的值为假值，则元素及其内容不会被渲染到 DOM 中。
    • 这意味着每次 v-if 的条件改变时，都会进行条件块的销毁或重建，这是一个“真正”的条件渲染。
  • v-show
    • v-show 指令与 v-if 类似，也是用于根据条件来显示或隐藏元素。但是，无论 v-show 的表达式值为真值还是假值，元素始终会被渲染到 DOM 中。
    • v-show 只是简单地通过切换元素的 CSS 属性 display 来控制其可见性。
image-20240424184439938 
<div id="app"><div v-if="true">v-if渲染</div><div v-if="false">v-if不渲染</div><hr><div v-show="true">v-show渲染</div><div v-show="false">v-show不渲染</div>
</div>

【3】事件指令

（1）v-on+click

  • Vue 提供了许多事件指令，用于处理 DOM 事件。这些指令以 v-on 或其简写 @ 开头，后面跟上要监听的事件名称。
  • 当在 Vue 组件的模板中使用这些指令时，它们可以绑定到组件的方法或表达式上，以便在特定事件发生时执行相应的操作。
<body>
<div id="app"><span v-text="info" v-on:click="handleClick" style="background-color: coral; font-size: 30px"></span><br><img v-show="pTag" src="https://pic.netbian.com/uploads/allimg/240420/003439-1713544479de41.jpg" alt=""height="300px" width="500px">
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {pTag: true,info: "关闭图片",},methods: {handleClick: function () {this.pTag = !this.pTagconsole.log(this.pTag)if (this.pTag) {this.info = '关闭图片'} else {this.info = '显示图片'}},}})
</script>

image-20240425161000332

（2）参数问题

  • 示例：v-on:click或@click后面跟着自定义事件，正常传参正常执行，这里说一下不正常的情况
    • 函数有参,前端方法不传递，不加括号 ----> 函数将拿到当前操作事件
    • 函数有参,前端方法不传参数，加括号 ----> 函数将拿不到任何值
    • 函数有参,前端方法多传参数(‘1’, ‘2’) ----> 函数将拿到接收个数的参数
    • 函数有参,前端方法手动传递($event) ----> 函数将拿到当前操作事件

image-20240425162546478

<body>
<div id="app"><h2 v-text="info1" @click="handleClick">dada</h2><h2 v-text="info2" @click="handleClick()">dada</h2><h2 v-text="info3" @click="handleClick('1', '2')">dada</h2><h2 v-text="info4" @click="handleClick($event)">dada</h2>
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {info1: "函数有参,前端方法不传递，不加括号",info2: "函数有参,前端方法不传参数，加括号",info3: "函数有参,前端方法多传参数('1', '2')",info4: "函数有参,前端方法手动传递($event)",},methods: {handleClick: function (e) {console.log(e)},}})
</script>

【4】属性指令v-bind

（1）基础属性src等

  • v-bind是 vue 中的一个核心指令，用于响应式地更新 HTML 属性。可以简写为:，简单来说就是将属性变为了变量。
  • 其基本功能是将表达式（通常是 JavaScript 表达式）的结果绑定到一个元素的属性上。这样，当 Vue 实例中的数据发生变化时，绑定的属性也会自动更新。

image-20240425163859157

<body>
<div id="app"><button v-text="info" @click="handleChange" style="font-size: 30px"></button><img :src="imageList[index]" style="display: block; width: 500px; height: 300px;">
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {info: "切换图片",index: 0,imageList: ["https://pic.netbian.com/uploads/allimg/240424/003411-1713890051411d.jpg", "https://pic.netbian.com/uploads/allimg/240424/001415-171388885570eb.jpg", "https://pic.netbian.com/uploads/allimg/240422/005357-17137184373f8b.jpg"]},methods: {handleChange: function () {this.index = (this.index + 1) % this.imageList.length},}})
</script>

（2）style和class属性

  • class属性语法：:class='字符串、js数组、js对象'
    • 字符串格式：需要手动拼接样式，不推荐
      • classStr: "div1"
      • this.classStr = this.classStr + ' div2'
    • js数组格式：需要对列表进行添加push操作和删除pop操作，推荐
      • classList: ["div1"]
      • this.classList.push("div2")
    • js对象格式：通过键值对修改样式，判断键对应值的Bool值，不推荐
      • classObj: {"div1": true, "div2": false}
      • this.classObj.div2 = true

image-20240425172737072

<style>.div1 {background-color: #44f1aa;height: 200px;width: 200px;}.div2 {border-radius: 50%;}
</style><body>
<div id="app"><button v-text="info" @click="handleChange"></button><div :class="classObj"></div>
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {info: "样式切换",// 字符串形式classStr: "div1",// js数组形式classList: ["div1"],// js对象形式classObj: {"div1": true, "div2": false}},methods: {handleChange: function () {// 字符串形式操作// this.styleStr = this.styleStr + ' div2'// js数组形式操作// this.styleList.push("div2")// js对象形式操作this.classObj.div2 = true},}})
</script>

  • style属性语法：:style='字符串、js数组、js对象'

    • 字符串格式：需要手动拼接样式，不推荐

      • styleStr: "background-color: #44f1aa; height: 200px; width: 200px;"
      • this.styleStr = this.styleStr + ' border-radius: 50%;'

    • js数组格式：需要对列表进行添加push操作和删除pop操作，不推荐

      • styleList: [{backgroundColor: "#44f1aa"}, {height: "200px"}, {width: "200px"}]

      • this.styleList.push({borderRadius: "50%"})

    • js对象格式：通过键值对修改样式，判断键对应值的Bool值，推荐

      • styleObj: {backgroundColor: "#44f1aa", height: "200px", width: "200px"}
      • this.styleObj.borderRadius = "50%"

  • 但是有时候会出现这种情况：页面中的值修改成功了，但是样式却没有改变，这是因为ViewModel的并没有识别到属性的变化

image-20240426105852869

  • 这个时候需要使用Vue的语法set
    • Vue.set 的语法用于向响应式对象添加一个属性，并确保这个新属性也是响应式的。
    • Vue.set(target, propertyName/index, value)
      • target: 目标对象或数组。
      • propertyName/index: 要添加或修改的属性名（对于对象）或索引（对于数组）。
      • value: 要设置的新值。
<body>
<div id="app"><button v-text="info" @click="handleChange"></button><div :style="styleObj"></div>
</div>
</body><script>javascript">var vm = new Vue({el: "#app",data: {info: "样式切换",// 字符串形式styleStr: "background-color: #44f1aa; height: 200px; width: 200px;",// js数组形式styleList: [{backgroundColor: "#44f1aa"}, {height: "200px"}, {width: "200px"}],// js对象形式styleObj: {backgroundColor: "#44f1aa", height: "200px", width: "200px"}},methods: {handleChange: function () {// 字符串形式操作this.styleStr = this.styleStr + ' border-radius: 50%;'// js数组形式操作this.styleList.push({borderRadius: "50%"})// js对象形式操作// this.styleObj.borderRadius = "50%"Vue.set(this.styleObj, "borderRadius", "50%")},}})
</script>


http://www.ppmy.cn/ops/39488.html

相关文章

自定义redisTemplate实现自定义序列化

自定义redisTemplate实现自定义序列化

由于我们使用springboot集成的redis工具的时候&#xff0c;redisTemplate内部是采用了jdk默认的序列化工具来对我们存储的数据进行序列化的&#xff0c;这会导致我们在redis中存储的序列化后的数据和我们原来的数据格式在查看的时候会有偏差&#xff0c;所以我们需要自定义redi…
阅读更多...
Github 2024-05-08 C开源项目日报 Top8

Github 2024-05-08 C开源项目日报 Top8

根据Github Trendings的统计，今日(2024-05-08统计)共有8个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量C项目8PHP项目1Python项目1C++项目1PHP：流行的Web开发脚本语言 创建周期：4710 天开发语言：C, PHP协议类型：OtherStar数量：37340 个Fork数量…
阅读更多...
Vue计算属性

Vue计算属性

computed计算属性 概念 基于现有的数据&#xff0c;计算出来的新属性。 依赖的数据变化&#xff0c;自动重新计算。 语法 声明在 computed 配置项中&#xff0c;一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名}} <div class"app">{{ s…
阅读更多...
Postman的简介，安装，注册。

Postman的简介，安装，注册。

一、安装 1.Chrome应用商品搜索Postman安装。(翻墙) 2.客户端安装官网地址:https://www.postman.com/downloads/ 3.Postman的注册和登录。 4.Postman的界面介绍 Home主页 workspaces 工作空间 Collections 集合&#xff0c;项目集合。 Apis api文档 EnViromments …
阅读更多...
D3.js实战：数据可视化高级技巧实例应用

D3.js实战：数据可视化高级技巧实例应用

基础 首先&#xff0c;我们需要一个HTML文件来引入D3.js库&#xff0c;并准备一个画布来放置我们的图表。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width…
阅读更多...
数据分析——业务指标分析

数据分析——业务指标分析

业务指标分析 前言一、业务指标分析的定义二、业务问题构建问题构建的要求 三、业务问题的识别在识别问题的阶段对于企业内部收益者的补充 四、竞争者分析竞争者分析的内容竞争者分析目的案例 五、市场机会识别好的市场机会必须满足的条件市场机会案例 六、风险控制数据分析师常…
阅读更多...
nginx--FastCGI

nginx--FastCGI

CGI 概念 nginx通过与第三方基于协议实现&#xff0c;即通过某种特定协议将客户端请求转发给第三方服务处理&#xff0c;第三方服务器会新建新的进程处理用户的请求&#xff0c;处理完成后返回数据给Nginx并回收进程(下次处理有需要新建)&#xff0c;最后nginx在返回给客户端…
阅读更多...
2024- 人工智能药物设计- AIDD- 胶质母细胞瘤的相关论文研究

2024- 人工智能药物设计- AIDD- 胶质母细胞瘤的相关论文研究

胶质母细胞瘤的相关论文研究 1. 胶质母细胞瘤的相关的论文 Natural Small Molecules Targeting NF-κB Signaling in Glioblastoma: This review discusses the role of NF-κB signaling in glioblastoma and highlights natural small molecules that can interfere with t…
阅读更多...
最新文章

Copyright @ 2022~2023