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

shiina 发布于2019-08-23 18:00 / 1137人阅读

摘要：使用了基于的模板语法，允许开发者声明式地将绑定至底层实例的数据。所有的模板都是合法的，所以能被遵循规范的浏览器和解析器解析。列表中使用把数组渲染成选项列表。我们通过这些渲染方式就可以轻松的通过数据控制页面的显示内容了。

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来实现条件渲染

是否

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


显示内容

v-if 是惰性的，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

列表

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



 
  {{ item.message }}

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



 
  {{ value }}
 


new Vue({
 el: "#object",
 data: {
  object: {
   firstName: "John",
   lastName: "Doe",
   age: 30
  }
 }
}

指令

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

现在你看到我了

这里是个链接点击触发事件

小结

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

GPU云服务器云服务器 js核心知识 java核心知识点 jsp 模板渲染引擎 js模板渲染ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104495.html

1-1. Vue.js核心知识之实例简介

摘要：的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。全局注册全局注册组件我的组件创建根实例渲染后的我的组件总结本节学习的核心知识点莫过于模板渲染表单绑定事件处理组件化这几点了，下面我们针对每一个知识点细细学习。 Vue.js是什么 Vue.js是一套用于构建用户界面的渐进式框架。Vue.js的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合。Vue.js与现代化的工...

amuqiao 2019-08-23 18:00 评论0 收藏0
1-5. Vue.js核心知识之组件化

摘要：组件是最强大的功能之一。组件的创建和注册我们可以使用注册一个全局组件。父组件的数据需要通过才能下发到子组件中。如果传入的数据不符合要求，会发出警告。这对于开发给他人使用的组件非常有用。组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件的创建和注册我们可以使用 Vue.component(tagName, opti...

weknow619 2019-08-23 18:00 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0