基础语法

Vue

2.插值操作

2.1 mustache - {{}}

2.1.1 使用方法

可以直接填写变量名，也可以进行简单的表达式运算！

{{ firstName + ’ ‘ + lastName}} or {{message}} or {{ count * 2 }}

2.2 插值指令 v-once

代码：

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


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">
  const app = new Vue({
    el:"#app",
    data:{
      message: "helloworld"
    }
  });
</script>

效果：

2.3 v-html

用于展示带html的属性值。该指令也会覆盖元素当中本身的元素。

    <div id="app">
      - {{msg}} - <br/>
      <span v-text="msg">111</span>
      <hr />
      <div>
        {{html}}
      </div>
      <hr />
      <div v-text="html"></div>
      <hr />
      <div v-html="html"></div>
    </div>
    <script>
      /**
       创建一个VUE实例，当我们导入VUE的资源后，浏览器的内存中就多了一个VUE的构造函数；
       我们创建的这个 vm 对象就是MVVM中的vm调度者。
      **/
      var vm = new Vue({
        el:'#app',
        // data中的属性，存放的就是el当中需要用到的属性，
        // 这个data 也就是MVVM中的M，Model层用来保存数据
        data:{
          msg:'hello vue',
          html:'<h1> the hello world !</h1>'
        }
      });
    </script>

效果：

2.4 v-text

用于在html显示vue中data的值。默认v-text 是没有闪烁问题的，它会覆盖元素中原有的内容，但是插值表达式指挥替换自己的这个占位符。

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>

2.5 v-pre

原封不动的把标签中的内容展示出来。

<h2 v-pre>{{message}}</h2>

2.6 v-cloak

这个指令保持在元素上直到关联组件实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。

示例：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

div 不会显示，直到编译结束。

2.5 v-bind

是vue中提供的用来绑定属性的指令。v-bind:title=“表达式”；v-bind 缩写 :

      v-bind 实例： <br>
      <button v-bind:title=" title + '你确定没有骗人？' ">按钮</button>

	      var vm = new Vue({
        el:'#app',
        data:{
          msg:'hello vue',
          html:'<h1> the hello world !</h1>',
          title:'点击这里可以领取红包！'
        }
      });

示例效果：

本文由 huzd 创作，采用 知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名最后编辑时间
为: 2021/12/20 19:41