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 开始
下一篇: