vue基础语法之插值表达式详解

2024-10-01 23:37:21

一、vscode插件介绍

在我们演示插值表达式之前，我们先安装这一个VScode给我们提供的插件，它可以将我们书写好的网页通过服务端口的方式进行访问，同时它的好处还有：再修改代码后，不需要我们手动点击刷新，插件会帮我们自动进行刷新，是不是非常方便，提高了我们的开发效率，节省了我们每次修改代码都要点击一次刷新的操作。

安装步骤如下图所示：安装Live Server插件

我们安装完插件以后，重启VScode编辑器，然后可以再一个html页面中，右键，选择open with Live Server选项，进行打开。也可以使用快捷键：alt+L然后再按alt+o，即可通过我们安装的插件的方式再浏览器中打开。

打开后我们可以再地址栏中看到127.0.0.1:5500的这个端口方式打开的浏览器。

二、插值表达式介绍

挂载元素可以使用 Vue.js 的模板语法，模板中可以通过插值表达式为元素进行动态内容设置，写法为 {{ }}。

三、插值表达式示例1

我们可以再挂载元素的内部的插值表达式中，书写算数运算，它会帮我们进行自动运算结果。

我们先来演示一下，没有进行vue挂载元素，我们直接使用插值表达式，然后再浏览器中运行。

<body>  <div id="app">    <ul>      <li>计算结果为: {{ 1 + 2 + 3 }}</li>    </ul>  </div>  <script src="js/vue-2.6.14.js"></script>  <script>      </script></body><body>
  <div id="app">
    <ul>
      <li>计算结果为: {{ 1 + 2 + 3 }}</li>
    </ul>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
  </script>
</body>

发现运行后的结果并没有帮我们计算结果，而是将我们再标签元素中书写的内容直接当普通文本的形式给我们展示出来的。

四、插值表达式示例2

vue挂载元素后，我们再使用插值表达式，然后再浏览器中运行。

<body>
  <div id="app">
    <ul>
      <li>计算结果为: {{ 1 + 2 + 3 }}</li>
    </ul>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el:'#app'
    })
  </script>
</body>

通过运行我们发现，我们的计算结果显示出来啦！这就说明数学计算功能是我们vue的插值表达式的功能，如果我们没有进行指定挂载元素，那么就相当于没有使用vue的功能，我们显示的效果就是普通文本的效果。

五、插值表达式注意点

插值表达式只能书写在标签内容区域，可以与其它内容混合。

<body>
  <div id="app">
    <ul>
      <li id="{{ 1 + 2 + 3 }}"></li>
    </ul>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el:'#app'
    })
  </script>
</body>

内部只能书写 JavaScript 表达式，不能书写语句。

<body>  <div id="app">    <ul>      <li>{{ var i = 0}}</li>    </ul>  </div>  <script src="js/vue-2.6.14.js"></script>  <script>    new Vue({      el:'#app'    })  </script></body><body>
  <div id="app">
    <ul>
      <li>{{ var i = 0}}</li>
    </ul>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el:'#app'
    })
  </script>
</body>

六、插值表达式补充

插值表达式中不仅可以书写数学运算，还可以书写三元运算符。

<body>
  <div id="app">
    <ul>
      <li>{{ 10>20?'10大于20':'10不大于20' }}</li>
    </ul>
  </div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el:'#app'
    })
  </script>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

Vue插值、表达式、分隔符、指令知识小结

最近打算重温一遍vue的知识,正好总结一份笔记. 插值基本用法 <span>Text:{{text}}</span> <span v-text="text"></span> 这个属于指令 <li data-id="{{id}}"></li> 有时候只需要渲染一次数据,后续数据变化不再关心,可以通过"*"实现 <span>Text:{{*text}}</sp
简单了解vue 插值表达式Mustache

一.本节说明用样例详细的说明插值表达式{{}}的使用,将模型数据插入到页面当中. 插值表达式为什么叫Mustache(英文:八字须)呢?看看{{内容}}的两个大括号像不像八字胡子呢! 二.怎么做 <div id="app" style="background-color:aquamarine">  <h2>{{firstName.length}}(使
vue插值表达式和v-text指令的区别

目录 1.使用插件表达式 2.在插件表达式中使用v-cloak解决闪烁问题 3.插件表达式 {{message}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达式,在插值表达式中可以写任何合法的js表达式 1.使用插件表达式使用插件表达式,存在内容闪烁问题,但是v-text没有闪烁问题 <div id="app"> <p> {{message}} </p> <p v-text="message"></
vue如何解决数据加载时,插值表达式闪烁问题

目录数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 2.在el挂载的标签上添加解决插值表达式渲染数据闪动先看代码出现的问题解决方法如下图数据加载,插值表达式闪烁问题 1.在公共的css样式中加入 [v-cloak] { display: none !important; } 2.在el挂载的标签上添加 <div class="#app" v-cloak> <p>{undefined{value.name}}</p&g
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出
vue基础语法之插值表达式详解

目录一.vscode插件介绍二.插值表达式介绍三.插值表达式示例1 四.插值表达式示例2 五.插值表达式注意点六.插值表达式补充总结一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击刷新,插件会帮我们自动进行刷新,是不是非常方便,提高了我们的开发效率,节省了我们每次修改代码都要点击一次刷新的操作. 安装步骤如下图所示:安装Live Se
vue基础ESLint Prettier配置教程详解

目录引言前言安装 VsCode 插件配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复配置 ESlint 提交时检测测试配置效果问题排查尾声引言 VsCode + Vue + ESLint + Pret
Vue基础之侦听器详解

目录 vue中什么是侦听器侦听器的用法 vue侦听器-watch vue侦听器-深度侦听和立即执行总结 vue中什么是侦听器开发中我们在data返回的对象中定义了数据,这个数据可以通过插值语法等方式绑定到templat中. 当数据变化的时候,template里绑定的数据会自动进行更新来显示最新的数据.但是这种变化是在template中自动侦听data的值来进行变换的在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用到侦听器watch了官方定义:Vue 通过 watc
C#基础语法：方法参数详解

●值参数 :一个值参数相当于一个局部变量,当使用值参数的时候,将会分配一个新的存储位置,将实参拷贝到该位置,并将该拷贝值传递给该方法.因此,值参数只能将值带进方法,但是不能带出方法,而不会影响实参的值. ●引用参数:当使用引用参数的时候,将不会分配一个新的存储位置,In other words,引用参数能将值带进方法,也能带出方法,因而会影响实参的值.如下例: using System; namespace prg1 { class Paramstest { //值参数使用演示 public s
Vue 2.0入门基础知识之内部指令详解

1.Vue.js介绍当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
Python基础之语法错误和异常详解

目录一.前言二.异常三.异常处理 3.1 try/except 3.2 try/except ... else 3.3 try-finally 四.抛出异常 4.1 raise 五.用户自定义异常六.断言 assert 一.前言 Python assert(断言)用于判断一个表达式,在表达式条件为 false 的时候触发异常. 二.异常即便 Python 程序的语法是正确的,在运行它的时候,也有可能发生错误.运行期检测到的错误被称为异常三.异常处理 3.1 try/except tr
Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

一.Vue的实例 1.1.创建一个 Vue 的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
vue组件三大核心概念图文详解

前言本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽略的一些重要细节.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 本文的代码请猛戳 github博客 ,纸上得来终觉浅,大家动手多敲敲代码! 一.属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型.默认值或自定义校验属性的值,这点在组件开发中很重要,
vue.js+boostrap项目实践(案例详解)

一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3
vue中的过滤器实例代码详解

过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示:  {{ name | Upper }}  <div v-bind:id="martin | Upper