这是我的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. Java虚拟机（三）垃圾标记算法与Java对象的生命周期

    前言 这一节我们来简单的介绍垃圾收集器,并学习垃圾标记的算法:引用计数算法和根搜索算法,为了更好的理解根搜索算法,会在文章的最后介绍Java对象在虚拟机中的生命周期. 1.垃圾收集器概述 垃圾收集器( ...

  2. 2.Hibernate的主配置文件hibernate.cfg.xml

    1.配置 Hibernate 需要事先知道在哪里找到映射信息,这些映射信息定义了 Java 类怎样关联到数据库表.Hibernate 也需要一套相关数据库和其它相关参数的配置设置.所有这些信息通常是作 ...

  3. tomcat catalina.out日志切割（logrotate）

    简单说明: 1,因为tomcat日志会一直往catalina.out里面输出,所以回到值catalina.out非常大,占用磁盘空间 2,日志非常大,查看日志就需要很长时间. 3,据说catalina ...

  4. ndk的注意事项

    从开源网站下载的源码,需要自己编译c源码成so类库.当时用Android studio 运行总是报错"finished with non-zero exit value 2"报错定 ...

  5. UNIX高级环境编程（10）进程控制（Process Control）- 竞态条件，exec函数，解释器文件和system函数

    本篇主要介绍一下几个内容: 竞态条件(race condition) exec系函数 解释器文件    1 竞态条件(Race Condition) 竞态条件:当多个进程共同操作一个数据,并且结果依赖 ...

  6. PXE 和 计算机网络启动

    1. 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网 ...

  7. sql注入--基础

    什么是sql注入: 利用SQL语句 在外部 对数据库进行 查询,更新等 动作 sql注入的原理: 输入值可控且带入数据库执行(前提) 接受的变量传值未进行过滤(实质) sql注入的目的: 获取数据(网 ...

  8. 028、HTML 标签2超链接，框架标签

    内容:超链接,框架标签############################################################## <!-- 超链接 --> <a h ...

  9. 【转】IE内嵌google chrome frame解决浏览器兼容问题

    参考文献: http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的heade ...

  10. 欢迎来到Curl的世界

    一.Curl 简介 curl命令是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是 综合传输工具,但按传统,习惯称curl为下载工具.作为一款强力工具,curl支持包括H ...