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. 请一定记得升级java虚拟机
			
    对于吃货出身又需要保持体重的我,出门一定要带男票,因为这样就可以把见到的好吃的都买给他吃,就当是自己吃了[汗].偶尔做梦还是会梦到自己一个角落里偷吃东西,听到有脚步声,抬起头,大哭起来:“我饿了.”  ...
    
			
    2. 
						
  2. 模式识别与机器学习—bagging与boosting
			
    声明:本文用到的代码均来自于PRTools(http://www.prtools.org)模式识别工具箱,并以matlab软件进行实验. (1)在介绍Bagging和Boosting算法之前,首先要简 ...
    
			
    3. 
						
  3. js-面试题之字符串
			
    问题:输入两个字符串,从第一个字符串中删除第二个字符串中的所有字符串不可以使用replace<!--例如:输入"They are students" 和"aeiou ...
    
			
    4. 
						
  4. Luogu3373【模板】线段树2
			
    P3373[模板]线段树2 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.将某区间每一个数乘上x 3.求出某区间每一个数的和 输入输出格式 输入格式: 第一行 ...
    
			
    5. 
						
  5. python 爬取w3shcool的JQuery的课程并且保存到本地
			
    最近在忙于找工作,闲暇之余,也找点爬虫项目练练手,写写代码,知道自己是个菜鸟,但是要多加练习,书山有路勤为径.各位爷有测试坑可以给我介绍个啊,自动化,功能,接口都可以做. 首先呢,我们明确需求,很多同 ...
    
			
    6. 
						
  6. 老李谈HTTP1.1的长连接 1
			
    老李谈HTTP1.1的长连接   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:9088214 ...
    
			
    7. 
						
  7. 《Java Performance》笔记1——性能分析基础 2
			
    4.内存使用率: 内存使用率的相关属性包括页面调度或页面交换.加锁.线程迁移中的让步式和抢占式上下文切换. 当应用运行所需的内存超过可用物理内存时,就会发生内存页面交换,系统在进行页面交换或使用虚拟内 ...
    
			
    8. 
						
  8. Visual Studio中的TabControl控件的用法
			
    今天遇到了一个自己没遇到过的控件TabControl控件,所以找了点关于它的资料 TabControl属性 DisplayRect:只定该控件客户区的一个矩形  HotTrack:设置当鼠标经过页标签 ...
    
			
    9. 
						
  9. 使用 Gradle 编译 Java 项目时报错: Could not find Tools.jar
			
    在使用Android studio进行编译成jar的时候,遇到Gradle 编译错误,听前辈们说是jdk的版本不对,于是乎就更新了一下jdk, 然而可能是我重新安装jdk的时候改变了安装路径, 在pr ...
    
			
    10. 
						
  10. 为linux安装xen-tools提示/dev/xvdd does not exist
			
    看样子百度还是不如google啊.百度上找到的信息完全无用.google上却给我找到了... 1:当/dev/xvdd does not exist错误出现时,可以尝试下 mount /dev/cdr ...
    
			
    11.