<!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. 如何通过java反射的方式对java私有方法进行单元测试

    待测试的私有方法: import org.testng.Assert;import org.testng.annotations.BeforeClass;import org.testng.annot ...

  2. RobotFramework下的http接口自动化Get Response header 关键字的使用

    Get Response header 关键字用来获取http请求返回的http响应头部数据. 常见的Response Header: Header 解释 示例 Accept-Ranges 表明服务器 ...

  3. 用Python来找合适的妹子

    时间真的有点仓促,匆匆忙忙撸完这篇文章. 虽然今天是情人节,但还是要关心一下单身狗们,帮助他们俩脱单. 古人云:知己知彼,百战不殆.  好好去了解一下妹子们的内心想法,早日脱单! 这次我在一个某知名婚 ...

  4. java继承方法规则或规律

    方法的继承与属性的继承有很大的不同,属性任何继承方式均可,而方法则有各种限制,于是在这里做了一个简单的总结: 1.修饰符相同的方法覆盖,即只改内部,不改外部 2.访问权限不同的方法覆盖,子类只能相对父 ...

  5. iOS学习——自动定位

    最近在项目中需要做自动定位功能,就是你在参加会议通过扫描二维码签到的时候自动定位并将你的定位信息在签到中上传,这样可以避免我们进行假签到.在这个功能中,主要用到的是系统自带的定位模块,首先我们是需要配 ...

  6. 【BZOJ1257】余数之和（数论分块，暴力）

    [BZOJ1257]余数之和(数论分块,暴力) 题解 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的 ...

  7. Mac下安装FFmpeg教程

    一.安装ffmpeg 分为两种安装方式: 1. 命令行安装 brew install ffmpeg 2. 下载压缩包安装 去 http://evermeet.cx/ffmpeg/ 下载7z压缩包,解压 ...

  8. css学习の第二弹—文字格式化排版

    1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...

  9. 为hadoop集群设置静态IP

    -更新2017年3月1日19:38:49-- 以下是Nat 网络设置,如果你想要同一局域网内的主机可以远程连接上你的集群环境,建议使用桥接模式,具体原因可看文末三种网络连接模式的区别. 由于之前设置集 ...

  10. Eslint报错整理与解决方法（持续整理）

    1.'Unexpected tab character' 字面意思理解呢就是意想不到的制表符,当时出现的时候就是我习惯的使用Tab键去打空格,但是eslint默认不认可Tab,所以解决方法很简单: 在 ...