1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script src="vue.js" charset="utf-8"></script>
  7.   </head>
  8.   <body>
  10.     <div id="app">
  11.       {{ message }}
  12.     </div>
  14.     <div id="app-2">
  15.       <span v-bind:title="message">
  16.         鼠标悬停几秒钟查看此处动态绑定的提示信息!
  17.       </span>
  18.     </div>
  20.     <div id="app-3">
  21.       <p v-if="seen">现在你看到我了</p>
  22.     </div>
  24.     <div id="app-4">
  25.       <ol>
  26.         <li v-for="todo in todos">
  27.           {{ todo.text }}
  28.         </li>
  29.       </ol>
  30.     </div>
  32.     <div id="app-5">
  33.       <p>{{ message }}</p>
  34.       <button v-on:click="reverseMessage">逆转消息</button>
  35.     </div>
  37.     <div id="app-6">
  38.       <p>{{ message }}</p>
  39.       <input v-model="message">
  40.     </div>
  42.     <div id="app-7">
  43.       <ol>
  44.         <todo-item
  45.           v-for="item in groceryList"
  46.           v-bind:todo="item"
  47.           v-bind:key="item.id">
  48.         </todo-item>
  49.       </ol>
  50.     </div>
  52.     <script type="text/javascript">
  53.       var app = new Vue({
  54.         el: '#app',
  55.         data: {
  56.           message: 'Hello Vue.js!'
  57.         }
  58.       })
  59.     </script>
  60.     <script type="text/javascript">
  61.       var app2 = new Vue({
  62.         el: '#app-2',
  63.         data: {
  64.           message: '页面加载于' + new Date().toLocaleString()
  65.         }
  66.       })
  67.     </script>
  68.     <script type="text/javascript">
  69.       var app3 = new Vue({
  70.         el: '#app-3',
  71.         data: {
  72.           seen: true
  73.         }
  74.       })
  75.     </script>
  76.     <script type="text/javascript">
  77.       var app4 = new Vue({
  78.         el: '#app-4',
  79.         data: {
  80.           todos : [
  81.             {text: '学习 JavaScript'},
  82.             {text: '学习 Vue'},
  83.             {text: '毕业了'}
  84.           ]
  85.         }
  86.       })
  87.     </script>
  88.     <script type="text/javascript">
  89.       var app5 = new Vue({
  90.         el: '#app-5',
  91.         data: {
  92.           message: 'Hello Vue.js!'
  93.         },
  94.         methods: {
  95.           reverseMessage: function() {
  96.             this.message = this.message.split('').reverse().join('')
  97.           }
  98.         }
  99.       })
  100.     </script>
  101.     <script type="text/javascript">
  102.       var app6 = new Vue({
  103.         el: '#app-6',
  104.         data: {
  105.           message: 'Hello Vue!'
  106.         }
  107.       })
  108.     </script>
  109.     <script type="text/javascript">
  110.       Vue.component('todo-item', {
  111.         props: ['todo'],
  112.         template: '<li>{{ todo.text }}</li>'
  113.       })
  114.       var app7 = new Vue({
  115.         el: '#app-7',
  116.         data: {
  117.           groceryList: [
  118.             {id: 0, text: '蔬菜'},
  119.             {id: 1, text: '奶酪'},
  120.             {id: 2, text: '随便其它什么人吃的东西'}
  121.           ]
  122.         }
  123.       })
  124.     </script>
  125.   </body>
  126. </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. sublime text 3搭建python

    1.ST3下载地址: http://www.sublimetext.com/3 2.安装Sublime Text Build 3114 Setup.exe应用程序. 3.ST3的工具优点就是轻量级,简 ...

  2. Python:从入门到实践--第八章-函数-练习

    #.消息:编写一个名为display_message()的函数,它打印一个句子,指出你在本章学的是什么. #调用这个函数,确认显示的消息无误 def display_message(name): pr ...

  3. JS如何充分“压榨”浏览器

    不同浏览器厂商实现的 JS 标准有所不同,这意味着 window 对象和可用的 api 也有所不同,希望不久的将来,所有浏览器都能实现统一的 JS 标准. 自己写 api 是很耗费时间跟精力的,而且变 ...

  4. systemd的新特性及unit常见类型分析与awk用法示列

    简述systemd的新特性及unit常见类型分析,能够实现编译安装的如nginx\apache实现通过systemd来管理 系统引导的新特性 系统引导时实现服务启动: 按需激活进程: 系统状态快照: ...

  5. day01知识点

    1.计算机基础 2.Python的历史 3.编码语言分类     Python是一门动态解释性的强制类型定义语言 4.Python的解释器种类 5.变量     法律规则:字母,数字,下划线(数字不能 ...

  6. 前端基础：web语义化

    web语义化 一.什么是web语义化? web语义化包含两方面,一是html标签语义化,简单来说就是要用合适的标签来表述适当的内容,标题用<h1>~~<h6>标签,段落用< ...

  7. 压力测试：系统吞吐量、TPS（QPS）、用户并发量、性能测试概念和公式

    PS:下面是性能测试的主要概念和计算公式,记录下: 一．系统吞度量要素: 一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高, ...

  8. php获取数组最后一个值

    $array = array(1,2,3,4,5);

  9. layui select配合input实现动态模糊搜索

    功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...

  10. http摘要认证

    摘要认证步骤:      1. 客户端访问一个受http摘要认证保护的资源.      2. 服务器返回401状态以及nonce等信息,要求客户端进行认证. HTTP/1.1 401 Unauthor ...