Vue的基础语法

Vue的基础语法

一、插值操作

​ 1.使用Mustache语法获取data中的数据

示例：

<div id="app">
  <h2>{{firstName +" "+ lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName:"Lebron",
      lastName:"James"
    }
  });
</script>

使用Mustache语法显示在浏览器中的数据是响应式的，若是data中的数据改变了，浏览器中显示的数据也会动态的改变，这很好用，若是从服务器中动态的获取到数据，就不需要先获得元素，再进行追加了。

​ 2.有时候某些东西，我们不想要它响应式的改变，这个时候可以使用v-once指令

<div id="app" v-once>{{message}}</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello world!'
      }
    });
  </script>

可以打开控制台，输入app.message = "hello vue!",可以看见，虽然message的值修改了，但是页面显示的数据并没有动态的改变。

​ 3.有时可能我们想要显示的数据是一个html类型的数据，就像是含有html标签这样子的数据，这个时候若是直接使用Mustache语法肯定解析不了html标签。这个时候就可以使用一个v-html指令，这就像是给这个元素添加了innerHTML值一样。

<div id="app" v-html="baidu"></div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        baidu:"<a href='http://www.baidu.com'>百度一下</a>"
      }
    });
  </script>

​ 4.v-text指令和Mustache语法差不多，都是取出数据插入元素中，应该就和innerText差不多吧。

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

​ 5.v-pre指令应该和pre标签差不多，使用了这个标签之后就不会对其中的文本进行语法的解析。

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

像是这串代码在页面中显示的就是{{message}}而不是你好呀，因为没有进行Mustache语法的解析。

​ 6.有时候，若是我们在准备数据的时候需要花一定的时间，而这个时候Mustache语法显示的直接是语法格式的文本，然后会有个闪动后出现我们想要显示的数据。这种情况对用户来说体验是非常不好的，所以还不如在加载完成之前先不要显示呢。这个时候就可以使用到v-cloak指令，cloak是斗篷的意思，寓意在没加载完成之前先使用斗篷把数据盖起来，别让用户看到先。

<div id="app">{{message}}</div>
  <script src="../js/vue.js"></script>
  <script>
    setTimeout("const app = new Vue({\n" +
        "      el: '#app',\n" +
        "      data: {\n" +
        "      message: 'hello vue!'\n" +
        "      }\n" +
        "    });",1000);
  </script>

这串代码就可以演示闪动的场景，你可以感受到，的确不是很友好。

​

<style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>{{message}}</div>
  <script src="../js/vue.js"></script>
  <script>
    setTimeout("const app = new Vue({\n" +
        "      el: '#app',\n" +
        "      data: {\n" +
        "      message: 'hello vue!'\n" +
        "      }\n" +
        "    });",1000);
  </script>

结合style属性选择器，当app加载完成之后它会把v-cloak给去掉，就是拿走斗篷，底下的数据就显示出来了。

通过上面的指令和Mustache语法，我们能够动态的更新元素中的文本内容，但是有的时候像是a标签中的href，img标签中的src，我们也想要动态的进行更新，这就需要进行动态绑定属性操作。

二、动态绑定属性操作

​ 1.v-bind用于绑定一个或者多个属性值

示例：动态绑定a标签的href和img标签的src

<div id="app">
  <a v-bind:href="linkVue">vue官网</a>
  <img v-bind:src="vueLogo" alt="">
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        linkVue:"https://cn.vuejs.org/",
        vueLogo:"https://cn.vuejs.org/images/logo.png"
      }
    });
  </script>

v-bind有个语法糖写法，就是为了简化它的书写，给各位程序员一点甜头的意思。语法糖写法就是直接一个":"

<div id="app">
  <a :href="linkVue">vue官网</a>
  <img :src="vueLogo" alt="">
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        linkVue:"https://cn.vuejs.org/",
        vueLogo:"https://cn.vuejs.org/images/logo.png"
      }
    });
  </script>

这就是语法糖写法，结果没有变化。

​ 2. v-bind绑定class，很多时候我们会希望动态的切换class，比如说音乐的点击和关闭等等。v-bind绑定class有两种方式，分别是对象语法和数组语法

​ 2.1 v-bind绑定class，对象语法

对象语法简述：

<div id="app">
  <h2 v-bind:class="{active:true,line:false}">{{message}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
      message: '为了部落！！！'
      }
    });
  </script>

v-bind绑定class的对象语法就是像这样以键值对的方式，不过value是一个布尔值，表示这个class是否添加上去。

<div id="app">
  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '为了部落！！！',
        isActive:true,
        isLine:false
      }
    });
  </script>

这样就能动态的添加或者删除该类了

下面例子演示，点击文字切换红色。

<div id="app">
  <h2 v-bind:class="{active:isActive,line:isLine}" v-on:click="textClick">{{message}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '为了部落！！！',
        isActive:true,
        isLine:false
      },
      methods:{
        textClick:function () {
          this.isActive = !this.isActive;
        }
      }
    });
  </script>

vue这个响应式的设计真的很方便，很好玩。

2.2v-bind绑定class,数组语法

<h2 v-bind:class="[active,line]">{{message}}</h2>
  <h2 v-bind:class="getClass()">{{message}}</h2>
  <h2 v-bind:class="classes">{{message}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊，李银河!',
        active:"sdfdsfsdf",
        line:"sdfsdf"
      },
      methods:{
        getClass:function () {
          return [this.active,this.line];
        }
      },
      computed:{
        classes:function () {
          return [this.active,this.line];
        }
      }
    });
  </script>

这就是数组语法绑定class，注意数组中的元素不能加单引号，不然就当作字符串而不是变量解析了。可能你会觉得直接写在class中有点长了，那么可以用一个函数或者计算属性来获取。

  1. v-bind绑定style，同样也有对象语法和数组语法，这里就一起展示了

    <div id="app">
  <h2 v-bind:style="{fontSize:font + 'px',color:color}">{{message}}</h2>
  <h2 v-bind:style="[myFontSize,myColor]">{{message}}</h2>
  <h2 v-bind:style="[finalFontSize,finalColor]">{{message}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊，李银河!',
        font:50,
        color:'red',
        myFontSize:{fontSize:50+'px'},
        myColor:{color:'red'}
      },
      computed:{
        finalFontSize:function () {
          return {fontSize:this.font+"px"};
        },
        finalColor:function () {
          return {color:this.color};
        }
      }
    });
  </script>

三、计算属性

有些时候我们想展示的数据不只是一个，而是多个数据进行一定的处理之后再展示的，这时候直接使用Mustache语法的话可能无法满足需求，所以vue中有个叫做计算属性的东西，就是上面例子中我在computed中定义的函数，这些虽然是函数，但是它起到的效果是和属性差不多的，调用的时候不需要加小括号。

下面就以一个计算书本总价格的例子来使用一下吧。

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice:function () {
        let total = 0;
        for(let i = 0;i < this.books.length;i++){
          total += this.books[i].price;
        }
        //这种for循环取出来的i是books中的指定下标的元素，就和forEach差不多
        // for(let i of this.books){
        //   total += i.price;
        // }
        
        //这种for循环取出来的i是下标，就和for(let i = 0;i < this.books.length;i++)差不多
        // for(let i in this.books){
        //   total += this.books[i].price;
        // }
        return total;
      }
    }
  })
</script>
计算属性的setter和getter

其实上面的例子是一个简化的写法，按照javabean的思想，一个属性是要有set和get方法的，这里其实也是这样，不过一般只是作为数据展示，不希望进行改变数据的值，所以就省略的set方法。

<div id="app">
  <h2>{{fullName}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName:"Lebron",
        lastName:"James"
      },
      computed:{
        fullName:{
          set(fullName){
            let names = fullName.split(" ");
            this.firstName = names[0];
            this.lastName = names[1];
          },
          get(){
            return this.firstName + " " + this.lastName;
          }
        }
      }
    });
  </script>
为什么在数据展示的时候推荐使用计算属性而不是方法呢？

这涉及到计算属性的设计，因为计算属性是具有缓存的，多次调用其实只是执行了一次，而方法没有缓存，调用了多少次就执行了多少次，这就产生了性能和效率上的浪费。

<div id="app">
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
</div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName : "Lebron",
        lastName : "James"
      },
      computed:{
        fullName(){
          console.log("the computed is running...");
          return this.firstName + " " + this.lastName;
        }
      },
      methods:{
        getFullName(){
          console.log("the method is running...");
          return this.firstName + " " + this.lastName;
        }
      }
    });
  </script>

打开控制台，可以看见每调用一次方法，方法就会执行一次。而计算属性只会执行一次，两个效率高下立分

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,244评论 0赞 6
  • Vue.js学习
    一、了解Vue.js 1.1.1 Vue.js是什么？ 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,382评论 0赞 3
  • vue.js基础知识整理
    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实...
    王童孟阅读 1,033评论 0赞 2
  • vue
    vue.js简介 Vue.js读音 /vjuː/, 类似于 viewVue.js是前端三大新框架：Angular....
    LiWei_9e4b阅读 544评论 0赞 0
  • vue学习笔记
    vue学习笔记 安装 Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热...
    EL_PSY_CONGROO阅读 1,108评论 0赞 5