html渲染1模板,1-2. Vue.js核心知识之模板渲染

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

插值

普通文本，双向绑定: {{ msg }}

普通文本，单次绑定: {{ msg }}

输出html代码:

动态改变属性值

{{ value ? '是' : '否' }}

{{ message.split('').reverse().join('') }}

条件

vue中使用v-if、v-else和v-else-if来实现条件渲染

是

否

标题

段落 1

段落 2

另一个用于根据条件展示元素的方法是使用v-show

显示内容

v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

列表

vue中使用 v-for 把数组渲染成选项列表。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组，item 是数组元素迭代的别名。

• {{ item.message }}

new Vue({

el: '#list',

data: {

items: [

{ message: '列表项1' },

{ message: '列表项2' },

{ message: '列表项3' },

]

}

})

也可以用 v-for 通过一个对象的属性来迭代。

• {{ value }}

new Vue({

el: '#object',

data: {

object: {

firstName: 'John',

lastName: 'Doe',

age: 30

}

}

}

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。当指令对应的表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

现在你看到我了

这里是个链接

点击触发事件

修饰符作用

小结

本节主要学习了vue模板渲染的几种形式：文本插值、属性渲染、条件渲染、列表渲染和指令改变渲染。我们通过这些渲染方式就可以轻松的通过数据控制页面的显示内容了。