Vue基础知识(一) - 插值语法

最新推荐文章于 2023-03-06 15:24:24 发布

boJIke

最新推荐文章于 2023-03-06 15:24:24 发布

阅读量794

点赞数

分类专栏：前端 vue 文章标签： html vue.js html5

本文链接：https://blog.csdn.net/bojikeqian/article/details/120738806

版权

前端同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

1.mustache语法( 也叫双大括号)
mustache : 英文是胡须 / 胡子的意思,因为 {{ }} 像人的脸上两边的胡子(自行脑补)

用法:在html标签中插入 {{ 变量名 }} ,来显示自己要展示的数据
注意:mustache语法中可以写简单的表达式
代码如下:


<div id="app">
  <!-- mustache语法中可以写简单的表达式 -->
  <h1> 
    {{firstName + ' ' + lastName}}
  </h1>
  <h2>
    {{msg}}
  </h2>
  <!-- mustache语法中可以写简单的表达式 -->
  <h3>
    {{ count * 2}} 
  </h3>
</div>
<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app", 
    data: {
      firstName: 'Kobe',
      lastName: 'Bryant',
      msg: '你好啊',
      count: 200
    },
    methods: {}
  });
</script>

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

2.v-text
特点: 和原生js的innerText属性类似,作用和mustache语法一样,但是没有mustache语法那么灵活,因为它只能写一个固定的值,并不能像mustache语法一样能写表达式,对一些字符串进行拼接操作等等
注意: 如果标签里有数据的时候,v-text会先替换原来的数据,再展示变量的数据
代码如下:

<div id="app">
  <h2 v-text="msg">我是张三</h2>
</div>

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-text图示
在这里插入图片描述

结果并没有展示张三,而是替换了原先的内容
3.v-html
特点:和原生js的innerHTML属性类似,也能在界面中展示数据
注意: 1.如果标签里有数据的时候,v-html会先替换原来的数据,再展示变量的数据 2.与v-text不同的是,v-html可以解析html标签

4.v-once
特点:具有v-once的标签中的数据只在界面上渲染一次
注意:当我们去修改data里面的值的时候,界面的展示数据不会发生(改变)响应式
代码如下:


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

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-once图示
在这里插入图片描述

注意: 修改了msg的数值时,被v-once修饰的标签的数据没有发生改变
5.v-pre
特点:标签具有v-pre,界面会原封不动地展示标签内的内容,不会解析mustache语法等
代码如下:

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

<script>
  //创建Vue实例,得到 ViewModel
  const vue = new Vue({
    el: "#app",
    data: {
      msg: '你好啊'
    },
    methods: {}
  });
</script>

v-pre图示
在这里插入图片描述

6.v-cloak
特点:在界面和数据还没完全渲染的时候,它不会展示,当界面和数据渲染完成,它才显示
注意:要使用这个指令的时候需要和css的代码 [v-cloak]{ display: none } 一起配合使用


<style>
    [v-cloak] {
      display: none;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>

<body>
<div id="app">
  <h2 v-cloak>
    {{msg}}
  </h2>
</div>

<script>
  //创建Vue实例,得到 ViewModel
  setTimeout(function(){
    const vue = new Vue({
      el: "#app",
      data: {
        msg: '你好啊',
       },
      methods: {}
    });
  },1000)
</script>

用一个一秒的定时器来检验一下,一秒后显示

boJIke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础知识(一) - 插值语法

1.mustache语法( 也叫双大括号)mustache : 英文是胡须 / 胡子的意思,因为 {{ }} 像人的脸上两边的胡子(自行脑补)用法:在html标签中插入 {{ 变量名 }} ,来显示自己要展示的数据注意:mustache语法中可以写简单的表达式代码如下:<div id="app">  <h1> {{firstName + ' ' + lastName}} <
复制链接

扫一扫