这是我的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. 【python】python中的json、字典dict

    定义 python中,json和dict非常类似,都是key-value的形式,而且json.dict也可以非常方便的通过dumps.loads互转.既然都是key-value格式,为啥还需要进行格式 ...

  2. iis 发布asp.net mvc 网站时候js css 压缩问题，图片不加载问题

    一.JS CSS 自动压缩问题 默认情况下mvc这个框架会把css,js文件压缩成一个js或者css文件,一会发现只有一个<link href="/Content/css?v=ji3n ...

  3. KB和KiB的区别

    差别是KB等单位以10为底数的指数,KiB是以2为底数的指数. K 与 Ki 分别表示 kilo-(千) 与 kibi-(二进制千) .作为前缀使用时, k 表示 1,000,Ki 表示1,024. ...

  4. Qt分页导航控件

    最近在使用QTableWidget时,因为结果数量比较多而且又有单元格控件,为了改善效率要做分页处理.在网上找了一番,最后在http://www.cppblog.com/biao/archive/20 ...

  5. mysql host'XXX' is not allowed to connect to this mysql server

    错误的原因一般是没有添加 IP可远程的权限. 首先以 root 帐户登陆 MySQL 1.在 Windows 主机中点击开始菜单,运行,输入“cmd”,进入控制台,然后cd 进入MySQL 的 bin ...

  6. 阿里八八Alpha阶段Scrum(10/12)

    今日进度 叶文滔: 正在解决日程模块合并至主项目的问题 俞鋆: 完成了上传和下载头像的api,完善了登陆和注册的api 李嘉群: 正在尝试json文件的转化和发送请求 黄梅玲: 学习json数据解析和 ...

  7. svn: 无法连接主机“127.0.0.1”: 拒绝连接

    尝试搭建SVN服务器,前面的步骤都OK,服务已经启动, svnserve -d --listen-port 80 --listen-host 0.0.0.0 -r /data/nerrissa/svn ...

  8. 在react中使用intro.js的的一些经验

    react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇 ...

  9. 在HTML中使用object和embed标签插入视频

    object标签和embed标签都能给页面添加多媒体内容: 一.object 对于object,w3c上定义object为一个嵌入的对象.可以使用此元素向您的 XHTML 页面添加多媒体.此元素允许您 ...

  10. Kafka学习之路 （三）Kafka的高可用

    一.高可用的由来 1.1 为何需要Replication 在Kafka在0.8以前的版本中,是没有Replication的,一旦某一个Broker宕机,则其上所有的Partition数据都不可被消费, ...