Vue.js是一套构建用户界面的渐进式框架。采用自底向上增量开发的设计。Vue的核心值关注视图层非常容易与其他库和已有的项目整合。另外,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

Vue.js的目标是通过尽可能简单地API实现响应式数据绑定和组合的视图组件。

声明式渲染

vue的核心是允许你使用简单地模板语法来声明式的将数据渲染进DOM的系统   demo:

<div id="app">

<div>{{msg1}}</div>

</div>
var app=new Vue(function(){
    el:"#app",
    data:{
      msg1:"this is my first vueMsg",
      items:[1,2,3,4,5,6,7,8,9,10],
      methods:{
        veverseMessage:function(){
          this.msg1=this.msg1.split("").reverse().join(" ")
        }
      }
    }
  })

除了绑定插入的文本内容,我们还可以采用这样的额方法绑定DOM元素的属性:

在id 为app的DOM元素中添加

<div v-bind:title="msg1">hove your mouse for a few seconds to see the bound title!</div>

v-bind:title="msg1"

这个指令的简单含义就是:将这个元素节点的title属性和Vue实例的msg1属性绑定在一起

条件与循环

<ul>
  <li v-for="item in items">{{item}}</li>
</ul>

处理用户输入

为了让用户和你的应用进行互动,我们可以使用v-on指令绑定一个监听事件用于调用我们Vue实例中定义的方法

<button v-on:click="veverseMessage()"></button>

vue页提供了v-model指令,它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

<input type='text" v-model="msg1">
<div>{{msg1}}</div>

用组件构建应用

组件系统是Vue的另外一个重要的概念,因为它提供了一种抽象,让我们用独立可复用的小组件构建大型应用。如果我们考虑到这点,几乎任意类型的

应用的界面都可以抽象为一个组件树:

在Vue里,一个组件实质上是一个个拥有预定义选项的一个Vue实例:

Vue.component("item-todo",{

template:"<div>this is my first vue component template</div>"

})

现在我们可以在另一个组件模板中写入它:

<item-todo></item-todo>

但是这样会为每一个item-todo渲染同样的文本,我们应该将数据从父作用域传到子组件,让我们来修改一下组件的定义,使得它能够接受一个prop字段:

这样我们就可以使用v-bind指令将todo传到每一个重复的组件中

<ul>
  <item3 v-for="item in itms" v-bind:todo="item"></item3>
</ul>

子元素通过props接口实现了与父元素很好的解耦。我们现在可以在不影响父应用的基础上,进一步为我们的todo组件改进更多复杂的模板和逻辑。

与自定义元素之间的关系

你可能已经注意到Vue.js组件类似于自定义元素-----它是web组件规范的一部分。实际上Vue.js的组件语法参考了该规范,不同:

1 web组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js的组件不需要任何补丁,并且在所有的浏览器中(ie9以及更高版本)之下表现一致,必要时,Vue.js组件也可以放在原生自定义元素之内。

2 Vue.js组件提供了原生自定义元素所不具备的一些重要功能。比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。

来自:http://cn.vuejs.org/v2/guide/class-and-style.html

vue 简介的更多相关文章

  1. vue简介、入门、模板语法

    在菜鸟教程上面学习的vue.js.同时结合vue中文文档网站,便于自己记录. vueAPI网站:API 1. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框 ...

  2. 01 . Vue简介,原理,环境安装

    简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...

  3. vue简介

    vue的介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. vue的优点 1.易用 ...

  4. Vue简介以及基本使用

    Vue 是一套构建用户界面的渐进式 框架 框架和库? 框架(基于自身的特点向用户提供一套完整的解决方案,控制权在框架本身,需要使用者按照框架所规定的某种规范进行开发) Vue Angular Reac ...

  5. vue 简介 vue 项目 组件

    1. 概念 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.能够为复杂的单页应用提供驱动. 2. 用法 2.1 声明式渲染 2.1.1 改变文本     {{ m ...

  6. vue简介,插值表达式,过滤器

    目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...

  7. Vue简介与基础

    一.什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于 ...

  8. Vue简介-MVVM是什么?

    Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

  9. Vue --- 基础简介

    目录 Vue简介 1.什么是Vue 2.为什么要学习Vue 3.special -- 特点 4.如何使用vue Vue使用 1.如何使用vue 2.插值表达式 3.文本指令 4.事件指令 5.属性指令 ...

随机推荐

  1. Buffer.alloc()

    Buffer.alloc(size[, fill[, encoding]]) Node.js FS模块方法速查 size {Number} fill {Value} 默认:undefined enco ...

  2. selenium的三种等待

    1. 强制等待 最简单粗暴,sleep(xx),不管你浏览器是否加载完了,程序都得等待xx秒,时间一到,再继续执行下面的代码,作为调试很有用,有时候也可以在代码里这样等待,不过不建议总用这种等待方式, ...

  3. 32道常见的Java基础面试题

    1. 什么是 Java 虚拟机(JVM)?为什么 Java 被称作是“平台无关的编程语言”? Java 虚拟机是一个可以执行 Java 字节码的虚拟机进程.Java 源文件被编译成能被 Java 虚拟 ...

  4. 全文搜索(AC-1)-互联网信息过载问题

    什么是信息过载? 信息检索技术是什么? 信息过滤技术是什么?

  5. Codeforces Round #352 (Div. 2),A题与B题题解代码,水过~~

    ->点击<- A. Summer Camp time limit per test 1 second memory limit per test 256 megabytes input s ...

  6. bzoj 3173 [Tjoi2013]最长上升子序列 (treap模拟+lis)

    [Tjoi2013]最长上升子序列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2213  Solved: 1119[Submit][Status] ...

  7. 【small项目】MySQL第二天早上第一次连接超时报错,解决方法com.mysql.jdbc.exceptions.jdbc4.CommunicationsException:

    MySQL第二天早上第一次连接超时报错,解决方法com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link ...

  8. Visual C++ 网络编程 笔记

    第一章 网络分层模型 OSI模型应用层:服务于应用程序的协议,比如用于域名解析的DNS协议,用于下载界面内容的HTTP协议表示层:处理不同硬件和操作系统之间的差异,确保应用层之间顺利通信 and 加密 ...

  9. MongoDB小结12 - update【多文档更新】

    当一次更新一个文档无法满足我们的脚步时,我们可以选择一次更新多个文档,及在update的第四个参数的位置添上true,及做多文档更新,建议就算不做多文档更新也显式的在第四个参数上置false,这样明确 ...

  10. 通过ambari安装hadoop集群

    转载:http://www.cnblogs.com/cenyuhai/p/3295635.html 整个过程走完,问题不大,不过有一个事情要注意的是就算创建数据库的,使用localhost会报错,要使 ...