我们放了四天假，刚好借此机会，系统的了解一下VUE.JS。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <title></title>
      <link rel="stylesheet" href="demo.css" />
  </head>
  <body>
  <div id="app">
    <p>123</p>
  </div>

  <template id="tpl">
    <div>
      <p>This is a tmp from template tag. </p>
      <span>Hello {{name}}</span>
      <span v-once="name">{{name}}</span>
      <div v-bind:id="'id-' + id">
        your nkow
      </div>
      <img v-bind:src="avatar"/>
      <button v-on:click.stop="alert">alert</button>
      {{firstName}}
      {{lastName}}
      {{fullName}}
      {{price}}
      <my-component title="myTitle" content="myContent"></my-component>
    </div>
  </template>

  </body>
  <script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
  <script>
    var Myconponent = Vue.component('my-component', {
      props: ['title', 'content'],
      data: function() {
        return {
          desc: '123'
        }
      },
      template: '<div>\
        <h1>title: {{title}}</h1> \
        <p>content: {{content}}</p> \
        <p>desc: {{desc}}</p> \
        </div>'
    })
    var data = {id : 1,
      index: 0,
      name: 'Vue',
      avatar: 'http://www.baidu.com/',
      count: [1, 2, 3, 4, 5],
      names: ['Vue1.0', 'Vue2.0'],
      firstName: "Gavin",
      lastName: "CLY",
      cents: 100,
      items: [
        {name: 'Vue1.0', version: '1,0'},
        {name: 'Vue1.1', version: '1.0'}
      ]};
    var vm = new Vue({
        el: "#app",
    template: "#tpl",
    data: data,
    beforeCreate: function() {
      console.log("beforeCreate");
    },
    computed: {
      fullName: function() {
        return this.firstName + " " + this.lastName;
      },
      price: {
        set: function(newValue) {
          this.cents = newValue * 100;
        },
        get: function() {
          return (this.cents/100);
        }
      }
    },
    methods: {
      alert: function() {
        alert(this.id);
      }
    }
      })
  </script>
</html>

清明小长假之VUE.JS学习测试码的更多相关文章

  1. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  2. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  3. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  4. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  5. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  6. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  7. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  8. vue.js学习之 打包为生产环境后，页面为白色

    vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...

  9. vue.js学习之 如何在手机上查看vue-cli构建的项目

    vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...

随机推荐

  1. 怎么将oracle的sql文件转换成mysql的sql文件-- 费元星

    http://jingyan.baidu.com/article/ca41422fe01f251eaf99ed6e.html

  2. 《Cracking the Coding Interview》——第4章：树和图——题目5

    2014-03-19 04:11 题目:设计算法检查一棵二叉树是否为二叉搜索树. 解法:既然是二叉搜索树,也就是说左子树所有节点都小于根,右子树所有节点都大于根.如果你真的全都检查的话,那就做了很多重 ...

  3. 程序员必备PC维修法（软件篇）

    学会使用专业软件检测与修复电脑硬件故障问题也是程序员的一种软技能. windows篇 情景:如何获取电脑硬件的真实信息.(如何检验选购回来的硬件是否正品) 自检:使用AIDA64软件检查电脑硬件,能详 ...

  4. PC Server远程管理卡用户管理脚本实现

    1.IPMI工作原理图: 2.脚本实现流程图: 3.适配服务器机型: 4.演示效果: 5.实现代码: #!/usr/bin/env bash # Author : JACK ZHAO # Date : ...

  5. 01--是时候让我们谈谈一致性hash了

    --------------------- 假如你有图中三个盒子,我们有代号为 1,4,5,12 这四样东西 那根据代号作为主键,将东西放到盒子了,该如何放置? 我们可以对代号取模 1 mod 3 = ...

  6. 孤荷凌寒自学python第三十六天文件内容的迭代操作

     孤荷凌寒自学python第三十六天python的文件操作对文件内容的迭代操作 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 一.os模块的其它文件操作方法补充 1 os.remove(文件 ...

  7. Linux 查看当前日期和时间

    一.查看和修改Linux的时区 1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区 方法 A 命令 : "tzselect" ...

  8. eclipse 运行错误：在类XXX中找不到 main 方法, 请将 main 方法定义为: public static void main(String[] args) 否则 JavaFX 应用程序类必须扩展javafx.application.Application

    新建了一个类Hello: 代码: 第一次运行报错: 点击关闭该类的界面时出现: 点击是,然后再次打开,可以正确执行,结果为: 这是为什么....,后来发现了原因:是每次运行或调试前没有自动保存编辑的内 ...

  9. Android 热更新是如何实现的？

    Android开发中,我们常常遇到热更新这个概念,而这个热更新具体是怎么实现的呢?今天在网上看到一个大神分享的热更新相关实现原理和实现代码,感觉灰常不错,分享给广大码农盆友look look . Cl ...

  10. 股神小D [点分治 or LCT]

    题面 思路 点分治非常$naive$,不讲了,基本思路就是记录路径最小最大值.....然后没了 重点讲一下LCT的做法(好写不卡常)(点分一堆人被卡到飞起hhhh) 首先,这个路径限制由边限制决定,而 ...