什么是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. switch多值匹配骚操作，带你涨姿势！

    我们都知道 switch 用来走流程分支,大多情况下用来匹配单个值,如下面的例子所示: /** * @from 微信公众号:Java技术栈 * @author 栈长 */ private static ...

  2. 第 426 期 Python 周刊

    文章,教程和讲座 端到端机器学习:从数据收集到模型部署 链接: https://ahmedbesbes.com/end-to-end-ml.html 在本文中,我们将完成构建和部署机器学习应用程序的必 ...

  3. 笔记软件->"Typora"

    笔记软件->"Typora" 1 下载地址 www.typora.io 2 傻瓜安装后添加自定义样式 由于用户目录不同Users为当前系统用户名字 打开C:\Users\Ad ...

  4. Spring的一些基本概念（面试备用哦）

    1.什么是Spring, 它有什么特点? 包括哪些内容? Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. ◆  轻量——从大小与开销两方面而言Spring都是轻量的.完整 ...

  5. 利用log4net创建日志文件时过滤日志，这是坑还是？

    前言 网上貌似没有太多关于log4net过滤日志的资料,在研究过程中发现一点小问题,这里做下记录,希望对后续有用到的童鞋起到一丢丢帮助作用. log4net日志过滤 由于是在.NET Core中使用, ...

  6. K8s生产架构

    部分图片显示问题,特附上有道云笔记中的链接:http://note.youdao.com/noteshare?id=df78492d2c25383975c67f3eadf0bbd9&sub=4 ...

  7. less实现if else

    less没有我们平常使用的if,else条件判断,而是用when来实现这种用法 1.比如我们要设置宽度 宽度可以百分比,也可以是像素,当是百分比时做对应处理,当是px时做另一种处理,这时候就需要用wh ...

  8. 基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能

    需求: 在编辑数据的时候,既可以让用户输入,也可以从下拉框中选择 思路: 参照下面的效果图,因为是表格里面的数据,所以下拉框触发按钮和输入框分别为1列,输入列可以设置是否输入(方法:<td co ...

  9. Jquery实现图片管理

    这里实现的是一个图片的在线管理,类似于网络相册的图片管理. 效果图如下: 文件结构如下图: style2.css文件内容如下: @charset "utf-8"; *{;; } i ...

  10. cogs 1440. [NOIP2013]积木大赛 贪心水题

    1440. [NOIP2013]积木大赛 ★★   输入文件:BlockNOIP2013.in   输出文件:BlockNOIP2013.out   简单对比时间限制:1 s   内存限制:128 M ...