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 :title="message"> 简写-->

            鼠标悬停几秒钟查看此处动态绑定的提示信息！

        </span>

    </div>

</body>

<script>

    var vm = new Vue({

        el:"#id",

        data:{

            message:'页面加载的时间'+new Date()

        }

    })

</script>

渲染结构：

　

												


											
Vue声明式渲染的更多相关文章
	

    
								
  1. vue的声明式渲染
		
    声明式渲染 答:2018-8-23声明式渲染是vue对数据进行操作的模式,也叫做响应式渲染当dom节点上绑定了vue的对象的属性时,如果这个属性发生了改变,无需你进行其它的操作,页面上的数据会自动发生 ...
    
		
    2. 
						
  2. React 核心思想之声明式渲染
		
    React 发展很快,概念也多,本文目的在于帮助初学者理清 React 核心概念. React 及 React 生态 React 的核心概念只有 2 点: 声明式渲染(Declarative) 基于组 ...
    
		
    3. 
						
  3. [vue]声明式导航和编程式导航
		
    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
    
		
    4. 
						
  4. Vue之vue.js声明式渲染
		
    Html: <div id="app"> {{ message }} </div> Vue: var app = new Vue({ el: '#app', ...
    
		
    5. 
						
  5. vue中声明式导航和编程式导航
		
    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...
    
		
    6. 
						
  6. vue之文本渲染
		
    Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在前面,我们一直使用的是{ ...
    
		
    7. 
						
  7. vue服务端渲染之nuxtjs
		
    前言 本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同 客户端 ...
    
		
    8. 
						
  8. 声明式开发 & 命令式开发
		
    何为声明式开发,何又为命令式开发~~~ 这里我不做太多概念的剖析,我们只要明确一个: 声明式开发只是告诉计算机需要什么,而不是把每一步都计划好:典型代表为React: 命令式开发则是每一步明确的去操作 ...
    
		
    9. 
						
  9. 【转】Dubbo声明式缓存
		
    缓存的应用非常广泛,为了提高数据访问的速度.Dubbo也不例外,它提供了声明式缓存,以减少用户加缓存的工作量. 一.Dubbo中缓存策略 lru 基于最近最少使用原则删除多余缓存,保持最热的数据被缓存 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Redis + keepalived 高可用群集搭建
			
    本次实验环境介绍: 操作系统: Centos 7.3 IP : 192.168.10.10 Centos 7.3 IP : 192.168.10.20  VIP    地址   : 192.168.1 ...
    
			
    2. 
						
  2. 回答： 2017-03-19的关于css+div布局的疑问     2017-04-05
			
    原问题为红色,回答为黑色 第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个 ...
    
			
    3. 
						
  3. rxjava2学习笔记(1)
			
    1.什么是RxJava? 简单,清晰的多线程编程框架.可方便的写出维护性高,逻辑清晰的Java程序. 2.什么是观察者模式? 入门教程讲这种高大上抽象概念都是耍流氓! 3.开始 3.1github地址 ...
    
			
    4. 
						
  4. avalon2对比avalon1 新增的功能汇总
			
    avalon2.0 与1.4,1.5相比, 2.0是移除了ms-repeat, ms-each, ms-with, ms-include, ms-include-src,ms-data, ms-sca ...
    
			
    5. 
						
  5. 利用WebLog Experet分析日志获取性能需求
			
    一.下载WebLog Expert日志分析工具 官网下载地址:http://www.weblogexpert.com/download.htm 二.安装 安装很简单,点击“下一步”默认安装即可 三.配 ...
    
			
    6. 
						
  6. 业务订单号生成算法，每秒50W左右，不同机器保证不重复，包含日期可读性好
			
    参考snowflace算法,基本思路: 序列12位(更格式化的输出后,性能损耗导致每毫秒生成不了这么多,所以可以考虑减少这里的位,不过留着也并无影响) 机器位10位 毫秒为左移 22位 上述几个做或运 ...
    
			
    7. 
						
  7. STM32实战应用（一）——1602蓝牙时钟1液晶的显示测试
			
    前言 从51到STM32F4学习这么久了,总算找到点头绪了,目前学习了GPIO,中断,定时器,看门狗的基本使用,所以想试着看看能不能做个什么东西,就是想复习一下最近学习的知识.正好上学期单片机课程设计 ...
    
			
    8. 
						
  8. XSS跨站脚本攻击
			
    1.简介 跨站脚本(cross site script)为了避免与样式css混淆,所以简称为XSS. XSS是一种经常出现在web应用中的计算机安全漏洞,也是web中最主流的攻击方式.那么什么是XSS ...
    
			
    9. 
						
  9. C语言学习第四章
			
    今天学习C语言循环结构,为什么要用循环呢?因为有时候我们对一堆的数字进行重复的处理的时候要重复的编写一些相同或者差不多的代码,让程序显得很臃肿,而且写着也麻烦,如果用循环来写的话能简化很多,出错的话也 ...
    
			
    10. 
						
  10. linux下编译安装nginx
			
    1.首先下载稳定版nginx1.10.2 使用wget命令下载 wget http://nginx.org/download/nginx-1.10.2.tar.gz 2.然后解压 tar -zxvf  ...
    
			
    11.