什么是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. 你的IDEA过期了？跃哥四大招帮你稳住

    作者:Dimple Solgan:当你的才华还无法撑起你的野心时候,那应该静下心来好好学习 前天晚上在群里风风火火组建了两个学习小组,一个是面向Java初学,一个是面向Python初学,把我搞的兴奋不 ...

  2. jsp 知识点总结

    JSP 入门案例(计算器的实现) 对于jsp 学习的一些总结 1.使用Dreamweaver 搭建网页 计算器 第一个数字 符号 + - * / 第二个数字 <form id="for ...

  3. selenium爬取驾考宝典题目

    要求 [x] Python3+ [x] Chrome驱动并已配置环境变量 [x] Selenium ## 研究页面 发现驾考宝典的科目四页面URL都是以 https://www.jiakaobaodi ...

  4. ACID特性及幻读的理解

    事务是关系型数据库的重要特性.它是一个包含了一条或多条SQL语句的逻辑原子单元.一个事务包含的SQL要么全部提交,要么全部回滚. Oracle 官方文档中对事务的描述如下: A transaction ...

  5. 基于Jenkins的持续交付全流程设计与实践

    1 从理论开始 什么是DevOps? 近年来,随着DevOps理念的逐渐深入人心,企业逐渐意识到从看似重复的手工劳动中实现自动化流程处理,对于提高企业劳动生产力已经非常重要,尤其是面向互联网的开发者, ...

  6. 关于ECShop4.0安装时数据库报错问题解决

    是ECShop版本的问题,重点在$db_host不能带端口号,把这个文件 ecshop4\ecshop\install\includes\lib_installer.php 里面3处db_host开头 ...

  7. Java控制台五子棋（纯算法）

    Java五子棋小游戏 本方案是基于控制台写的一个代码 没有花里胡哨的界面,只为研究算法 仅仅用了200行代码 下面是的是运行结果 游戏运行结果 这里我就很简单的复制了一个结果 第9回合,下子方:玩家2 ...

  8. css写斜角

    项目开发中遇到了这样的效果,百度了一波,可以使用css3的伪类实现: /*斜角公用*/1.外层的div加class='wrapper' 并需要设置相对定位 .wrapper:before { -moz ...

  9. 谈谈Java的Collection接口

    目录 谈谈Collection 前言 Collection 方法 1.boolean add(E) 2.void clear() 3.boolean contains(Object o) 4.bool ...

  10. 简单 hash 入门题目

    题目描述 NOIP 复赛之前,HSD 桑进行了一项研究,发现人某条染色体上的一段 DNA 序列中连续的 kkk 个碱基组成的碱基序列与做题的 AC 率有关!于是他想研究一下这种关系.现在给出一段 DN ...