<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="vue.js" charset="utf-8"></script>

  </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

          v-for="item in groceryList"

          v-bind:todo="item"

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

        </todo-item>

      </ol>

    </div>

    <script type="text/javascript">

      var app = new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        }

      })

    </script>

    <script type="text/javascript">

      var app2 = new Vue({

        el: '#app-2',

        data: {

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

        }

      })

    </script>

    <script type="text/javascript">

      var app3 = new Vue({

        el: '#app-3',

        data: {

          seen: true

        }

      })

    </script>

    <script type="text/javascript">

      var app4 = new Vue({

        el: '#app-4',

        data: {

          todos : [

            {text: '学习 JavaScript'},

            {text: '学习 Vue'},

            {text: '毕业了'}

          ]

        }

      })

    </script>

    <script type="text/javascript">

      var app5 = new Vue({

        el: '#app-5',

        data: {

          message: 'Hello Vue.js!'

        },

        methods: {

          reverseMessage: function() {

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

          }

        }

      })

    </script>

    <script type="text/javascript">

      var app6 = new Vue({

        el: '#app-6',

        data: {

          message: 'Hello Vue!'

        }

      })

    </script>

    <script type="text/javascript">

      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: '随便其它什么人吃的东西'}

          ]

        }

      })

    </script>

  </body>

</html>

Vue 学习(1)的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  7. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  8. vue学习笔记（二）——简单的介绍以及安装

    学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  10. Vue学习2：模板语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MySQL查询操作——2

    -----------查询操作--------------------------- 查询表中的所有字段SELECT * FROM employees; 查询常量值SELECT 100;SELECT ...

  2. C++ 中用cin方式获取输入的几种常用方式

    一.前言 在C++程序的编写过程中,可能会经常用到cin方式用来捕获输入设备的输入信息.细分的话,主要的方式有:cin>>.cin.get.cin.getline.在借助键盘等字符输入设备 ...

  3. 14. Encryption tools （加密工具 8个）

    SSH(Secure Shell)现在是无处不在的程序,用于在远程机器上登录或执行命令. 它通过不安全的网络在两个不受信任的主机之间提供安全的加密通信,取代了可怕的不安全的telnet / rlogi ...

  4. cordova本地浮动框提示插件使用：cordova-plugin-x-toast

    1. 添加插件:cordova plugin add cordova-plugin-x-toast 2. 调用方法(浮动提示插件,弹出本地浮动提示框): $cordovaToast.show(mess ...

  5. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  6. cookie 就是一些字符串信息

    什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用JavaScript 来创建和取回cookie 的 ...

  7. 游戏编程模式 Game Programming Patterns (Robert Nystrom 著)

    第1篇 概述 第1章 架构,性能和游戏 (已看) 第2篇 再探设计模式 第2章 命令模式 (已看) 第3章 享元模式 (已看) 第4章 观察者模式 (已看) 第5章 原型模式 (已看) 第6章 单例模 ...

  8. 正则替换HTML里的style属性

    一个网友问: <p class="a" style="font-size: 12pt;  font-family: ""; color: red ...

  9. Flink神秘工具lib

    Flink里面有一个神坑,叫做FI坑.其实只是使用Fi的时候被暴露出来.但是,杀不死你的,终将使你更加强大. Flink集群有一个lib文件件,里面比较happy,可以放各种jar:这样,client ...

  10. DevExpress gridview获取单元格坐标(转)

    private void gridView1_RowCellClick(object sender, DevExpress.XtraGrid.Views.Grid.RowCellClickEventA ...