Vue声明式渲染详解


Posted in Javascript onMay 17, 2017

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、渲染结构:

Vue声明式渲染详解

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

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

渲染结构:

Vue声明式渲染详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Feb 27 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
七个很有意思的PHP函数
May 12 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
vuejs实现下拉框菜单选择
Oct 23 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 #Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 #Javascript
AngularJS实现的回到顶部指令功能实例
May 17 #Javascript
bootstrap模态框示例代码分享
May 17 #Javascript
ES6入门教程之let和const命令详解
May 17 #Javascript
详解如何在Angular中快速定位DOM元素
May 17 #Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
js操作select控件的几种方法
2010/06/02 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
浅谈python标准库--functools.partial
2019/03/13 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
详解python程序中的多任务
2020/09/16 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
介绍一下linux文件系统分配策略
2012/11/17 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
如何写好建议书
2014/03/13 职场文书
体育专业自荐书
2014/05/29 职场文书
岗位说明书标准范本
2014/07/30 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript