第二章 VUE数据绑定和渲染（1）

这节课主题是如何将数据动态绑定到html中并渲染出来。
在一般情况下，前端展示的动态数据，都是从后端（如JAVA,C#,PHP等后端语言提供数据，一般都是json格式）获得数据后，进行解析并渲染到html中。这里，为了演示效果，我们只是模拟少量的不从后端读取固定数据，来进行测试vue数据绑定相关知识点。

在VUE中，绑定数据一般常用的是使用模板语法来声明式地将数据渲染进 DOM 的系统。
我们先看第一个DEMO1

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {data () {return {msg: 'Hello world'}}
}
</script>

这是使用{{ 变量 }} 的模板语法绑定。
我们还可以使用 v-bind: 或者英文半角符的冒号 : 进行绑定;
看下第二个DEMO2

<template><div class="hello"><h1>{{ msg }}</h1><br /><h2>{{obj.name}}</h2><a v-bind:title="obj.name">{{obj.name}}</a></div>
</template><script>
export default {data () {return {msg: 'Hello world',obj: {name: '张三'}}}
}
</script>

注意：在使用v-bind 语法进行绑定时候，不需要加{{ }} 这样的模板语法符号。v-bind 是VUE中的一个指令，它们会把动态数据渲染在 DOM 上。

第二章 VUE数据绑定和渲染（1）相关推荐

第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head&g ...
VUE 数据绑定模块渲染 computed（实现通过路由id 查询数据json结构，对应的值来放在面包屑中）...
异步请求的值放在vuex中,然后页面挂载该数据和渲染页面 computed 计算属性是基于它的依赖缓存的.计算属性在它的相关依赖发生改变时会重新取值,所以当ajax请求回来的数据发生变化时,计算属性的 ...
OSG三维渲染引擎编程学习之十七：“第二章：OSG数学基础” 之 “2.7 世界坐标系、物体坐标系、摄像机坐标系”
第二章 OSG数学基础 OSG是一个优秀的三维渲染引擎,三维渲染涉及到大量的3D数学知识.3D数学是一门和计算机几何相关的科学,研究怎样用数值的方法来解决几何问题,因此,掌握并灵活运用3D数字知识是O ...
Vue实战狗尾草博客管理系统第二章
Vue实战狗尾草博客后台管理系统第二章本章主要内容如下:底层布局,路由配置,github仓库推送关联. 关联GitHub仓库 > 关联建立在github已创建账号的基础上复制代码登录自己的 ...
《风尚坐火箭学习vue》-- 第二章：页面中输出hello Vue
前言:前端框架千千万,独有vue占一半我是风尚,让我们一起坐火箭去学习Vue 图片来自vue官网第二章:hello Vue 上章回顾:风尚内心答应了跟白发老头学习vue 风尚内心答应了跟白发老头学 ...
第二章：Android游戏开发之前台渲染
1.布局管理安卓的四种布局模式: 线性布局表格布局相对布局单帧布局坐标布局目前安卓建议不要用坐标布局,容易因屏幕尺寸或者其他问题产生问题.这几种布局我没有展开说,是因为就是拖拽就可以实现, ...
1. Vue从入门到精通（第一章 vue核心）
Vue从入门到精通(第一章 vue核心) 第一章 Vue核心 1. Vue简介 1.1 Vue是什么? 1.2 Vue的作者以及迭代版本 1.3 Vue的特点 2. 搭建Vue开发环境 2.1 安装V ...
手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
【前端】第三章 Vue
第三章 Vue 文章目录第三章 Vue 一.Vue 1.介绍 2.Vue 的 MVVM 模型一.Vue 1.介绍 Vue 是一套用于构建用户界面的渐进式框架.与其他大型框架不同的是,Vue 被设计 ...

第二章 VUE数据绑定和渲染（1）

第二章 VUE数据绑定和渲染（1）相关推荐

最新文章

热门文章