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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
Vue声明式渲染详解
May 17 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
asp.net和php的区别点总结
2019/10/10 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
python创建进程fork用法
2015/06/04 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
10个顶级Python实用库推荐
2021/03/04 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
雷锋观后感
2015/06/10 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书