<!DOCTYPE html>

<html>

<head>

    <title>xxx</title>

</head>

<body>

<div id="app">

  {{ message }}

</div>

<div id="app-2">

  <span v-bind:title="message">

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

  </span>

</div>

<div id="app-3">

  <p v-if="seen">现在你看到我了</p>

</div>

<div id="app-4">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

<div id="app-5">

  <p>{{ message }}</p>

  <button v-on:click="reverseMessage">逆转消息</button>

</div>

<div id="app-6">

  <p>{{ message }}</p>

  <input v-model="message">

</div>

<div id="app-7">

  <ol>

    <!--

      现在我们为每个 todo-item 提供 todo 对象

      todo 对象是变量，即其内容可以是动态的。

      我们也需要为每个组件提供一个“key”，稍后再

      作详细解释。

    -->

    <todo-item

      v-for="item in groceryList"

      v-bind:todo="item"

      v-bind:key="item.id">

    </todo-item>

  </ol>

</div>

<div id="watch-example">

  <p>

    Ask a yes/no question:

    <input v-model="question">

  </p>

  <p>{{ answer }}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->

<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

<script type="text/javascript">

    var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

var app2 = new Vue({

  el: '#app-2',

  data: {

    message: '页面加载于 ' + new Date().toLocaleString()

  }

})

var app3 = new Vue({

  el: '#app-3',

  data: {

    seen: true

  }

})

var app4 = new Vue({

  el: '#app-4',

  data: {

    todos: [

      { text: '学习 JavaScript' },

      { text: '学习 Vue' },

      { text: '整个牛项目' }

    ]

  }

})

var app5 = new Vue({

  el: '#app-5',

  data: {

    message: 'Hello Vue.js!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('')

    }

  }

})

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

Vue.component('todo-item', {

  props: ['todo'],

  template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

  el: '#app-7',

  data: {

    groceryList: [

      { id: 0, text: '蔬菜' },

      { id: 1, text: '奶酪' },

      { id: 2, text: '随便其它什么人吃的东西' }

    ]

  }

})

var watchExampleVM = new Vue({

  el: '#watch-example',

  data: {

    question: '',

    answer: '你问问题我才会给你答案!'

  },

  watch: {

    // 如果 `question` 发生改变，这个函数就会运行

    question: function (newQuestion, oldQuestion) {

      this.answer = '等你停止输入...'

      this.getAnswer()

    }

  },

  methods: {

    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。

    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率

    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于

    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，

    // 请参考：https://lodash.com/docs#debounce

    getAnswer: _.debounce(

      function () {

        if (this.question.indexOf('?') === -1) {

          this.answer = '问题通常需要一个问号. ;-)'

          return

        }

        this.answer = '思考中...'

        var vm = this

        axios.get('https://yesno.wtf/api')

          .then(function (response) {

            vm.answer = _.capitalize(response.data.answer)

          })

          .catch(function (error) {

            vm.answer = '错误! 不能连接到API. ' + error

          })

      },

      // 这是我们为判定用户停止输入等待的毫秒数

      500

    )

  }

})

</script>

</body>

</html>

Vue.js学习的更多相关文章

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

    vue中vue-router的使用:

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

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

  3. vue.js学习资料

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

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

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

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

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

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

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

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

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

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

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

  9. Vue.js学习-组件注册与使用

    Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...

  10. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

随机推荐

  1. C#图解教程 第十一章 枚举

    枚举 枚举 设置底层类型和显式值隐式成员编号 位标志 Flags特性使用位标志的示例 关于枚举的补充 枚举 枚举 枚举是由程序员定义的类型与类或结构一样. 与结构一样,枚举是值类型,因此直接存储它们的 ...

  2. as版本切换导致项目损坏，无法启动。环境依赖混乱

    以下方法都不管用, 新建一个项目setting的 把main拷过去就行了!!!! Error:(5, 0) Gradle DSL method not found: 'google()'Possibl ...

  3. Jmeter_针对响应信息不明确的接口做关联

    下午写一个新功能的接口脚本,遇到几个技术问题,现在将解决方案写出来 1:做接口关联的时候,发现接口响应没有可以利用的信息.如下图只返回了一个成功的标识,这样的接口如何与之关联? 通过抓包观察后续的修改 ...

  4. 【Tyvj 1728】普通平衡树

    题面 Description 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(若有多个相同的数,因输 ...

  5. Vue-路由配置和使用步骤整理

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  6. css块级元素和内联元素

    左边的是块级元素block,右边内联inline. 修改方法 display: inline;

  7. oracle使用中的一些问题

    一.设置自增主键(假设表的主键名为:company_id) 1)创建序列(company_autoinc): maxvalue start increment nocache; 2)创建触发器(com ...

  8. JMockit常用操作

    JMockit常用操作 2017-11-30 转自:http://blog.csdn.net/foreverling/article/details/51234149 目录 1 基本概念  1.1 常 ...

  9. Java NIO FileVisitor 高效删除文件

    在公司项目中,由于做个二维码扫码平台项目,预计每天产生的二维码图片达到十几G,所以要做个定时清理任务来定时清理图片,根据不同场景保留图片,规则是:1.二维码统一登录图片几个小时有效   2.电子名片二 ...

  10. Vim修炼秘籍之语法篇

    前言 少年,我看你骨骼精奇,是万中无一的武学奇才,维护世界和平就靠你了,我这有本秘籍<Vim修炼秘籍>,见与你有缘,就十块卖给你了! 如果你是一名 Vimer,那么恭喜你,你的 Vim 技 ...