vuejs系列教程

Posted 2021-05-01 石内普教授

       五一假期刚过，还没休息够，又要去上班了，时间过得真快。

这一讲，我们学习如何在html上绑定我们的数据。

Mustache语法

       什么叫Mustache语法，别被这高大上的语法吓到了，其实这是双大括号{{}}的写法，前面的课程我们已经见识过了，是最常见的绑定数据的方法，有了它，我们可以轻松地更新视图，无需手动控制。

 <div id="app">{{ name }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     name:"石内普教授"
    }
 });
 </script>

简单吧，页面上也显示我们data里面name的值:“石内普教授”

绑定纯html

       有时候有一种这样的需求，data里面有一些html的标签代码，比如name:"<strong>石内普教授</strong>"

       石内普教授被<strong>标签包住，表示这段文本加粗，假如我们想把加粗的文本显示出来，用双大括号就不能满足要求了，strong的标签就被当成普通文本渲染出来，这时候，你需要用vue提供的v-html指令，代码如下：

 <div id="app" v-html="name"></div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     name:"<strong>石内普教授</strong>"
    }
 });
 </script>

      v-html以属性的形式添加到了div中，渲染出来的自然是name的值，加粗后的“石内普教授”。这就是v-html的作用啦。

绑定属性

        前面两个都是绑定文本值，有时候，html里的属性也很重要，比如<a>标签里的href，<img>里的src等，vue中如何绑定这些属性呢？

       这里就要用到v-bind指令了。

 <div id="app">
   <!--在href前用v-bind：修饰-->
   <a v-bind:href="link">百度</a>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     link:"https://www.baidu.com"
    }
 });
 </script>

     

     在视图的a标签，用v-bind指令来修饰href属性，而它的值就是data中的属性link。

v-bind指令的简写

      假如一个标签需要绑定多个属性，就要连续写多个v-bind。

      那样写没有问题，但vue给我们提供了更加简便的方法。

     

 <!--缩写-->
 <a :href="link">百度</a>

       上面是简写的写法，仅仅需要冒号。

       注意，当渲染的值为布尔值时，效果就不一样了，当属性值为false时，属性会被移除。

       

 <div id="app">
   <!--我们用缩写的语法-->
   <button :disabled="dis_true">
      我是true
   </button>
   <button :disabled="dis_false">
      我是false
   </button>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
      dis_true:true,
      dis_false:false
    }
 });
 </script>

       我们给两个button的disabled属性做设置，一个为true，一个为false，我们会看到，当disabled为true时，属性值直接设置成disabled，为false时，属性直接被移除了。

支持javascript表达式

      vue除了可以绑定数据到视图外，还支持javascript表达式，进行简单的运算，我们来举几个例子吧。

1. 加减乘除

   
   

    <div id="app">{{ num+3 }}</div>
    <script>
    let app = new Vue({
       el:"#app",
       data:{
           num:2
       }
    });
    </script>
   

 

       上面渲染视图的时候，会对num进行简单的运算，结果为5。

    

2. 三元运算

    

 <div id="app">{{ ok ? 'yes':'no' }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        ok:true
    }
 });
 </script>

渲染结果为：“yes”。

3.字符串拼接

    

 <div id="app">
  <a :href="'https://'+host">百度</a>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        host:'www.baidu.com'
    }
 });
 </script>

        注意，虽然vue支持javascript表达式运算，在实战中我们只在运算简单的时候才会这么玩，当比较复杂时，一定要用computed来进行运算。

小结

      在视图绑定数据的方法：Mustache语法（双大括号语法），绑定纯HTML，绑定属性，支持javascript表达式的写法，以及表达式写法和computed区别。