1:首先引入vue.js

2:点击事件

<div id='clickVue'>
  <p>{{message}}</p>
  <button v-on:click="reverseMessage">逆转文字</button>
</div>

var app = new Vue({
  el: "#clickVue",
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

在reverseMessage方法中,我们更新了应用的状态,但没有操作dom节点,所有的dom操作都由vue来处理,你只需要注意编写底层逻辑。

3:组件化应用构建

(1):在vue里,一个组件本质上是一个有用预定义选项的一个vue实例,在vue中注册组件:

vue.component('todo-item',{

  template: "<li>这是一个正在被注册的组件</li>"

})

现在你可以用它构建另一个组件模板:

<ol>

// 创建一个 todo-item 组件的实例

  <todo-item></todo-item>

</ol>

全部代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="vue.js"></script>

</head>

<body>

  <div id='componentTest'>

    <todo-item></todo-item>

  </div>

</body>

<script>

//注册模板

Vue.component('todo-item',{

  template: "<li>这是一个模板</li>"

})

var app = new Vue({

  el:'#componentTest'

})

</script>

</html>

上诉代码中:Vue.component()注册一个组件,在vue对象componentTest中,使用了这个组件。运行代码得到:

4:组件的绑定的值从父作用域获取

但是这样会为每个代办项渲染同样的文本,这样看起来并不炫酷,我们应该能将数据从父作用域传到子组件。下面修改一下组件的定义,使之能够接受一个属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
  <ol id='componentTest'>
    <todo-item v-for='item in groceryList' v-bind:todo='item'></todo-item>
  </ol>
</body>
<script>
//注册模板
Vue.component('todo-item',{
  props:['todo'],
  template: "<li>{{ todo.text }}</li>"
})
var app = new Vue({
  el:'#componentTest',
  data: {
    groceryList: [
      {
      text: '素材'
      },
      {
      text: '文章'
      },
      {
      text:'单词'
      }
    ]
  }
})
</script>
</html>

代码分析:注册的组件为todo-item,在vue对象conponentTest中引用了这一组件,v-for=' item in groceryList ',是从父作用域(componentTest)中循环取groceryList内的值,并将todo与item绑定,

这样一来 todo.text可以理解为item.text in groceryList,循环取值,每次取到的是 ‘素材’,‘文章’,‘单词’三项。

如果没有{{todo.text}} 而是{{todo}},那么得到的是

整个代码分析:

明确需求:我们需要在todo-item中动态从父作用域获取数据。

首先我们需要在componentTest中引入组件todo-item,于是 我们就在body中写了:

<todo-item></todo-item>

其次 我们需要注册组件:

Vue.componet('todo-item' , {

  template: " <li> {{ activeData }} </li> "

})

现在,我们想要组件todo-item循环显示一组动态数据,而这组数据来自其父作用域,而这个数据又是一组数组。于是,在todo-item组件中 写 v-for = item in groceryList ,此时并把todo绑定给item。

但是 我们需要将groceryList 中的数据循环显示出来,因为groceryList 的数据并不在注册的组件todo-item中,于是写了 v-for = item in groceryList 这样,从groceryList中取数据 ,我们可以通过控制台打印

可以看到 groceryList数据是在模板app中。

在注册todo-item时 我们增加其属性 props:【todo】,这个属性被组件用作了{{todo值}},在模板中 我们用v-bind: todo = item即是把item赋值给todo 那么这样一来item组件里的 {{todo.text}}就等于{{item.text}},所以 组件todo-item就从父作用域中获得到groceryList里的值。

我们已经设法将应用分割成了两个更小的单元,子单元通过props接口实现了与父单元的解耦。现在,我们进一步为todo-item组件实现更复杂的模板和逻辑的改进,而且不会影响到父单元。

我们可以想象一个大型应用中,组件的应用模板应该是什么样的

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

与自定义元素的关系

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是,还是有几个关键差别:

  1. Web 组件规范仍然处于草案阶段,并且尚无浏览器原生实现。相比之下,Vue 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue 组件也可以包装于原生自定义元素之内。

  2. Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流,自定义事件通信以及构建工具集成。

vue.js初学(一) vue的入门编程的更多相关文章

  1. Vue.js——60分钟组件快速入门(上篇)

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  2. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  3. Vue.js——60分钟组件快速入门

    一.组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HT ...

  4. 【转】Vue.js——60分钟组件快速入门(上篇)

    文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的 ...

  5. Vue.js——60分钟组件快速入门(上篇)二

    来源:https://www.cnblogs.com/keepfool/p/5625583.html 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小 ...

  6. Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

  7. Vue.js——60分钟组件快速入门(下篇)

    转自:https://www.cnblogs.com/keepfool/p/5637834.html 概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子 ...

  8. Vue.js 2 vs Vue.js 3的实现 – 云栖社区

    Vue.js 2 vs Vue.js 3的实现 – 云栖社区 vue.js核心团队已经讨论过将在Vue3实现的变化.虽然API不会改变,但是数据响应机制(译者注:对数据改变的监听和通知)发生了变化.这 ...

  9. vue.js最最最基础的入门案例

    打算自己写一点vue.js从入门到进阶的笔记,方便一些新手从头开始开发的时候,可以参考一下. 写的或许是很简单的文章,提供给新手参考.暂时都是一些入门级别的. 以后会慢慢的加深,进阶,写出一些更好,更 ...

随机推荐

  1. Linux文件系统管理 parted分区命令

    概述 parted 命令是可以在命令行直接分区和格式化的,不过 parted 交互模式才是更加常用的命令方式. parted命令 进入交互模式命令如下: [root@localhost ~]# par ...

  2. ES6 随记(3.1)-- 字符串的拓展

    上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 4. 拓展 a. 字符串的拓展 有些字符需要 4 个字节储存,比如 \uD83D\uDE80 ...

  3. mysql sql的执行顺序

    转:http://blog.csdn.net/u014044812/article/details/51004754 关于sql和MySQL的语句执行顺序(必看!!!) 原创 2016年03月29日 ...

  4. Django-Ajax基础知识

    Ajax准备知识:json 1.什么是json JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c ...

  5. windows简单使用etcd

    一.下载安装选择版本 https://github.com/coreos/etcd/releases 二.解压 三.首先开启etcd 1.进入在etcd解压的目录中 2.etcd.exe 没有erro ...

  6. 大话设计模式之PHP篇 - 策略模式

    什么是策略模式? 定义:策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它的客户而独立变化. 组成:抽象策略角色: 策略类,通常由一个接口或者抽象 ...

  7. Golang 连接Kafka

    Kafka介绍 Kafka是Apache软件基金会开发的一个开源流处理平台,由Java和Scala编写:Kafka是一种高吞吐.分布式.基于订阅发布的消息系统. Kafka名称解释 Producer: ...

  8. Go 内置库 IO interface

    基本的 IO 接口 io 包为 I/O 原语提供了基本的接口.它主要包装了这些原语的已有实现. 由于这些接口和原语以不同的实现包装了低级操作,因此除非另行通知,否则客户端不应假定它们对于并行执行是安全 ...

  9. 汽车AC键到底是干什么的?老司机告诉你

    现在很多人都会开车,想我当初学车的时候一会就可以上手了,开车简单,但是很多细节方面的就是得慢慢学习的过程,比如说汽车的AC键,我相信很多车主,包括老司机都不知道到底有哪些作用,只知道开空调,其实它的用 ...

  10. 【bzoj1876】[SDOI2009]SuperGCD(高精度)

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1876 一道简单的高精度+Stein算法(或者叫辗转相除法)求最大公约数板子题. md还 ...