前言

由于个人十分欣赏博友——小火柴的蓝色理想，他的博文我看了大多数，觉得十分的精彩，然而很多都是看后即忘。我想除了没有经常动手敲代码，更可能是在看的时候忽略了很多细节，因此打算把他的博文通通给“抄袭”下来，各位不要和我一般见识哈^_^

概述

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入门基础（火柴）的更多相关文章

  1. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  2. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  3. vue入门基础知识点测试

    vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...

  4. VUE 入门基础(8)

    十,组件 使用组件 注册 可以通过以下这种方式创建一个Vue实例 new Vue({ el: '#some-element', }) 注册一个全局组件,你可以使用Vue.component(tagNa ...

  5. VUE 入门基础(7)

    八,事件处理器 监听事件 可以用v-on 指令监听DOM 事件来触发一些javaScript <div id="example-1"> <button v-on: ...

  6. VUE 入门基础(4)

    四,计算属性 基础例子 <div id='example'> <p>0riginal message: "{{message}}"</p> &l ...

  7. 02 . Vue入门基础之条件渲染,列表渲染,事件处理器,表单控件绑定

    vue基础 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统 Example1 <!DOCTYPE html> <html> ...

  8. VUE 入门基础(9)

    十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值. var vm = new Vue({ data:{ // ...

  9. VUE 入门基础(6)

    六,条件渲染 v-if 添加一个条件块 <h1 v-if="ok">Yes</h1> 也可以用v-else 添加else 块 <template> ...

随机推荐

  1. [短期持续更新]Codeforces 构造题一览

    说实话我觉得做这种题很没意思(不够硬核), 可是人有短板终究是要补的...起码这种类型补起来相对简单 所以还是把先前准备好的专题放下吧,做点实现上比较休闲的题 ps.为了精简篇幅,代码全部丢到ubun ...

  2. SQL数据库Truncate的相关用法

    数据库中 Truncate的用法:这个是删除表中的所有数据语法是 Truncate Table tablename他与delete的区别在于1 delete 可以有条件的删除 而truncate 是删 ...

  3. [转] Spark快速入门指南 – Spark安装与基础使用

    [From] https://blog.csdn.net/w405722907/article/details/77943331 Spark快速入门指南 – Spark安装与基础使用 2017年09月 ...

  4. 01背包--hdu2639

    hdu-2639 The title of this problem is familiar,isn't it?yeah,if you had took part in the "Rooki ...

  5. AMPQ 0-9-1学习笔记

    AMQP 0-9-1学习笔记 AMQP(Advanced Message Queuing Protocol)高级消息队列协议:是一个进程间传递异步消息的网络协议 2. AMQP的基本模型: Publi ...

  6. 20190430-BootstrapのJS插件

    目录 1.引用 2. 内容 1.引用 引用该插件需注意俩点 1.1插件依赖JQ:JQ必须在所有插件之前,bower.json内列出BT所支持的JQ版本(1.9.1-3) BootCDNのJQ    J ...

  7. PZ73H-PZ73X刀闸阀厂家，PZ73H-PZ73X刀闸阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 PZ73H-PZ73X刀闸阀 无极资讯网精心为您挑选了(PZ73H-PZ73X刀闸阀)信息,其中包含了(PZ73H-PZ73X刀闸阀)厂家,( ...

  8. 补充ABP Zero集成微信小程序登陆的BUG修复部分

    感谢园友 @turingguo 发布的 https://www.cnblogs.com/turingguo/p/9019026.html  文章,详细介绍了ABP Zero集成微信小程序登陆的实现过程 ...

  9. 用PL/sql连接oracle 弹窗出现 could not resolve the connect identifier specified 这个错误

    1 错误如下图: 图1 2.可能原因: 配置oracle客户端中tnsnames.ora文件时,把数据库名弄错,如下图: 图2 箭头所指位置出错.箭头处应该为我们安装时的数据库名(通常是orcl).而 ...

  10. Vector bit-select and part-select addressing verilog片选写法

    大端 m m[ a +: b ] == m[ (a+b-1) : a ] m[ a -: b ] == m[ a : (a-b+1) ] 小端 n n[ a +: b ] == n[ a : (a+b ...