vue: data binding

1.文本

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

<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>

2. v-once

通过指令我们可以对文本值进行一次性赋值操作，只进行第一次的数据渲染，如果再次改变值，文本值也不会改变

应用场景 ： 一般是用在组件树中传递时，导致组件数据一层一层传递时，变改了不需要改变的场景，用v-once可以避免在组件数中只需用一次性赋值操作

<template>
  <div class="test">
    <p v-once>hello: {{test}}</p>
    <p v-text="'hello: ' + test"></p>
    <p>{{`company: ${company}`}}</p>
    <p v-text="`name:${name}`"></p>
    <button @click="test='change your world'">update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      test: "Nyan Shen，Welcome to Vue",
      name: "Nyan Shen",
      company: "isoftstone.com",
      position: "web programmer"
    };
  }
};
</script>

<style>
.test {
  color: hsl(207, 76%, 53%);
}
</style>

 

3. 纯html

我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析，所以我们此时要用v-html指令进行解析，在1.0中支持{{{}}}这种格式，为了防止xss功击，去除了这个功能

常用场景 ： 当我们在跟前后台对接口数据时，后台会返回一个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. 属性

在vue中属性这个东西很关健，在组件与组件中数据传递时会很有用，但是对于属性的解析我们不能用{{}}“Mustache” 语法（双大括号）写法，我们同时还是要用指令去解析，那就是v-bind:*,同时我们可以简写用v-bind语法糖 ：即可
如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性

应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能

<template>
    <div>
        <a :href='href'>href</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>