Vue基础第二篇

最新推荐文章于 2024-07-14 12:56:18 发布

_语义错误

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量311

点赞数

分类专栏： VUE 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_66451927/article/details/125706513

版权

二、.插值语法

1、 mustache语法

2.1v-once （用得少，特殊请况下使用）

3、methods和computed的区别

二、.插值语法

1、 mustache语法

将data中的文本数据，插入到HTML中，可以通过Mustache语法(也就是双大括号)

运行结果：

2.1v-once （用得少，特殊请况下使用）

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变

<body>
<div id="app">
  <h2>{
  {message}}</h2>
  <h2 v-once>{
  {message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
</body>

运行结果：

2.2 v-html

v-html可以让代码按照HTML格式进行解析，并且显示对应的内容。
后面往往会跟上一个string类型
浏览器会将string的html解析出来并且进行渲染

<body>

<div id="app">
  <h2>{
  {url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

</body>

运行结果：

2.3 v-text（了解）

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
但是我们一般不使用，因为不灵活，会覆盖原来在html里的文字

<body>

<div id="app">
  <h2>{
  {message}}, 李银河!</h2>
  <h2 v-text="message">, 李银河!</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>

运行结果：

2.4 v-pre: { {}}

v-pre用于跳过这个元素和它子元素的编译过程，显示原本的Mustache语法。

<body>

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>

运行结果：

2.5v-cloak: 斗篷（了解）

v-cloak 添加之后在vue内容解析后才会出现html内容，防止浏览器直接显然出未编译的Mustache标签，使得用户体验比较好，有点像window.onload,但是这个vue指令用的少，大部分用函数，使用虚拟DOM

<head>
  <meta charset="UTF-8">
  <

最低0.47元/天解锁文章

_语义错误

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础第二篇

二、.插值语法 mustache 语法、v-once、 v-html、 v-text、 v-pre: {{}}、 v-cloak: 斗篷三. v-bind（重点）3.1. v-bind 绑定基本属性3.2. v-bind 动态绑定 class3.3. v-bind 动态绑定 style四. 计算属性1、计算属性与插值语的区别：2、计算属性的s ette r和 getter3、methods 和 computed 区别...
复制链接

扫一扫