Vue声明式渲染详解

作者：街角小七时间：2024-04-30 10:22:25　

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中，使用 {{data}} 的格式写入。此代码都是Vue.js官网上的实例。

1、首先导入Vue.js

<script type="text/javascript" src="vue.js"></script>

2、html和js代码

<body>

<div id="id"> //id为实例中el的属性
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'渲染到html中的数据！'
}
})
</script>

3、渲染结构：

下面看看将文本数据单向绑定到DOM元素属性上，将这个元素节点的title 属性和 Vue 实例的 message 属性保持一致，代码如下

<body>
<div id="id">
<span v-bind:title="message"> 

鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'页面加载的时间'+new Date()
}
})
</script>

渲染结构：

来源：http://www.cnblogs.com/dyfbk/p/6861103.html?utm_source=tuicool&utm_medium=referral

标签：Vue,渲染

投稿

Vue声明式渲染详解

猜你喜欢

NodeJs读取JSON文件格式化时的注意事项

sql server数据库高可用日志传送的方法

selenium鼠标操作实战案例详解

Python实现对桌面进行实时捕捉画面的方法详解

Flask接口签名sign原理与实例代码浅析

JavaScript中你不知道的Object.entries用法

python实现学生管理系统

.NET中IoC框架Autofac用法讲解

python中requests和https使用简单示例

Python input()函数案例教程

JS基于开关思想实现的数组去重功能【案例】

Python的SimpleHTTPServer模块用处及使用方法简介

Python 中urls.py:URL dispatcher（路由配置文件）详解

Python实现用手机监控远程控制电脑的方法

MAC下mysql安装配置方法图文教程

PHP运行环境配置与开发环境的配置(图文教程)

Node.js readline模块与util模块的使用

GO语言的IO方法实例小结

ORCLE 表中列的修改

用注解编写创建表的SQL语句