Vue2.0的小总结

1、模板语法

1、文本

---

数据绑定最常见的语法就是双大括号型的文本插值。例子如下：

<template>
    <div>
        <p>hello {{world}}</p>
        <p v-text="'hello ' + world"></p>
        <p>{{`hello ${world}`}}</p>
        <p v-text="`hello ${world}`"></p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>
    export default {
        data() {
            return {
                world: 'world'
            }
        }
    }
</script>

以上用了四种写法
第一种“Mustache” 语法（双大括号）写法；
第二种 用v-text的指今写法；
第三种和第四是对es6写法的拓展写法，称模板字符串。

2、v-once

---

只渲染元素和组件一次，随后的重新渲染，元素、组件及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新性能。

<template>
    <div>
        <p v-once>hello {{ Vue }}</p>
        <button @click="Vue='gaibian'">改变vue值</button>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  Vue: "Vue"
             }
         }
    }
</script>

我们再次点击button时，我们会发现没有任何改变，值行了所谓的一次性赋值。

3、纯html

   我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析。
   常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个html格式，一般是后台操作界面编译的样式文本，此时我们就要用v-html来进行解析

<template>
    <div>
        <p v-html='html'></p>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
             }
         }
    }
</script>

此时在界面我们就能看到显示红色的字你就解析成功了这几个字样，就是被成功解析了。

4、属性

对于属性的解析我们不能用{{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind: * ,同时我们可以简写用v-bind语法糖 ：即可。
如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性

<template>
    <div>
        <a :href='href'>href</a>
        <a :href="href + '/ID=1'"></a>
        <p :id='id'>id</p>
        <img :src="src" alt="图片">
        <button :disabled = 'disabled'>按钮</button>
     </div>
</template>

<script>
    export default {
         data () {
             return {
                  id : 2,
                  href : 'http://www.baidu.com',
                  src : 'https://cn.vuejs.org/images/logo.png',
                  disabled : true
             }
         }
    }
</script>

我们在属性中支持number string boolean类型，以上显示能在界面中看出都能正常进行和原本属性所预期的，不用：来绑定的属性可以直接属性赋值，如果一定要通过data数据选项中返回的值一定要加 ：

5、使用javascript表达式

在业务场景中一些方法判断或者简单的过滤，那我们可以用javascript表达式，能让代码更简洁，更清晰，比方说用一个三元表达式等等.。

6、style中的scoped

具有 scoped 属性的样式只会应用到当前元素和其子元素。可以限制css的作用范围。

<style scoped>
    .a {
        text-align: center;
    }
</style>