vue基础（二）——vue基础语法

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量531 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43957263/article/details/121728417
版权

摘要

        昨天分享了vue的起步与体验。今天我们来看一下vue的基础语法。

主要有：

v-text、v-html、v-bind、v-on、v-if、v-show和v-model的使用。

1、v-text

　v-text 就是设置标签的内容，但是会覆盖元素中原本的内容。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message">123</h2>
        <!--全替换 v-text相当于textContent-->
        <h2 v-text="info">123</h2>
        <h2>{{ message }}123</h2>
        <!--拼接在一起-->

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "dadadada",
                info: "adadadadad"
            }
        });
    </script>
</body>

</html>

效果：

2、 v-html

v-html和v-text一样都是设置标签的内容，都会覆盖元素中原本的内容，不过v-html会解析html格式。

代码：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // content: "hello"//文本时二者毫无区别
                content: "<a href='http://www.baidu.com'>hello</a>" //当是html表达式时，v-text不会解析，v-html会解析，就是设置innerHTML
            }
        });
    </script>
</body>

</html>

效果：

3、 v-bind

v-bind就是绑定属性，可以绑定class、style等。

3.1、绑定class

使用方法是v-bind:class="{类名1: 布尔值,类名2: 布尔值}"，如果有多个则用逗号隔开。简写方法是将v-bind换为:

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: coral;
        }
        
        .aaa {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- class中的格式是类名：布尔值 -->
        <div v-bind:class="{active : isactive , aaa : bbb}">{{ message }}</div>
        <!-- 简写方法 -->
        <div :class="{active : isactive , aaa : bbb}">{{ message }}</div>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "11111111",
                isactive: true,
                bbb: true //这个布尔值决定前面的类是否加上
            },
        });
    </script>
</body>

</html>

效果：

3.2 、绑定style

使用方法是v-bind:style="{ 属性名: 属性值（或者data中的变量）}"

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 不加单引号会把red当成一个变量 -->
        <div v-bind:style="{ color : red }">{{ message }}</div>
        <div v-bind:style="{ color : 'red' }">{{ message }}</div>
        <div v-bind:style="{ color : aaa }">{{ message }}</div>
    </div>


    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "11111111",
                aaa: 'blue',
                // red: blue,//会报错
            },
        });
    </script>
</body>

</html>

效果：

4、v-on

v-on 监听事件，就是我们使用js绑定事件的功能；使用方法v-on:事件类型="事件函数"

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h2>{{ count }}</h2>
        <button v-on:click="count++">+</button>
        <button v-on:click="count--">-</button><br>
        <!-- 语法糖写法 -->
        <button @click="count++">+</button>
        <button @click="count--">-</button>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count: 0
            }
        });
    </script>
</body>

</html>

效果：

 5、v-if、v-show

v-if、v-show都是用来控制显示和隐藏的；不同点在于v-if是直接将标签移除，v-show是使用display：none属性隐藏。

具体区别可以参考我讲小程序的一篇文章：小程序中if和hidden的区别及应用场景_回首＆逝去～的博客-CSDN博客

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-if直接在dom树中删除 -->
        <div v-if="isShow">xianshi</div>
        <!-- v-show是在行内样式中加上display:none -->
        <div v-show="isShow">xianshi</div>
        <button @click="isShow = !isShow">切换显示</button>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                isShow: true
            }
        });
    </script>
</body>

</html>

效果：

 6、v-model

v-model可以实现表单的双向数据绑定，可以随着文本框的输入来实时改变显示数据，具体实现方法今后会讲，今天我们先看它的使用。

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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="message"> {{ message }}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
        });
    </script>
</body>

</html>

效果：

 

回首＆逝去～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue基础2——模板语法，数据绑定
qq_52983897的博客
09-08 110
举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多指令，都是v-xxx，此处只是拿v-bind举例。2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）功能：用于解析标签体内容。
vue基础指令——六大类指令
m0_61631823的博客
01-12 1075
vue的基础语法中有六大类指令，分别为：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令 1.内容渲染指令：常用的有三个 v-text:直接跟在元素后面，例如<p v-text="username"></p>,username是指参数，需要在vue实例中data中定义。这个指令有一个缺点，如果p标签中有内容，但在vue实例中又定义了，就会将原来的内容覆盖 {{ }}: 插值表达式，在实际开发中运用最多，它是一个内容占位符，不会覆盖原有拥有的内容
二、Vue基础语法
ianutt的博客
04-23 110
插值操作 Mustache（双大括号） 将data中的文本数据，插入到HTML中 <h2>{{ name }}</h2> <h2>{{ name }} {{ lastname }}</h2> <h2>{{ num * 2}}</h2> v-once 该指令后面不需要跟任何表达式（比如之前的v-for后面是有跟表达式的） 该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变 <h2 v-once&g
vue两种语法
A_a11100的博客
06-09 134
学习自用
Vue基础语法——v指令的基本用法
qq_43706131的博客
08-16 1516
1、v-bind 使用 v-bind 来绑定元素特性! 01-v-bind.html <body> <div id="app"> <!-- 如果要将模型数据绑定在html属性中 则使用 v-bind 指令,此时title中显示的是模型数据 --> <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1> <!-- v-bind 指令
Vue基础（二）——模板语法
pro1822的博客
04-29 750
Vue基础（二）——模板语法
Vue 组件基础——插槽
qq_40930841的博客
05-05 681
标签定义插槽，从而在组件中预留占位符。<slot>插槽的默认内容
Vue 组件基础——动态组件
qq_40930841的博客
05-05 400
链接：https://pan.baidu.com/s/16Iy3bNzoQUNiS8D0qOYtOw?其中<KeepAlive></KeepAlive>用于实现组件缓存。，当该属性值发生变化时，页面中渲染的组件也会发生变化。动态组件可以动态切换页面中显示的组件。标签可以定义动态组件，语法格式如下。函数只处理对象最外层属性的响应，它比。时，如果要实现组件的切换，需要调用。属性的属性值表示要渲染的组件。组件保存为响应式数据。
Vue基础1——简介，初识
qq_52983897的博客
09-07 304
vue简介，vue特点，vue作者，组件化编码，声明式编码，前端框架
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue基础代码演示——temp.json
03-21
如果觉得百度云下载速度慢可以在此处下载，如果没有积分也可以直接私信博主直接给文件，所需积分只是给个鼓励，谢谢支持！！！
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础语法练习源码
12-09
本套资源，是在html文件中测试的一些vue基础语法，包括过滤器、定义插件、列表渲染等语法。此资源适用于初学vue的小伙伴，用于加深对vue语法的熟悉。
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1181
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 473
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 270
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 319
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
vue3基础语法学习文档
04-05
vue.js 是一个渐进式的前端框架，主要用于构建用户界面。它的基础语法包括： 1. 模板语法：Vue.js 使用 HTML 作为模板...这些是 vue.js 的基础语法，如果想要学习 vue.js，建议阅读官方文档或者参考相关的书籍或教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回首＆逝去～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值