<!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. adb+monkey压力测试入门

    一.ADB安装步骤及ADB环境配置 1.ADB安装步骤 1)adb工具安装地址:http://www.wmzhe.com/soft-39913.html 2)下载安装包后,解压,将adb安装在根目录下 ...

  2. Bartender标签传参与打印

    在VS中添加bartender的COM组件引用后(一定要添加,否则会提示找不到BarTender.Application): /// <summary> /// Bartender模板打印 ...

  3. 前端上传图片回显并用base64编码，后端做解码储存，存储图片路径在.properties文件中配置（以上传身份证照片为例）

    前端页面:<form id="kycForm" enctype="multipart/form-data"> <input type=&quo ...

  4. day11.1函数进阶 列表集合 字典中的函数变量，函数作为形参

    函数进阶 1.函数作为变量 a=123 name="gao" nums=[1,2,3] data=nums#指向同一个内存地址 #查看内存地址篇章 def func(): prin ...

  5. 寒假作业 pta编程总结3

    实验代码: 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕 ...

  6. 2018-2019-2 20165313 《网络对抗技术》 Exp5：MSF基础应用

    实践使用漏洞和辅助模块 任务一:MS17-010安全漏洞 任务二:(1)MS11-050(失败)(2)MS14-064(唯一) 任务三:abode_flash_avm2 辅助模块:(1)ARP扫描模块 ...

  7. linux下禁用网卡的启用网卡的一些方法

    第一种方法: 这种方法主要是在不重启的情况下会一直生效,适用于服务器. #禁用网卡eth0 sudo ifconfig eth0 down #启用网卡eth0 sudo ifconfig eth0 u ...

  8. 1. Packet sniffers （包嗅探器 14个）

    十多年来,Nmap项目一直在编目网络安全社区最喜爱的工具. 2011年,该网站变得更加动态,提供打分,评论,搜索,排序和新工具建议表单. 本网站除了我们维护的那些工具(如Nmap安全扫描器,Ncat网 ...

  9. .Net牛刀小试-1缓冲使用

    根据文件名缓冲文件: /// <summary> /// 根据文件名缓冲指定目录文件 /// </summary> public class FileCacheAdapter ...

  10. Linux----------nfs服务器的搭建及常识

    一.nfs简介 nfs(network file system)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源. nfs主要适用用linu ...