Vue学习笔记（篇二）——Vue基础语法-CFANZ编程社区

Vue 基础语法

1、Mustache语法

2、v-once

举例代码（练习）：

  <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: '呵呵呵'
      },
      methods: {}
    });
  </script>

3、v-html

  <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: {
        url: '<a href="http://www.baidu.com">百度一下</a>',
      },
      methods: {}
    });
  </script>

4、v-text

  <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: 'Hello',
      },
      methods: {}
    });
  </script>

5、v-pre

  <div id="app">
    <h1>{{message}}</h1>
    <h1 v-pre>{{message}}</h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      },
      methods: {}
    });
  </script>

6、v-cloak

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>

<body>

  <div id="app" v-cloak>
    <h1>{{message}}</h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //在vue解析之前，div中又一个属性 v-vloak
    //在vue解析之后，div中没有一个属性 v-vloak
    setTimeout(() => {
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello',
        },
        methods: {}
      });
    }, 2000);
  </script>

</body>

7、v-bind

例，通过vue实例中的data绑定元素的src和href：

  <div id="app">
    <!-- 错误的做法：这里不可以使用mustache语法 -->
    <!-- <img src="{{imgUrl}}" alt=""> -->
    <!-- 正确的做法：使用v-bind指令 -->
    <img v-bind:src="imgUrl" alt="">
    <h1><a v-bind:href="baiduUrl">百度一下</a></h1>
    <!-- 语法糖的写法 -->
    <img :src="imgUrl" alt="">
    <h1><a :href="baiduUrl">百度一下</a></h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: 'https://img14.360buyimg.com/seckillcms/s250x250_jfs/t1/184564/27/10546/72131/60d137c4Ecbe5e45f/30bcc8ad97d26ab4.jpg',
        baiduUrl: 'https://www.baidu.com'
      },
      methods: {
      }
    });
  </script>

(1)v-bind绑定class

绑定方式：对象语法，对象向语法的含义是class后面跟的是一个对象

例：

绑定方式：数组语法，数组语法的含义是class后面跟的是一个数组

例：

(2)v-bind绑定style

绑定方式：数组语法

绑定方式二：数组语法

8、计算属性

例举：

  <div id="app">
    <h2 :style='{backgroundColor: "wheat"}'>{{firstName+'  '+lastName}}</h2>
    <h2 :style='{backgroundColor: "pink"}'>{{getFullName()}}</h2>
    <h2 :style='{backgroundColor: "tomato"}'>{{fullName}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Join',
      },
      //计算属性
      computed:{
        fullName: function(){
          return this.firstName+" "+this.lastName;
        }
      },
      methods: {
        getFullName: function(){
          return this.firstName+ " " +this.lastName;
        }
      }
    });
  </script>

{{show(index)}}

总价为：{{totalPrice}}元

计算属性的setter和getter

  <div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Join',
        lastName: 'Jim'
      },
      methods: {
      },
      computed: {
        // 原来的形式
        // fullName: function(){
        //   return this.firstName+' '+lastName;
        // }
        // 标准型形式
        // 计算属性一般是没有set方法，只读属性
        fullName: {
          set: function(value){
            console.log("我被重新赋值了！！！", value);
            let names = value.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
          },
          get: function(){
            return this.firstName+" "+this.lastName;
          }
        }
      }
    });
  </script>

计算属性的缓存

  <div id="app">
    <!-- 1、直接拼接 :语法过于繁琐-->
    <h2 :style = '{backgroundColor: "pink"}'>{{firstName}} {{lastName}}</h2>
    <!-- 2、通过定义methods -->
    <h2 :style = '{backgroundColor: "aqua"}'>{{getFullName()}}</h2>
    <h2 :style = '{backgroundColor: "aqua"}'>{{getFullName()}}</h2>
    <h2 :style = '{backgroundColor: "aqua"}'>{{getFullName()}}</h2>
    <h2 :style = '{backgroundColor: "aqua"}'>{{getFullName()}}</h2>
    <!-- 3、通过computed -->
    <h2 :style = '{backgroundColor: "wheat"}'>{{fullName}}</h2>
    <h2 :style = '{backgroundColor: "wheat"}'>{{fullName}}</h2>
    <h2 :style = '{backgroundColor: "wheat"}'>{{fullName}}</h2>
    <h2 :style = '{backgroundColor: "wheat"}'>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'Join',
        lastName: 'Marry'
      },
      methods: {
        getFullName: function(){
          // 被调用四次
          console.log("getFullName");
          return this.firstName+ ' ' +this.lastName; 
        }
      },
      computed: {
        fullName: {
          get: function(){
            // 被调用一次
            console.log("fullName");
            return this.firstName+ ' ' +this.lastName;
          }
        }
      }
    });
  </script>