什么是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. zabbix监控mysql脚本（仅供参考）

    mysql客户端添加 /etc/zabbix/zabbix_agentd.d.userparameter_mysql.conf UserParameter=mysql.version,mysql -V ...

  2. 20191010-7 alpha week 1/2 Scrum立会报告+燃尽图 06

    此作业参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8750 小组名称:“组长”组 组长:杨天宇 组员:魏新,罗杨美慧,王歆瑶,徐丽 ...

  3. 从零开始のcocos2dx生活（九）CCBReader

    NodeLoaderLibrary是用来存储节点加载器类型的类,通过registerDefaultNodeLoaders()可以注册所有默认类型的加载器 在CocosBuilder的使用手册中: 1. ...

  4. leetcode.769旋转字符串

    给定两个字符串, A 和 B. A 的旋转操作就是将 A 最左边的字符移动到最右边. 例如, 若 A = 'abcde',在移动一次之后结果就是'bcdea' .如果在若干次旋转操作之后,A 能变成B ...

  5. Word List 1 part 1

    inter- 在....之间 intermediate adj. 中间的 pro- 向前,在前;很多;赞同;亲... proportion n. 比例;部分 prim- 第一,主要的 prime ad ...

  6. 大白话抽象工厂模式（Abstract Factory Pattern）

    实例分析 大白话工厂方法模式(Factory Method)一文中,我们讲解了日产4S店工厂规模的扩大,创建了针对不同车型的工厂,减少了工厂的工作内容,提高了效率.下面我们继续以4S店的故事讨论抽象工 ...

  7. 1066 图像过滤 (15分)C语言

    图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...

  8. CSS常见的继承属性

    时间过得很快参加工作半个月了,利用属性的继承性可以有效提高代码的阅读性. 这里是我个人总结的,虽然不全,但是常见: 1.字体系列属性 font-family:字体系列 font-weight:字体的粗 ...

  9. centos7.3安装chrome

    Centos7安装chrome浏览器 1.配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repo cd /ect/yum.repos.d/ vim ...

  10. k8s-手动安装

    预先准备信息 以下列节点数与规格来进行部署 Kubernetes 集群,操作系统CentOS 7.x IP Address Role CPU Memory 192.168.2.10 node10 4 ...