这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。

!官方文档：https://cn.vuejs.org/v2/guide/

01. vue 介绍

<html>

<head>

    <meta charset="utf-8"/>

    <title>vue 介绍</title>

    <!-- <script src="js/vue.min.js"></script> -->

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <!-- 官方文档：https://cn.vuejs.org/v2/guide/ -->

    <!-- 绑定 -->

    <div id="app">

      <!-- ①声明式渲染 -->

      <p>{{ info }}</p>

      <p v-text="info"></p>

      <p v-html="info"></p>

      <p v-once>{{ info }}</p>

      <p>{{ info }}</p>

      <p>{{ info.concat("!!!") }}</p>

      <p>{{ info ? "has info" : "no info" }}</p>

      <!-- <p>{{ var info2 = "info2" }}</p> -->

      <!-- <p>{{ if (info) {return "info2"} }}</p> -->

      <!-- ②绑定元素特性 -->

      <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

      <!-- ③条件：控制切换一个元素是否显示 -->

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

      <!-- ④循环：绑定数组的数据来渲染一个项目列表 -->

      <ol>

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

          {{ todo.text }}

        </li>

      </ol>

      <!-- ⑤处理用户输入 -->

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

      </br>

      <!-- ⑥表单输入和应用状态之间的双向绑定 -->

      <input v-model="info">

      <!-- ⑦使用组件 -->

      <ol>

        <todo-item

          v-for="item in groceryList"

          v-bind:todo="item"

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

        </todo-item>

      </ol>

      <!-- ①②③④⑤⑥⑦⑧⑨⑩ -->

    </div>

    <!-- 数据 -->

    <script>

    var data = {

        info : "Hello world", // ①⑥

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

        seen: true, // ③

        todos: [ // ④

          { text: '学习 JavaScript' },

          { text: '学习 Vue' },

          { text: '整个牛项目' }

        ],

        groceryList: [ // ⑦

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

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

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

        ]

    }

    // 注册组件（全局）// ⑦

    Vue.component('todo-item', {

      props: ['todo'],

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

    })

    // 创建根实例

    var vm = new Vue({

      el: '#app',

      data: data,

      methods: {

        reverseMessage: function () { // ⑤

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

        }

      }

    })

    </script>

</body>

</html>

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍的更多相关文章

  1. Vue2.0 官方文档学习笔记

    VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...

  2. pm2 官方文档 学习笔记

    一.安装 1.安装 npm install pm2 -g 2.更新 npm install pm2 -g && pm2 update pm2 update 是为了刷新 PM2 的守护进 ...

  3. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  4. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  5. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  6. MySQL8.0官方文档学习

    InnoDB架构 下面的架构里只挑选了部分内容进行学习 内存架构(In-Memory Structures) Buffer Pool Buffer Pool是内存中的一块区域,InnoDB访问表和索引 ...

  7. Less 官方文档学习笔记

    LESS 是css的一种扩展,它的编辑器是基于node.js 的less.js,将less文件编译成css文件(可压缩). 其中的概念: 变量:定义变量来代替某个值,只能编译一次,本质是“常量”.例如 ...

  8. Spring Framework 官方文档学习（一）介绍

    http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#overview-maven-bom ...

  9. Spark监控官方文档学习笔记

    任务的监控和使用 有几种方式监控spark应用:Web UI,指标和外部方法 Web接口 每个SparkContext都会启动一个web UI,默认是4040端口,用来展示一些信息: 一系列调度的st ...

随机推荐

  1. gradle中的compileSdkVersion和buildToolsVersion

    CompileSdkVersion:编译版本,就是运行这个项目需要的SDK,即API Level. buildToolsVerson:是构建工具的版本,构建工具包括了打包工具aapt.dx等等. 注意 ...

  2. 使用 Azure Active Directory 管理 Azure 中的 HPC Pack 群集

    Microsoft HPC Pack 2016 支持在 Azure 中部署 HPC Pack 群集的管理员将其与 Azure Active Directory (Azure AD) 集成. 请按照本文 ...

  3. sql server中quotename()函数的用法（转载）

    操作sql server尤其是写存储过程时,要用到各种各样的函数,今天就总结一个quotename()的用法.1.语法: quotename('character_string'[,'quote_ch ...

  4. MariaDB实现主从配置及读写分离(一)

    一.主从复制方案 1.  在两台CentOS7虚拟机上分别部署MariaDB, 主数据库服务器IP为192.168.17.235, 从服务器IP为192.168.17.238. 从服务器通过调取主服务 ...

  5. webservice安全性浅谈

    原文地址:http://www.cnblogs.com/chhuic/archive/2009/11/19/1606109.html 做项目时,经常会用到WebService来通讯,但WebServi ...

  6. git命令：全局设置用户名邮箱配置

    1.查看git配置信息 git config --list 2.查看git用户名 git config user.name 3.查看邮箱配置 git config user.email 4.全局配置用 ...

  7. MySQL面试之说明myisam和innodb两种存储引擎的不同之处

    1.事务的支持不同(innodb支持事务,myisam不支持事务) 2.锁粒度(innodb行锁应用,myisam表锁) 3.存储空间(innodb既缓存索引文件又缓存数据文件,myisam只能缓存索 ...

  8. 【Alpha】团队项目测试报告与用户反馈

    测试报告 一 . WEB端测试 测试页面 测试功能/界面 功能/界面简述 测试预期效果 测试目的 是否完成(Y/N) Internet Explorer Google chrome Firefox S ...

  9. leetcode 6. ZigZag Conversion [java]

    自己写的: if(numRows == 1) return s; int ll = s.length() / 2 + 1; Character tc[] = new Character[numRows ...

  10. MySql详解（五）

    MySql详解(五) MySql库的管理 一.创建库 create database [if not exists] 库名[ character set 字符集名]; 二.修改库 alter data ...