<!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. 简易解说拉格朗日对偶（Lagrange duality）

    引言:尝试用最简单易懂的描述解释清楚机器学习中会用到的拉格朗日对偶性知识,非科班出身,如有数学专业博友,望多提意见! 1.原始问题 假设是定义在上的连续可微函数(为什么要求连续可微呢,后面再说,这里不 ...

  2. 一个基于Net 的CMS -- Umbraco CMS

    一个基于Net 的CMS  -- Umbraco CMS:   https://umbraco.com/ Sitecore 和 EPiServer    http://www.bubuko.com/i ...

  3. 【原创】大数据基础之Kudu（2）移除dead tsever

    当kudu有tserver下线或者迁移或者修改hostname之后,旧的tserver会一直以dead状态出现,并且tserver日志中会有大量的连接重试日志,一天的错误日志会有几个G, W0322 ...

  4. 解决微信小程序Video 某些属性设置不起作用问题

    <video controls="{{false}}" autoplay="{{true}}"></video> 设置属性务必要使用{{ ...

  5. docker hub加速访问设置

    前言:docker是国外的,虽然有个版本开源免费,但是其docker  hub还是在国外,刚刚安装后,拉镜像就会发现,连接请求超时,中断服务,这是因为防火墙的问题,所以要将源指向国内的知名docker ...

  6. elasticsearch-5.2.1在windows下的安装方法

    elasticsearch-5.2.1安装方法 1. 安装java 下载安装java jdk 1.8 以上 配置java环境变量 右击[我的电脑]---[属性]-----[高级系统设置]---[环境变 ...

  7. 到底什么时候该使用MQ？

    一.缘起 一切脱离业务的架构设计与新技术引入都是耍流氓. 引入一个技术之前,首先应该解答的问题是,这个技术解决什么问题. 就像微服务分层架构之前,应该首先回答,为什么要引入微服务,微服务究竟解决什么问 ...

  8. 我是如何用redis做实时订阅推送的

    前阵子开发了公司领劵中心的项目,这个项目是以redis作为关键技术落地的.       先说一下领劵中心的项目吧,这个项目就类似京东app的领劵中心,当然图是截取京东的,公司的就不截了...   其中 ...

  9. Mapreduce概述和WordCount程序

    一.Mapreduce概述 Mapreduce是分布式程序编程框架,也是分布式计算框架,它简化了开发! Mapreduce将用户编写的业务逻辑代码和自带默认组合整合成一个完整的分布式运算程序,并发的运 ...

  10. Phabricator服务的搭建

    目录 概述 遇到的坑-Phabricator连接不上MySQL 准备环境 安装软件 安装Nginx 安装MySQL 安装PHP 下载Phabricator 配置 配置nginx和php 配置phabr ...