<!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. 模组 前后端分离CURD 组件

    js (function () { // {# -------------------------------------------------------------------------- # ...

  2. XL4001 典型应用电路

    典型的应用电路如下: 中文数据手册:https://wenku.baidu.com/view/98ad2ed86f1aff00bed51ec7.html 在做毕设的时候用到的一款350ma的DC/DC ...

  3. oracle用命令创建表空间、用户，并为用户授权、收回权限。

    oracle中如何删除用户? Oracle中使用DROP USER来删除用户,如果使用DROP USER CASCADE那么用户的对象也同时被删除掉.为了达到删除用户的效果而又不影响对用户下的对象的使 ...

  4. select获取选中的option(包含value和text，重点是text怎么获取)

    简单描述:后台需要获取到select标签选择的内容,也就是text,该怎么取呢?很简单. 代码: //hml代码<div class="col-md-6"> <l ...

  5. 浅析Memcache和Redis

    想必开发的小伙伴们对Memcache和Redis都不陌生吧,最近正好在整理它们,于是就写一下博客吧!一方面是分享,另一方面便于自己查找. 首先,来说说Memcache和Redis是什么? 说得简单一点 ...

  6. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  7. echarts将图表Y坐标刻度设置成只显示整数

    echarts的配置项中没有直接将坐标刻度强制设为整数的选项,但可以通过minInterval属性将刻度以整数形式显示,在配置项的yAxis对象中添加属性: minInterval: 1 表示将刻度的 ...

  8. Git使用八：创建和切换分支

    git的分支 与svn对比 克隆一份全新的目录以同样拥有 5 个分支来说,SVN 是同时复制 5 个版本的文件,也就是说重复 5 次同样的动作.而 Git 只是获取文件的每个版本的元素,然后只载入主要 ...

  9. Python判断水仙花数

    水仙花数 水仙花数(Narcissistic number)也被称为超完全数字不变数(pluperfect digital invariant, PPDI).自恋数.自幂数.阿姆斯壮数或阿姆斯特朗数( ...

  10. （四）Knockout 表单

    click <div> You've clicked <span data-bind="text: numberOfClicks"></span> ...