<!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. JAVA进阶4

    间歇性混吃等死,持续性踌躇满志系列-------------第4天 1.静态内部类求极值 class MaxMin{ public static class Result{ //表示最大值.最小值 p ...

  2. rxjs

    流就是一个事件  或者执行的某些操作

  3. 208道面试题(JVM部分暂无答案)

    这是从网上看到的一套java面试题, 答案只是一个大概, 另外题目质量参差不齐, 斟酌参考(JVM的部分暂时没有答案) 一.Java 基础 JDK 和 JRE 有什么区别? 答: JDK(Java D ...

  4. torch.utils.data.DataLoader对象中的迭代操作

    关于迭代器等概念参考:https://www.cnblogs.com/zf-blog/p/10613533.html 关于pytorch中的DataLoader类参考:https://blog.csd ...

  5. gcc 8.2.1 / MCF thread 简介

    gcc 8.2.1 下载 地址 https://gcc-mcf.lhmouse.com/ MCF threadhttps://github.lhmouse.com/ MCF thread 简介MCF ...

  6. ES--06

    第51.初识搜索引擎_上机动手实战多搜索条件组合查询 课程大纲 GET /website/article/_search{ "query": { "bool": ...

  7. 【原创】大叔经验分享（3）hbase client 如何选择

    java中访问hbase有两种方式,一种是hbase自带的client,一种是通过hbase thrift 1 hbase client示例 Configuration conf = HBaseCon ...

  8. uboot、内核、根文件系统启动流程

    [1]Uboot的启动流程  Uboot的启动分为两个阶段.  第一阶段:设置异常向量表,设置ARM核为svc模式,关cache和关mmu,  关看门狗,初始化时钟,串口,内存,初始化栈空间,清bss ...

  9. Scapy

    1.UDP scanning with Scapy Scapy is a tool that can be used  to craft and inject custom packets into  ...

  10. mysql查看索引与锁

    http://www.cnblogs.com/cocos/archive/2011/05/06/2039428.html Mysql乐观锁与悲观锁 http://www.cnblogs.com/esi ...