【vue.js】文档解读【day 1】 | 模板语法1

如果阅读有疑问的话，欢迎评论或私信！！
本人会很热心的阐述自己的想法！谢谢！！！

模板语法

前言

Vue 使用一种基于 HTML 的模板语法，Vue的所有语法都是合法的HTML代码，都可以被浏览器正常解析。并且在使用Vue提供的模板时，Vue底层还会提供编译优化，使用最少的渲染速度。

文本插值

Vue语法中通过双大括号对页面中指定位置渲染数据，并且数据是响应式数据。例如前面代码中：

<div id="app">{{ message }}</div>

原始HTML

上面通过双大括号插入的值是纯文本形式，若想添加HTML代码，可以通过v-html指令。例如：

<template>
  <h1>练习</h1>
  <p>这是html代码：{{ htmlDisplay }}</p>
 <p><span v-html="htmlDisplay"></span></p>
</template>

<script>
  export default{
    data(){
      var htmlDisplay = "<h2>这里是使用v-html渲染的结果</h2>";
      var imgSrc = "/src/components/icons/newImg.gif"
      return {
        htmlDisplay,
        imgSrc
      }
    }
  }
</script>

注意：v-html属性所在标签中不可有任何内容，否则将会报错：v-html will override element children.例如：

<p>
 <span v-html="htmlDisplay">
     <a href=""></a>
 </span>
</p>

其中a标签引起的控制台错误！

属性Attribute绑定

Vue中使用v-bind绑定属性值，即标签的src、id、class等属性。该属性由于过于常用，Vue还设置了语法糖:id的形式，根据文档可以看出应该注意两个点：

• 对于v-bind绑定数字或者字符串等数据时，当值为null或者undefined时，该属性将会被忽略。

  <template>
  	<img :src="imgSrc" >
  </template>
  
  <script>
    export default{
      data(){
        var imgSrc = "/src/components/icons/newImg.gif";//正常显示
        var imgSrcNull = null;//元素标签中不存在src属性
        var imgSrcUndefined = undefined;//元素标签中不存在src属性
        var imgSrcEmpty = ""; //src(unknow)
        return {
          imgSrc,
          imgSrcNull,
          imgSrcUndefined,
          imgSrcEmpty
        }
      }
    }
  </script>
  

• 对于v-bind绑定布尔值时，只有值为假值时，才会等于false，而真值和空字符串时均为真值。

  <template>
  	 <button :disabled = disableEmpty>123</button>
  </template>
  
  <script>
    export default{
      data(){
        var disableEmpty = "";//按钮中存在disabled属性，并且按钮无法选中
        return {
          disableEmpty
        }
      }
    }
  </script>
  

动态绑定多个值

绑定多个值时，也需要使用v-bind属性，和绑定单个值有一点不同：

不再需要设置引号右边的属性名以及:，直接在对象中设置

<template>
	 <h1 v-bind=objAttr>练习</h1>
</template>

<script>
  export default{
    data(){
      var objAttr = {
        id:123,
        class:"a"
      }               //h1标签中id为123，class属性为a
      return {
        objAttr
      }
    }
  }
</script>