Vue入门基础（火柴）
前言
由于个人十分欣赏博友——小火柴的蓝色理想，他的博文我看了大多数，觉得十分的精彩，然而很多都是看后即忘。我想除了没有经常动手敲代码，更可能是在看的时候忽略了很多细节，因此打算把他的博文通通给“抄袭”下来，各位不要和我一般见识哈^_^
概述
Vue.js是一套构建用户界面的渐进式框架，采用的是自底向上增量开发的设计，核心库只关注视图层，不仅易于上手，还便于和第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。
下面来解释下，何为渐进式框架，请看下图：
如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用；
如果想以组件化开发方式进行开发，则可以进一步使用Vue里面的组件系统；
如果要制作SPA（单页应用），则使用VUe里面的客户端路由功能；
如果组件越来越多，需要共享一些数据，则可以使用Vue里的状态管理；
如果想在团队里执行统一的开发流程或规范，则使用构建工具；
所以，可以根据项目的复杂度来自主选择使用Vue里面的功能。
安装
Vue.js有三种获取方式
1、官网直接下载
2、使用CDN（内容分发网络，地址：https://unpkg.com/vue）
3、使用NPM（npm install vue）
获取Vue之后，直接使用script标签引入即可使用
模板插值
对于Vue最简单的应用就是将其当做一个模板引擎，也就是采用模板语法把数据渲染进DOM。Vue使用双大括号语法来进行文本插值，下面的message相当于一个变量或占位符，最终会表示为真正的文本内容。
<div id="app">
{{message}}
</div>
构造器
每个Vue应用都是通过构造函数Vue创建一个Vue的根实例启动的，经常使用vm（ViewModel的简称）这个变量名表示Vue实例。
var vm = new Vue({
//选项
})
在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法和生命周期钩子等选项。
var vm = new Vue({
el:"#app",
data:{
message:"hello world"
}
})
上面为Vue构造函数传入了一个对象，对象中包括el和data这两个参数
【el】
参数el，是element的缩写，用于提供一个在页面上已经存在的DOM元素作为Vue实例的挂载目标；
参数值有两种类型，包括string和HTMLElement；
上例中，el:"#app"表示挂载目标为id是"app"的元素，也可以写成el:document.getElementById("app")
【data】
参数data表示Vue实例的数据对象；
上例中，data:{message:"hello world"}表示的是变量message所代表的真实值为"hello world"
简单实例
下面将Vue的模板插值和构造器结合起来，制作一个简单的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h4>{{message}}</h4>
</div> <script>
var vm = new Vue({
el: "#app",
data: {
message: "hello world"
}
})
</script>
</body>
</html>
大家可以直接copy代码到本地上进行查看效果
【数据绑定】
看起来上面的例子跟单单渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被绑定在一起，所有的元素都是响应式的。在控制台中修改vm.message的值，可以看到DOM元素相应的更新。
最后
当然，Vue学习的前提是掌握ES6、nodejs以及webpack
Vue入门基础（火柴）的更多相关文章
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue入门基础知识点测试
vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...
- VUE 入门基础(8)
十,组件 使用组件 注册 可以通过以下这种方式创建一个Vue实例 new Vue({ el: '#some-element', }) 注册一个全局组件,你可以使用Vue.component(tagNa ...
- VUE 入门基础(7)
八,事件处理器 监听事件 可以用v-on 指令监听DOM 事件来触发一些javaScript <div id="example-1"> <button v-on: ...
- VUE 入门基础(4)
四,计算属性 基础例子 <div id='example'> <p>0riginal message: "{{message}}"</p> &l ...
- 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定
vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...
- VUE 入门基础(9)
十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值. var vm = new Vue({ data:{ // ...
- VUE 入门基础(6)
六,条件渲染 v-if 添加一个条件块 <h1 v-if="ok">Yes</h1> 也可以用v-else 添加else 块 <template> ...
随机推荐
- AC自动机模板题
AC自动机学习博客 AC自动机理解要点: 1)fail指针指向的是每个节点,在字典树上和这个节点后缀相同的最长单词,每次都这样匹配,必定不会漏过答案. 2)字典树建立后,会在bfs求fail阶段把字典 ...
- PIE SDK矢量点生成等值线、面
1.算法功能简介 等值线图能直观地展示数据的变化趋势,是众多领域展示成果的重要图建之一,被广泛应用于石油勘探.矿物开采.气象预报等众多领域.等值线的绘制是指从大量采样数据中提取出具有相同值的点的信息, ...
- turtle库笔记
turtle库是学习python的一个重要数据库,在当下是一个很有趣流行的绘制图像的数据库,她把画笔想象为一只小乌龟在爬行,让小乌龟在一个以横轴为x,纵轴为y的画布上行驶,并且会有多样的行驶角度,速度 ...
- 封装通用的xhr对象(兼容各个版本)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 《大数据日知录》读书笔记-ch2数据复制与一致性
CAP理论:Consistency,Availability,Partition tolerance 对于一个分布式数据系统,CAP三要素不可兼得,至多实现其二.要么AP,要么CP,不存在CAP.分布 ...
- 移动工程后，打开ROM核无配置信息
问题: 从他人处下载的ISE工程,打开dw51的ROM IP核,无配置信息,为block memory generator的初始配置,并显示无法找到coe文件 原因:ROM配置过程中的部分内容丢失导致 ...
- 后台微信开发入口+关键字 回复等 关注公众号回复 注意获取随机Token 微信的对接校验Token保存到数据库的只是做第一次的校验 其他对微信公众号的操作是去缓存中获取7200S的随机Token
package com.epalmpay.controller.apiweixin; import com.epalmpay.commom.BaseController;import com.epal ...
- HTML5获取地理经纬度并通过百度接口得到实时位置
注:用的时候将获取北京位置那放到获取经度纬度后面即可 -----------实际用的时候的代码如下:start -------- var myCity;getLocation()function g ...
- oracle10g获取Date类型字段无时分秒解决办法！
一般的数据库中,DATE字段仅仅表示日期,不包括日期信息,而Oracle数据库中的DATE数据类型是包括日期.时间的,对于不同的Oracle jdbc驱动版本,对于该问题的处理都有些区别. 最近使用 ...
- php的stristr()函数,查找字符
1.用法,要传2个参数 stristr(string,search):查找并返还匹配后,剩下的部分字符串 查找过程不区分大小写,要区分大小写用 strstr(string,search)少一个字母i ...