Vue学习(二)-胡子({{}})语法

最新推荐文章于 2024-04-06 20:52:22 发布
最新推荐文章于 2024-04-06 20:52:22 发布
阅读量5.4k 收藏 15
点赞数 5
分类专栏： Vue框架学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44038881/article/details/103399850
版权

一，插值操作

  • 这种语法叫做 Mustache 语法

    中文叫做胡子的意思，两个 {{}} 长的比较像胡子，所以这样命名了

    <body>
    <div id="app">
        <p>{{ message }}</p>					<!-- 直接在模板里面写 --> 
        <p>{{ message + ' ' + message }}</p>	 <!-- 进行字符串的 + 操作 --> 
        <p>{{ (num+10) * 2 }}</p>				<!-- 数字相乘 --> 
        <p>{{ message }} {{ message }}</p>		<!-- 两个插值 --> 
    </div>
    <script src="VueJs/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                num: 0
            }
        })
    </script>
</body>
  • 涉及插值操作的指令

    1. v-once

      我们知道，在Vue里面，所有的数据都是响应式的，我们不想让某些数据发生改变，就需要用到这个指令

      添加该属性的DOM元素，该DOM元素内的**{{}}里面的值不会发生改变**

      <div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

      在这里插入图片描述

    2. v-html

      有时候服务器给我们返回的不是数据二十一串html的字符串，我们想把他转换成DOM元素放到页面中

      <div id="app">
    <h2>{{ message1 }}</h2>		<!-- 显示错误 -->
    <h2 v-html="message2"></h2>	<!-- 显示成功 -->
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message1: '<a href="https://www.baidu.com">百度</a>',
            message2: '<a href="https://www.baidu.com">百度</a>',
        }
    })
</script>

      在这里插入图片描述

    3. v-text

      把文本数据覆盖到DOM元素中，如果原先要填充的DOM元素中有另外的文本也会被覆盖

      在这里插入图片描述

      在这里插入图片描述

    4. v-pre

      不对 {{}} 里面的值进行解析，数据原封不动展现出来

      <div id="app">
    <h2>{{ message }}</h2>
    <h2 v-pre>{{ message }}</h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
        }
    })
</script>

      在这里插入图片描述

    5. v-cloak

      有些情况下，浏览器可能还没有解析出我们编写的 ViewModel ，页面会直接显示处未渲染的 {{ data }}

      在这里插入图片描述

      使用该指令可以解决问题

      <style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h2 v-cloak>{{ message }}</h2>		<!-- 等到数据渲染之后，v-vloak这个属性会消失 -->
</div>

<script>
    setTimeout(function() {
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
        })
        }, 1000)
</script>

      在这里插入图片描述

狄鸠
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue模版语法（初学Vue之v-指令语法）
百赢出品，必属精品
04-18 788
在Vue.js中，v-开头的指令是用来添加动态行为到你的HTML元素或者组件上的。这些指令可以被应用到普通的HTML元素上，也可以用在Vue.js组件上。v-开头的指令是Vue.js中用来添加动态行为到HTML元素或者组件上的。将HTML属性绑定到Vue实例的数据上。创建双向数据绑定，用于表单控件元素。根据条件渲染元素。循环渲染列表。绑定事件监听器，触发响应函数。根据条件控制元素的显示和隐藏。跳过元素和子元素的编译过程，用于显示原始Mustache标签。
vue模板语法之插值语法{{}}的运用
qq_74916452的博客
12-27 586
插值语法允许在模板中插入变量的值。当 Vue 实例化时，它会解析模板，并将双花括号中的内容替换为其对应的变量的值。Vue.js 的插值语法是其模板语法的一部分，允许动态地插入数据到模板中。这是通过使用双花括号。4.模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等。因为双花括号外形酷似胡子，所以也被称之为“胡子语法”
vue基础实践1-胡子语法展现到页面
云端-公子清
05-29 711
vue基础实践1-胡子语法展现到页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
胡子哥的重学前端（笔记）css语法
weixin_33922670的博客
02-14 152
at 规则 @charset 在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。在外部css文件中写法如下： @charset "utf-8"; body{sRules} div{sRules} ... @import 指定导入的外部样式表及目标媒体。 @import ur...
从“小胡子”到 vue 插值语法
weixin_46015333的博客
05-14 556
本文从模板的发展历程讲起，分析历代模板的优缺点，最后从零开始一步一步带你实现一个简单版的mustache（小胡子）模板引擎。
Vue学习笔记——基础语法{{ }}
weixin_44154577的博客
03-04 6148
Vue学习笔记 {{ }}大括号，也是最常用的取值符号，用来渲染data里面的数据 <body> <div id="app"> {{message}} <H2>{{people.name}} {{people.sno}}</H2> <ul> <li>{{campus[0]}}</li> <li>{{campus[1]}}</li> <li>{{c
`${变量}`和胡子{{变量}}
qq_30671441的博客
09-01 158
模板字符串是一种特殊类型的字符串，它可以跨行定义，并且支持在字符串中插入表达式、变量或函数调用的结果。const message3 = `2 乘以 3 的结果是 ${multiply(2, 3)}。需要注意的是，只有被反引号包裹的字符串才会被解析为模板字符串，其他引号形式（单引号、双引号）不支持。const message1 = `我的名字是 ${name}，年龄是 ${age} 岁。// 输出：我的名字是 小明，年龄是 20 岁。语法是模板字符串的一部分，用于将表达式、变量或函数的返回值插入到字符串中。
用vue语法写html,Vue -- 模板语法
weixin_30658827的博客
06-28 1937
Vue 模板语法1.vue 和大多数后台语言，甚至是和art-template 这种前端模板库一样，都有一套，特定的语法来把数据渲染在html上。Mustache -- 大胡子语法1.大胡子的语法格式双大括号'{{}}',用在html标签之间，不能写在标签属性中2.大胡子语法中可以使用js表达式，但只限于Vue实例作用域的和Vue沙盒白名单，白名单规定的一些全局变量例如Math和FDate。3.表...
Vue插值操作-mustache语法
liudd920114的博客
02-21 531
如何将data中的文本数据，插入到HTML中呢？ 我们已经学习过了，可以通过Mustache语法（也就是双大括号）。 Mustache:胡子/胡须 我们可以像下面这个使用并且数据是响应式的 mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 <div id="app"> <h1>hello ...
vue3-tailwindcss-primevue:带有TailwindCss和PrimeVue的Vue 3模板
04-04
Vue 3 TailwindCss + PrimeVue模板 一个Vue 3应用程序模板，实现了 UI工具包， ，Vue Router和Fontawesome。...在组件模板中使用Vue胡子语法（ {{ }} ）不起作用，因为这些组件已被vue init取代。 请改用v-text 。
{{ }}语法
pspxuan的博客
09-17 2473
玛斯塔语法中的计算 玛斯塔语法中的计算格式 加法 ： id = '{{index+1}}'
Vue基础语法
王依米
10-01 199
      组件的创建和定义 定义html之后,在data,之后定义方法,然后在另一个页面里引用,首先在js里引入这个组件,然后在components里声明这个组件,然后在template里引入这个组件. 这个是定义的组件 &lt;template&gt; &lt;div &gt; &lt;button @click="increment"&gt;+...
Vue.js梳理（{}语法与指令）
最新发布
Luo3255069063的博客
04-06 1012
浏览器/平台已实现的，可直接使用的原生函数 问题：代码繁琐基于原生API基础上，进一步封装的，更简化的一组函数的集合前人将多次成功项目的经验总结，形成的帮成品项目 优：后人继续开发即可，项目整体代码和做事的步骤极简化，不再需要大量重复手工劳动 缺：需要改变原有的做事方法，如Vue.js中根本没有查找方法，但是，数据也能出现在想出现的位置https://cn.vuejs.org/一个渐进式（Progressive）的基于MVVM设计模式的JavaScript框架适用于以数据操作为主的项目（WEB、APP）。以
vue 简单指令/Mustache语法
ZhaojunWang的博客
03-24 337
（这几个指令除了mustache，其它的基本用不上） 1、Mustache mustache（胡子语法） 语法，就是 双大括号 {{}} {{}} 里面可以写 变量 也可以写 表达式 ，也可以简单的运算 <h3>{{message}}</h3> <!-- 这里就是直接输出message，message是可变的 --> <h3>{{firstName}},wang</h3> <!-- 这里 firstName 可变， ，wang是固定的--&
初始Vue笔记之——模板语法
zwbHUST的博客
06-28 227
插值 通过使用v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定： <span v-once>这个将不会改变: {{ msg }}</span> 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用v-html指令： <p>Using must...
实现{{}}语法
Bliss_妍的博客
09-14 844
const textReg = /\{\{\s*\w+\s*\}\}/gi; // 检测{{name}}语法 若含有{{}}语法，我们则可以对其处理，由于一个文本节点可能出现多个{{}}语法，因此编译含有{{}}语法的文本节点主要有以下两步： 找出该文本节点中所有依赖的属性，并且保留原始文本信息，根据原始文本信息还有属性值，生成最终的文本信息。比如说，原始文本信息是"test {{test}} {{name}}",那么该文本信息依赖的属性有this.data.test和this.data.name,那么
vue基础语法-vue基本指令的使用方法
qq_43483403的博客
07-31 413
1.差值表达式（声明式渲染/文本差值/胡子语法） 2.v-bind指令 3.v-on指令 4.事件对象 e 5.事件修饰符 6.按键修饰符 7.v-model双向绑定 8.v-model修饰符 9.v-text和v-html指令 10.v-show和v-if指令 11.v-for循环列表 12.动态class 13.动态style
vue中解决小胡子的闪烁问题
weixin_44366185的博客
01-22 723
闪烁的原因 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当标签内使用小胡子{{}}语法进行模板渲染时,由于Vue文件在HTML结构之后才引入,会导致{{}}模板代码在HTML中短暂停留,然后在渲染成真正的数据 解决方案 方案一 使用v-cloak指令结合CSS将元素默认隐藏起来,当数据变化时进行渲染,会自动显...
vue {{}} 大胡子表达式里面可以写些什么
热门推荐
cofecode的博客
11-29 2万+
vue {{}}里面写js表达式可以写些什么？主要有1.{{num + 1}} 一元运算府data:{ num:5 }2.{{status ? ‘succeed’ : ‘failed’}} 三元表达式data:{ status: true }3.{{changeTime()}} 运行函数changeTime(){ return this.value.replace(/\d/g
vue ie chunk-vendors 语法错误
09-03
Vue 中的 `ie chunk-vendors 语法错误` 错误通常是由于在 IE 浏览器中加载 Vue 项目时引发的，原因是 IE 浏览器对一些 ES6 的语法特性不支持。为了解决这个问题，你可以尝试以下几种方法： 1. 在 `babel.config.js`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值