<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue.js 的入门</title>
 <!-- 导入 -->
 <script type="text/javascript" src="./js/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属性和message变量联系起来 -->
 <span v-bind:title="message">
  请让鼠标悬停几秒钟，来观看这个页面刷新的时间
 </span>
 <br/> <br/>
 <a href="#" title=" 这是一个空链接"> 请鼠标悬停几秒</a>
</div>
 
</body>
</html>
 

vue.js 入门学习的更多相关文章

  1. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  2. VUE.js入门学习（4）-动画特效

    1.VUE中CSS动画原理(more是  v-enter 具体的根据 name的来决定) 动画是通过在某一时间段来添加样式决定的. 要通过 transition进行包裹. 2.在VUE中使用 anim ...

  3. VUE.js入门学习（2）-基础精讲

    1.VUE 实例 - 一个项目是有很多的vue实例拼装的.每一个组建就是vue的实例. var vm = new Vue() 2.VUE 实例生命周期钩子 生命周期函数:VUE实例在某一个时间点会自动 ...

  4. vue.js入门学习

    可以用淘宝npm镜像 然后安装 然后初始化项目: Watch就是一个监听 v-if是如果为false就根本不在页面存在这个元素 v-show是通过display:none来控制这个元素的显示和隐藏 r ...

  5. VUE.js入门学习（3）-深入理解VUE组建

    1.使用组件的细节点 (1)is="模版名" (2)在子组建定义data的时候,data必须是一个函数,而不能是一个对象,每个子组建都有自己的数据存储.之间不会相互影响. (3)操 ...

  6. VUE.js入门学习（1）-起步

    1.hello world <div id="app">{{content}}</div>var app = new Vue({ el:'#app', da ...

  7. VUE.js入门学习（5）- 插槽和作用域插槽

    插槽: (1)用法 以前的写法:如果内容很多的话,就很烂了- 插槽写法:(PS:组建名不能用保留关键字) (2)具名插槽 (3)作用域插槽 必须template开始和结尾,这个插槽要声明我从子组建接收 ...

  8. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  9. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

随机推荐

  1. PhpStorm+xdebug+postman调试

    PhpStorm+xdebug+postman调试 写PHP时,一直用postman做测试,最近发现在测试过程中可以用xdebug来断点调试,比原来手动打exit或者die来断点效率高多了. 下面记录 ...

  2. Java基础_0303：封装性初步

    class Book { // 定义一个新的类 private String title; // 书的名字 private double price; // 书的价格 public void getI ...

  3. 均方根误差（RMSE）与平均绝对误差（MAE）

    RMSE Root Mean Square Error,均方根误差 是观测值与真值偏差的平方和与观测次数m比值的平方根. 是用来衡量观测值同真值之间的偏差 MAE Mean Absolute Erro ...

  4. 基于【磁盘】操作的IO接口：File

    基本操作Api import org.apache.commons.lang3.time.DateFormatUtils; import java.io.*; import java.util.Dat ...

  5. yum 记一次安装时的报错

    我电脑是centos 6.8,我先安装了openslp-2.0.0-3.el6.x86_64.rpm 然后我更改了yum源配置文件,我将updates源给禁用了,只保留os源和extras源,注意了, ...

  6. ReentrantLock(重入锁)的使用

    //效果和synchronized一样,都可以同步执行,lock方法获得锁,unlock方法释放锁public class MyService { private Lock lock = new Re ...

  7. 1173 - The Vindictive Coach

    题目大意:n个不同身高的队员和教练的按照身高排成波浪形……每个人按照身高由低到高编号,其中第m个是教练,他必须在第一个,如果条件允许,排第二的要比m低,如果条件不允许,即其余人都比教练高,则要让差距尽 ...

  8. CF1096E The Top Scorer

    题目地址:洛谷CF1096E 本场AC数最少 (最难) 的题目 题目大意:给出三个数p , s,r,表示有p人,每个人都有一个非负得分,所有人的得分和为s,Hasan的得分至少为r,求Hasan是第一 ...

  9. LwIP Application Developers Manual8---Sample lwIP applications

    1.前言 你已经编译lwIP协议栈在你的目标平台上,并且网络驱动正常工作.你可以ping你的设备. 干得好,为你感到骄傲.虽然一个设备可以响应ping,但并不能算一个完整的应用. 现在你可以通过网络接 ...

  10. LwIP Application Developers Manual1---介绍

    1.前言 本文主要是对LwIP Application Developers Manual的翻译 2.读者(应用开发手册的读者) 谁适合读这份手册 网络应用的开发者 想了解lwIP的网络应用开发者 阅 ...