html 数据渲染

比如在你的某个 component 页面 js 中, 有定义如下数据

export default {
  name: 'someComponent',
  data() {
    return {
      name: 'Tom',
      age: 22
    }
  }
};

在数据中有一个名字叫 Tom的, 年龄22岁, html 模板中就可以这样来渲染数据

<div>
名字:{{name}}, 年龄:{{age}}
</div>

在{{ }}中包含的内容, 将被替换为真实的数据, 如果内容中包含了不安全的 html 内容片段, 并且你不想执行这些内容片段, 那么就用三个大括号包裹即可{{{ }}}, 这样就不会渲染里面的 html 文本内容.

vue会自动 watch 这个数据并实时更改数据, 也就是说如果 js 中数据变动, 那么页面的数据也会相应发生改变. 如果只想一次性渲染, 之后不再变化, 需要在变量前面加”*”号:

<div>
名字:{{*name}}, 年龄:{{*age}}
</div>

此外,{{ }}中的内容可以是 js 表达式或者添加过滤器的, 它会执行后输出, 比如

<div>
年龄:{{age+1}}
是否成年:{{age>18?'是':'否'}}
名字大写:{{name|toUpperCase}}
</div>

过滤器, 我们以后会进一步讲解.

如果你不想使用大括号也是可以的, vue 支持我们自己定义表达式符号, 比如

Vue.config.delimiters = ['[[',']]']
Vue.config.safeDelimiters = ['[[[',']]]']

那么就用中括号表达数据即可

<div>
名字:[[name]], 年龄:[[age]]
</div>

内部指令

v-if/v-else/v-show

js内容:

export default {
  name: 'someComponent',
  data() {
    return {
      showResult: true,
      isTome: false
    }
  }
};

模板文件渲染内容:

<div v-show="showResult">
    <div v-if="isTom">我是 Tom</div>
    <div v-else="isTom">我不是 Tom</div>
</div>

v-repeat/v-for

js 内容:

export default {
  name: 'someComponent',
  data() {
    return {
      name: 'Tom',
      likeBooks: [
        {book:'数学'},
        {book:'语文'}
      ]
    }
  }
};

模板文件渲染内容:

<div>
    <li v-repeat="likeBooks">
    {{name}} - {{$index}} - {{book}}
    </li>
</div>

<div>
    <li v-for="books in likeBooks">
    {{name}} - {{$index}} - {{books.book}}
    </li>
</div>

v-text/v-html

这其实就是{{ }}和{{{ }}}的指令写法

<div>
名字:<span v-text="name"></span>
年龄:<span v-text="age"></span>
</div>

v-model

用来告诉 vue, 这个数据是和某个 js 中的 model 对象绑定的, 最常见的就是表单了, 比如 js 中定义了一个 user 对象, 我们需要告诉 vue 字段的一一对应.

<div>
姓名:<input type="text" v-model="user.name"/>
年龄:<input type="text" v-model="user.age"/>
</div>

这样用户输入完成后, user 对象就能及时被赋值了.

v-bind/v-on

v-bind 用来绑定元素的 attribute 属性

<img v-bind:src="path">
<!-- 可简写如下 -->
<img :src="path">

当然用{{ }}包裹也是可以的:

<img src="{{path}}">

绑定多个属性:

<img v-bind="{id:imageId, src:path, 'otherAttr':'value'}">

在 key 这一列不加引号代表自带属性, 加上引号代表自定义属性. value 这一列不加引号代表是 js 里面的变量, 加上引号代表纯文本.

v-on 用来绑定事件, 如点击事件等

<input type="button" v-on:click="doSomething">
<!-- 可简写如下 -->
<input type="button" @click="doSomething('value')">

v-cloak

这是一个特殊指令, 如果你想当整个 div 元素都处于隐藏状态, 直到编译完成.就可以用这个指令. 这样可以防止有时候{{ }}的符号被用户看到

<div v-cloak>
姓名:{{name}}
</div>

 

上一篇:从 Index 开始

下一篇: