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

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

模板语法

前言

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

文本插值

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

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

原始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 = "
这里是使用v-html渲染的结果
";
      var imgSrc = "/src/components/icons/newImg.gif"
      return {
        htmlDisplay,
        imgSrc
      }
    }
  }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

<p>
 <span v-html="htmlDisplay">
     <a href="">a>
 span>
p>
1
2
3
4
5

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

属性Attribute绑定

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

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

  
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

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

  
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

动态绑定多个值

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17