这是我的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. AndroidGradle最实用的指南

    AndroidStudio目前已经成为Android开发人员的主流工具,而Gradle的原理,配置,使用仍然是很多android开发人员感到困惑的地方.网上虽然有很多相关文档,但是要么是只会用但是不知 ...

  2. java 使用 引用数据类型（以Scanner、Random模块为例）

    创建一个新变量 类型 变量名 = new 类型() 举个例子: Scanner sc = new Scaner() 使用引用数据类型中的功能: 变量.功能名字() Scanner类:接受键盘输入 1. ...

  3. c#创建文件( File.Create() )后对文件写操作出错的分析

    在C#中,使用system.IO.File.Create()创建完一个文件之后,如果需要对这个文件进行写操作,会出现错误,提示你“这个文件正在被使用”. 原因是System.IO.File.Creat ...

  4. MySQL分析函数实现

    | MySQL分析函数实现还好MySQL8.0已经实现了与Oracle相同的分析函数. 1. 实现rownumSET @rn:=0;SELECT @rn:=@rn+1 AS rownum ,e.* F ...

  5. pt-osc原理、限制、及与原生online-ddl比较

    1. pt-osc工作过程 创建一个和要执行 alter 操作的表一样的新的空表结构(是alter之前的结构) 在新表执行alter table 语句(速度应该很快) 在原表中创建触发器3个触发器分别 ...

  6. 【未完成】[Spark SQL_2] 在 IDEA 中编写 Spark SQL 程序

    0. 说明 在 IDEA 中编写 Spark SQL 程序,分别编写 Java 程序 & Scala 程序 1. 编写 Java 程序 待补充 2. 编写 Scala 程序 待补充

  7. 乘风破浪：LeetCode真题_024_Swap Nodes in Pairs

    乘风破浪:LeetCode真题_024_Swap Nodes in Pairs 一.前言 这次还是链表的操作,不过我们需要交换链表奇数和偶数位置上的节点,因此要怎么做呢? 二.Swap Nodes i ...

  8. document.getElementByClassName的兼容问题

    if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element) ...

  9. JAVA反射机制_获取字节码文件对象

    是在运行状态中,对于任意一个类 (class文件),都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调用对象的方法的功能称为java语 ...

  10. 洛谷 P4707 【重返现世】

    题目分析 题目就是求第K种原料的出现期望时间. 考虑广义min-max容斥. \(\text{kthmax}(S)=\sum\limits_{T\subseteq S}(-1)^{|T|-k}\bin ...