<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue.js的入门</title>
 <!-- 导入 -->
 <script type="text/javascript" src="../jss/vue.js"></script>
 <script type="text/javascript">
  <!-- 单一入口 -->
  window.onload = function(){
   var app = new Vue({
    // el属性用来绑定元素节点
    el:"#app",
    // data属性用来绑定数据
    data:{
     message:"Hello World"
    }
   });
   // 建立vue对象
   var app2 = new Vue({
    el:"#app2",
    data:{
     message:"页面加载中"+new Date().toLocaleString+"今天心情真好!"
    }
   });
  }
 </script>  
</head>
<body>
<div id="app">
 <!-- vue的模板语法，用来输出变量 -->
 {{message}}
</div> 
<div id="app2">
 <!-- 把title属性和messa变量联系起来 -->
 <span v-bind:title="message">
  请让鼠标悬停几秒钟，来观看这个页面刷新的时间
 </span>
</div>
<!-- 将tilte写“死” -->
 <a href="#" title="这是一个空链接">点击我</a>
</body>
</html>

Vue.js最简单的代码的更多相关文章

  1. angular4.0和angularJS、react.js、vue.js的简单比较

    angularJS特性 模板功能强大丰富(数据绑定大大减少了代码量) 比较完善的前端MVC框架(只要学习这个框架,按照规定往里面填东西就可以完成前端几乎所有的的问题) 引入了Java的一些概念 ang ...

  2. 基于vue.js的简单用户管理

    功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...

  3. vue.js引用出错-script代码块放在head和body中的区别

    这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...

  4. vue js的简单总结

    这篇文章主要对vue的理解进行总结: 参考来源:http://blog.csdn.net/generon/article/details/72482844 vue.js是一套构建用户界面的渐进式框架, ...

  5. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  6. Vue.js-----轻量高效的MVVM框架（二、Vue.js的简单入门）

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  7. 【Vue.js】简单说下vuejs中v-model自定义使用姿势

    vue.js中有个v-model的语法,可以实现双向绑定. 起初刚看到的时候,觉得很神奇.后面随着对vue.js的熟悉.发现这个其实是vue官方给我们实现的一个语法糖. 使用v-model的时候,vu ...

  8. 【前端】Vue.js实现简单价格计算器

    价格计算器 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> ...

  9. [JavaScript] js实现简单的代码运行框

    <script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = ...

随机推荐

  1. 二进制中连续k个1-题解

    原题传送门[>XJOI<]    重要提示:您的等级必须达到三级五段,否则会被一只小猫痛扁 题目描述: 求最小的m,使得m>=n而且m的二进制表示包含至少连续k个1 输入格式: 输入 ...

  2. java获取当前运行的方法名称

    // 这种方式获取的话,数组的第一个元素是当前运行方法的名称,第二个元素是调用当前方法的方法名称 StackTraceElement[] stackTrace = new Exception().ge ...

  3. 基于深度学习的目标检测技术演进：R-CNN、Fast R-CNN、Faster R-CNN

    object detection我的理解,就是在给定的图片中精确找到物体所在位置,并标注出物体的类别.object detection要解决的问题就是物体在哪里,是什么这整个流程的问题.然而,这个问题 ...

  4. uap

    1.UAP 从前端到后端 详细教程 (一) 博主友好几篇相关的文章

  5. LNMP 下使用命令导出导入 MySQL 数据库

    导出数据库 导出数据库为 db_wp.sql.gz 文件: 1 mysqldump -u数据库用户名 -p数据库密码 --add-drop-table --complete-insert 数据库名 | ...

  6. OpenCV3编程入门-读书笔记2-core组件

    一.颜色空间缩减 1.概念 如果图像是3通道,深度为1个字节,则每个像素有256*256*256种可能值,这么多的可能值会对算法性能造成严重影响.利用颜色空间缩减就能解决这个问题,例如将颜色值0~9取 ...

  7. AC的故事大结局山寨版（下）

    AC的故事大结局山寨版(下) TimeLimit:2000MS  MemoryLimit:128MB 64-bit integer IO format:%lld   Problem Descripti ...

  8. 转载：.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法

    .Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法 阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集 ...

  9. 2019 Android 高级面试题总结 从java语言到AIDL使用与原理

    说下你所知道的设计模式与使用场景 a.建造者模式: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 使用场景比如最常见的AlertDialog,拿我们开发过程中举例,比如C ...

  10. 简单几步让网站支持https，windows iis下https配置方式

    1.https证书的分类 SSL证书没有所谓的"品质"和"等级"之分,只有三种不同的类型.SSL证书需要向国际公认的证书证书认证机构(简称CA,Certific ...