什么是Vue.js

  • Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也可以进行手机App的开发，需要借助Weex）
  • Vue.js 是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！
  • Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库或既有项目整合。（Vue配套的第三方类库，可以整合起来做大型项目的开发）
  • 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

  • 企业为了提高开发效率；在企业中，时间就是效率，效率就是金钱；

    • 企业中，使用框架，能够提高开发效率
  • 提高开发效率的发展历程：原声JS（各种浏览器存在兼容性问题） -> Jquery之类的类库（频繁操作dom元素，拼接dom） -> 前端模板引擎（数据更改整个页面都要重新渲染） -> Angular.js/ Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
  • 在Vue中，一个和核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
  • 增强自己就业时候的竞争力
    • 人无我有，人有我优

框架和库的区别

  • 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目

    • node中的express
  • 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
      1. 从Jquery 切换到 zepto
      1. 从 EJS 切换到 art-template

Node（后端）中的MVC与前端中MVVM之间的区别

  • MVC 是后端的分层开发概念
  • MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分Model，View，VM ViewModel

第一个Vue示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>01.Vue的基本代码</title>

</head>

<body>

<!--将来 new 的 Vue 实例，会控制这个元素中的所有内容-->

<!--Vue 实例所控制的这个元素区域，就是我们的 V-->

<div id="app">

    <p>{{msg}}</p>

</div>

<!--1. 导入Vue的包-->

<script src="lib/vue.js"></script>

<script>

    // 2. 创建一个Vue的实例

    // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数

    // 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM 中的VM调度者

    var vm = new Vue({

        el: '#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域

        // 这里的 data 就是 MVVM 中的 M，专门用来保存每个页面的数据

        data: {  // data 属性中，存放的是 el 中要用到的数据

            msg: '欢迎学习Vue'  // 通过 Vue 提供的指令，很方便的就把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们手动操作DOM元素了】

        }

    })

</script>

</body>

</html>

Vue系列教程（一）基础介绍的更多相关文章

  1. Git系列教程二 基础介绍

    一.存储方式 如果让我们设计一个版本控制系统,最简单的方式就是每做一次更改就生成一个新的文件. 这样的方式太占用空间,所以传统的版本控制系统都是保存一个文件的某个版本的全部内容以及其他版本相对于这个版 ...

  2. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  3. spring cloud系列教程第一篇-介绍

    spring cloud系列教程第一篇-介绍 前言: 现在Java招聘中最常见的是会微服务开发,微服务已经在国内火了几年了,而且也成了趋势了.那么,微服务只是指spring boot吗?当然不是了,微 ...

  4. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  5. [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  6. Vue系列教程（三）之vue-cli脚手架的使用

    一.Vue-cli的环境准备 目的:(1)快速管理依赖 (2)确定项目结构 1.安装node.js Node.js是一个可以让前端运行在服务器上的一个工. 下载:https://nodejs.org/ ...

  7. Vue系列教程（一）之初识Vue

    一.Vue和MVVM Vue是一个渐进式的js框架,只注重视图层,结合了HTML+CSS+JS,非常的易用,并且有很好的生态系统,而且vue体积很小,速度很快,优化很到位. Vue技术周四MVVM开发 ...

  8. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  9. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

随机推荐

  1. 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统

    前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...

  2. 推荐中的多任务学习-ESMM

    本文将介绍阿里发表在 SIGIR'18 的论文ESMM<Entire Space Multi-Task Model: An Effective Approach for Estimating Po ...

  3. Spring中常见的设计模式——模板模式

    一.模板模式的应用场景 模板模式又叫模板方法模式(Template Method Pattern),指定义一个算法的骨架,并允许自雷为一个或者多个步骤提供实现.模板模式使得子类可以在不改变算法结果的情 ...

  4. MakeDown效果

    这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 这是加粗的文字 这是倾斜的文字 这是斜体加粗的文字 这是加删除线的文字 这是引用的内容 这是引用的内容 这是引用的内 ...

  5. CentOS6.5源码安装mysql-5.5.21

    本文参考自 http://www.cnblogs.com/ShanFish/p/6531365.html,但不局限于它. 一. 卸载旧版本 .检查是否安装mysql组件 # rpm -qa | gre ...

  6. Tensorflow内存暴涨问题

    1.目前只总结出两条 创建saver实例saver = tf.train.Saver()放在循环外面 不循环初始化变量 sess.run(tf.global_variables_initializer ...

  7. 从头学pytorch(十七):网络中的网络NIN

    网络中的网络NIN 之前介绍的LeNet,AlexNet,VGG设计思路上的共同之处,是加宽(增加卷积层的输出的channel数量)和加深(增加卷积层的数量),再接全连接层做分类. NIN提出了一个不 ...

  8. 转型IT学什么语言好，学编程语言为何要重视代码规范？

    造价转IT需要注意什么,先学什么比较好?属于零基础,2019毕业,三本学校,男.自己的想法是先以副业来学习,在合适的时候转入it行业.1.以副业来学的话应该先学习什么比较好?2.如果要直接找工作的话先 ...

  9. LCA - 求任意两点间的距离

    There are n houses in the village and some bidirectional roads connecting them. Every day peole alwa ...

  10. python 验证客户端的合法性

    目的:对连接服务器的客户端进行判断 # Server import socket import hmac import os secret_key = bytes('tom', encoding='u ...