热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue系列教程(一)基础介绍

什么是Vue.jsVue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App&

什么是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&#61;"en">
<head><meta charset&#61;"UTF-8"><title>01.Vue的基本代码</title>
</head>
<body>
<!--将来 new 的 Vue 实例&#xff0c;会控制这个元素中的所有内容-->
<!--Vue 实例所控制的这个元素区域&#xff0c;就是我们的 V-->
<div id&#61;"app"><p>{{msg}}</p>
</div>
<!--1. 导入Vue的包-->
<script src&#61;"lib/vue.js"></script>
<script>// 2. 创建一个Vue的实例// 当我们导入包之后&#xff0c;在浏览器的内存中&#xff0c;就多了一个Vue构造函数// 注意&#xff1a;我们 new 出来的这个 vm 对象&#xff0c;就是我们 MVVM 中的VM调度者var vm &#61; new Vue({el: &#39;#app&#39;, // 表示&#xff0c;当前我们new的这个Vue实例&#xff0c;要控制页面上的哪个区域// 这里的 data 就是 MVVM 中的 M&#xff0c;专门用来保存每个页面的数据data: { // data 属性中&#xff0c;存放的是 el 中要用到的数据msg: &#39;欢迎学习Vue&#39; // 通过 Vue 提供的指令&#xff0c;很方便的就把数据渲染到页面上&#xff0c;程序员不再手动操作DOM元素了【前端的Vue之类的框架&#xff0c;不提倡我们手动操作DOM元素了】}})
</script>
</body>
</html>

推荐阅读&#xff1a;
Vue系列教程&#xff08;一&#xff09;基础介绍
Vue系列教程&#xff08;二&#xff09;v-cloak、v-text、v-html的基本使用
Vue系列教程&#xff08;三&#xff09;v-bind指令
Vue系列教程&#xff08;四&#xff09;v-on指令定义事件
Vue系列教程&#xff08;五&#xff09;跑马灯效果案例
Vue系列教程&#xff08;六&#xff09;事件修饰符
Vue系列教程&#xff08;七&#xff09;v-model和双向数据绑定


推荐阅读
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 【Vue基础】监听属性watch
    Vue监听属性是watch,我们可以通过watch来响应数据的变化。代码示例: ... [详细]
  • 本文详细介绍了MySQL表分区的创建、增加和删除方法,包括查看分区数据量和全库数据量的方法。欢迎大家阅读并给予点评。 ... [详细]
  • 本文介绍了如何使用Express App提供静态文件,同时提到了一些不需要使用的文件,如package.json和/.ssh/known_hosts,并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]
  • 移动端常用单位——rem的使用方法和注意事项
    本文介绍了移动端常用的单位rem的使用方法和注意事项,包括px、%、em、vw、vh等其他常用单位的比较。同时还介绍了如何通过JS获取视口宽度并动态调整rem的值,以适应不同设备的屏幕大小。此外,还提到了rem目前在移动端的主流地位。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了自学Vue的第01天的内容,包括学习目标、学习资料的收集和学习方法的选择。作者解释了为什么要学习Vue以及选择Vue的原因,包括完善的中文文档、较低的学习曲线、使用人数众多等。作者还列举了自己选择的学习资料,包括全新vue2.5核心技术全方位讲解+实战精讲教程、全新vue2.5项目实战全家桶单页面仿京东电商等。最后,作者提出了学习方法,包括简单的入门课程和实战课程。 ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 我正在尝试使用scrapycrallsingle运行完美运行的scrapy蜘蛛,但我无法在python脚本中运行它.主要问题是从不执行SingleBlogSpider.parse方 ... [详细]
  • 表达式树摘录(1)
    本文主要讲述ConstantExpression介绍表示具有常量值的表达式。ParameterExpression介绍表示命名的参数表达式。UnaryExpression介绍表示包 ... [详细]
  • 前言:原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函 ... [详细]
author-avatar
手机用户2602914293
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有