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图像系统框架-理解X11与Qt的层次结构

    转:http://blog.csdn.net/kjfureone/article/details/52848550 1. 前言 图形子系统是linux系统中比较复杂的子系统之一:对下,它要管理形态各异 ...

  2. awk的输出格式控制：print 和printf

    1.两个函数和若干个内部变量控制awk的输出格式: 两个函数:print和printf 内部变量:OFS:输出的列间隔符,默认为tab;  ORS:输出的行间隔符,默认为\n printf更加自由化, ...

  3. 5.4WEB服务器、应用程序服务器、HTTP服务器区别

    WEB服务器.应用程序服务器.HTTP服务器有何区别?IIS.Apache.Tomcat.Weblogic.WebSphere都各属于哪种服务器,这些问题困惑了很久,今天终于梳理清楚了:   Web服 ...

  4. freemarker空值的处理

    FreeMarker的变量必须赋值,否则就会抛出异常.而对于FreeMarker来说,null值和不存在的变量是完全一样的,因为FreeMarker无法理解null值.FreeMarker提供两个运算 ...

  5. sql server deadlock problem

    https://www.red-gate.com/simple-talk/sql/learn-sql-server/how-to-track-down-deadlocks-using-sql-serv ...

  6. 【codevs1028】花店橱窗布置（费用流）

    这几天刚学了费用流,找到了这道题来练一练手. 题目: 题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整数)表示每束花放入每个花瓶所产生的美学 ...

  7. html div 加边框样式

    边框虚线样式:dashed边框实现样式:solid border:1px dashed #000代表设置对象边框宽度为1px黑色虚线边框 border:1px solid #000代表设置对象边框宽度 ...

  8. python练习_sed替换

    python练习_sed替换 需求: 做一个sed替换小程序,实现在windows下可以与实现linux中sed替换的功能 支持正则(re模块) 以下代码实现的功能与思路: 功能: (1)支持文件内容 ...

  9. 修改SpringBoot 默认的小叶子图标

    Springboot 项目,在浏览器中访问时,浏览器上导航栏的图标是一片绿色的叶子,我们可以修改它. 将格式为.ico的图片放入以下任一项目文件夹即可.但,图片命名必须为favicon.ico 1.类 ...

  10. wab框架

    http协议 一.http简介        1.HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等).       2.HTTP是一个属于应用层的面向对象的协 ...