浏览目录

vue的介绍

简介

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

关于渐进式和自底向上增量开发我们来看一下知乎的回答:

vue.js的优点

1.易用

  已经会了 HTML、CSS、JavaScript?即刻阅读指南开始构建应用!

2.灵活

  不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。

3.高效

  20kB min+gzip 运行大小
      超快虚拟 DOM 
      最省心的优化

虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概况了虚拟DOM的设计思想。

() 提供一种方便的工具,使得开发效率得到保证
() 保证最小化的DOM操作,使得执行效率得到保证

虚拟dom的渲染速度要比我们真实的dom渲染速度快。

vue的使用

安装

建议大家使用<script>引入

引入vue.js文件

我们发现:引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数。

使用vue实例化对象

创建vue实例对象

<div id="app">
{{ msg }}
</div>
var app = new Vue({
el:'#app',
data:{
msg : '大家好'
}
})  

输出结果:

ok,我们已经简单的创建了第一个vue应用。渲染的数据的方式我们也叫声明式的渲染。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台 (就在这个页面打开),并修改 app.msg 的值,你将看到上例相应地更新。

在上面案例中,我们学到了,{{ }}插值的语法。

{{}}插值,不仅可以插变量,只要你能想到的插入都可以,if-else不可以啊!!!

 <p>{{2==1?'真的':'假的'}}</p>  

输出结果:

data中存储的就是我们的数据属性。Vue实例还暴露了一些有用的属性和方法,它们都有前缀 $,以便与用户定义的属性区分开来。

  

vue 之 介绍及简单使用的更多相关文章

  1. 总结Vue第一天:简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  2. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  3. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  4. 【转载】Ssh整合开发介绍和简单的登入案例实现

    Ssh整合开发介绍和简单的登入案例实现 Ssh整合开发介绍和简单的登入案例实现 一  介绍: Ssh是strtus2-2.3.1.2+ spring-2.5.6+hibernate-3.6.8整合的开 ...

  5. python模块介绍- HTMLParser 简单的HTML和XHTML解析器

    python模块介绍- HTMLParser 简单的HTML和XHTML解析器 2013-09-11 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq ...

  6. 基于.NET CORE微服务框架 -surging的介绍和简单示例 (开源)

    一.前言 至今为止编程开发已经11个年头,从 VB6.0,ASP时代到ASP.NET再到MVC, 从中见证了.NET技术发展,从无畏无知的懵懂少年,到现在的中年大叔,从中的酸甜苦辣也只有本人自知.随着 ...

  7. WebRTC介绍及简单应用

    WebRTC介绍及简单应用 WebRTC,即Web Real-Time Communication,web实时通信技术.简单地说就是在web浏览器里面引入实时通信,包括音视频通话等. WebRTC实时 ...

  8. Vue filter介绍及详细使用

    Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...

  9. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

随机推荐

  1. nyoj-78-圈水池(Graham算法求凸包)

    题目链接 /* Name:nyoj-78-圈水池 Copyright: Author: Date: 2018/4/27 9:52:48 Description: Graham求凸包 zyj大佬的模板, ...

  2. 14_ Component 游戏开发组件模式

    # component 不同作用的程序需要保持互相隔离 我们不想ai 物理 渲染 声音 等等功能 耦合在一起,像下面这样 ``` //bad if (collidingWithFloor() & ...

  3. 自动部署基于Maven的war文件到远程Tomcat

    转载自:https://www.cnblogs.com/jtlgb/p/7018705.html Tomcat 7发布URL = http://localhost:8080/manager/text命 ...

  4. bzoj 4710 分特产

    有 $n$ 个人,$m$ 种物品,每种物品有 $a_i$ 个,求每个人至少分到一个的方案数 $n,m,a_i \leq 2000$ sol: 比上一个题简单一点 还是考虑容斥 每个人至少分到一个 = ...

  5. Effective Python之编写高质量Python代码的59个有效方法

                                                         这个周末断断续续的阅读完了<Effective Python之编写高质量Python代码 ...

  6. Python学习笔记一(基础信息)

    目录 输入输出 数据类型和变量 整数 浮点数 字符串 布尔值 空值 变量 常量 小结 欢迎关注我的博客我在马路边 说明:此笔记不是从零开始,在学习的过程中感觉需要记录一些比较重要和需要重复浏览的信息, ...

  7. JSDoc 介绍

    什么是JSDoc JSDoc是一个根据javascript文件中注释信息,生成JavaScript应用程序或库.模块的API文档 的工具.你可以使用他记录如:命名空间,类,方法,方法参数等.类似Jav ...

  8. unity3d___UGui中如何创建loading...进度条

    http://blog.sina.com.cn/s/blog_e82e8c390102wh2z.html 实现方法:通过Image组件中Image Type属性中Fill Amount,通过代码改变F ...

  9. LdapContext获取对象的属性

    //            dn = "cn=1,cn=Users,DC=域名,DC=COM";//            Attributes answer = ctx.getA ...

  10. Servlet3.0之八:基于Servlet3.0的文件上传@MultipartConfig

    在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不 ...