这是我的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中的接口与嵌套接口

    一.接口 1. 接口简介 接口: 是java的一种抽象类型,是抽象方法的集合.接口比抽象类更加抽象的抽象类型. 接口语法: [修饰符] [abstract] interface 接口名 [extend ...

  2. innodb_file_per_table - 转换为InnoDB

    共享InnoDB / var / lib / mysql / ibdata1存储的问题InnoDB表当前将数据和索引存储到共享表空间(/ var / lib / mysql / ibdata1).由于 ...

  3. C语言中的数组与指针

    1. 数组的初始化 数组的初始化方法有很多,常用的方法有 定义时初始化 ]={,,}; 或 ]={}; //未初始化的元素全为0: 定义后遍历赋值初始化 int arr[3]; for(int i=0 ...

  4. Git如何永久删除文件(包括历史记录)

    有些时候不小心上传了一些敏感文件(例如密码), 或者不想上传的文件(没及时或忘了加到.gitignore里的), 而且上传的文件又特别大的时候, 这将导致别人clone你的代码或下载zip包的时候也必 ...

  5. Linux搭建kafka

    一.安装Java 1.查看linux 的系统版本 root@aliyun:~# uname --m x86_64 2.安装java mkdir -p /usr/local/java tar -xf j ...

  6. MySQL一个延迟案例

    突然接到报警显示MySQL主从之间延迟过大,随后尽快到集群上面看看,进行排查. 首先我们查看延迟是由什么造成的,排查一遍过后发现不是网卡和从库机器的负载,那就要从其他地方来排除了 查看binlog日志 ...

  7. Nginx的配置使用

    因为做了一个聚合支付的服务应用,对于交易系统来说,并发要求比较高,所以需要使用负载均衡来缓解并发的要求,自行开发又太费时费力,Nginx查了些资料基本满足需求,故对其做了下研究,记录下防止遗忘. 一. ...

  8. October 26th, 2017 Week 43rd Thursday

    For success, attitude is equally as important as ability. 为取得成功,态度与能力一样重要. Today I read a news about ...

  9. .Net Core Api 跨域配置

    .Net Core 和Asp.Net 不同,不需要再去引用其他的跨域组件.创建项目时,就有了. 让接口实现跨域,需要配置两个地方. 一.Startup.cs 这里需要配置两个地方 public voi ...

  10. Win10无法启动软件提示MSVCP110.dll丢失

    遇到这种问题,第一种方法可以选择去https://www.microsoft.com/zh-CN/download/details.aspx?id=30679 官网去下载 vc++ 2012 安装和自 ...