金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 前端基础,那些年vue踩过的坑

原标题:前端基础,那些年vue踩过的坑

浏览次数:119 时间:2019-11-18

  初入Vue.js的新世界,总归是要了解些涉及到的新概念。菜鸟诞生的第一课,开眼看看Vue的新世界~~~

一、 web1.0时代的网页制作

网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为“牛皮癣”网页。

例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性)。

相信可能大多数人都听过“网页三剑客 Dreamweaver+Fireworks+Flash”吧,这个组合就是web1.0时代额产物

2.开发依赖工具

  View:视图,根据Model数据进行内容展示的组件;

四、 为什么要学习前端开发

我们为什么要学习前端开发,因为我们的课程定位是Python全栈开发,也就是说我们不仅要掌握后端开发的技术还要掌握一定程度的前端开发技术。 通过前面课程的学习,相信大家都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的,在接下来的这个章节我们将一起来学习一下前端部分的内容,

  这里一般不会出现问题,出现问题请自行百度。成功后会出现:金沙澳门官网网址 1

  4、 MVC与MVVM

三、 Web前端能做什么?

公司官网(在PC通过浏览器来访问公司网站)移动端网页(在手机上来浏览公司信息、小游戏等)移动端APP(例如:淘宝、去哪儿旅游、携程等)微信小程序(微信最新推出的功能,随用随装,不占用手机空间)。前端开发所学技术由简单到难,所以在很多网站上你会看到“七天入门前端”的视频博客等等,也就是说一星期就学会了HTML+CSS。最基本的页面你就可以书写了。

  2.在main.js引入

  这一章我们主要学习了一些 vue 涉及到的一些概念,在后面的学习中,也会逐渐往本篇文章中里面添加用到的知识,文章开始处提供仓储地址里会将涉及到的知识点的汇总成一个markdown文档,希望多多关注啊,嘻嘻。

  • 一、 web1.0时代的网页制作
  • 二、 web2.0时代的前端开发
  • 三、 Web前端能做什么?
  • 四、 为什么要学习前端开发
  • 五、 前端开发都有哪些内容
  • 六、 开发环境

  还是这个js文件中,找到devServer字段,在这个字段里添加如下代码:

  3、 如何使用Vue.js?

二、 web2.0时代的前端开发

“前端开发”是从“网页制作”演变而来的。

从2005年开始,互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验。

在web 2.0时代,网页有静态网页和动态网页。

所谓动态网页,就是用户不仅仅可以浏览网页,还可以与服务器进行交互。举个例子,你登陆新浪微博,要输入账号密码,这个时候就需要服务器对你的账号和密码进行验证通过才行。

web2.0时代的网页不仅包含炫丽的动画、音频和视频,还可以让用户在网页中进行评论交流、上传和下载文件等(交互性)。这个时代的网页,如果是用“网页三剑客Dreamweaver+Fireworks+Flash”制作的,那是远远不能满足需求。

现在网站开发无论是开发难度,还是开发方式上,都更接近传统的网站后台开发,所以现在不再叫“网页制作”,而是叫“web前端开发”。

所以,处于web2.0时代的你,如果要学习网站开发技术,就不要再相信所谓的“网页三剑客Dreamweaver+Fireworks+Flash”,因为这个组合已经是上个互联网时代的产物。而且这个组合开发出来的网站问题也非常多,例如代码冗余、网站维护困难(学习到后期,你会知道为什么不用这个组合了

金沙澳门官网网址 ,         金沙澳门官网网址 2

  图片版权说明:由Ugaya40

五、 前端开发都有哪些内容

我们知道,用所谓的网页三剑客已经不能满足需求了,那前端开发究竟要学习什么技术呢?网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript。

(1)HTML是什么?

HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。

(2)CSS

CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。

(3)JavaScript

JavaScript是一门脚本语言。

HTML、CSS和JavaScript的区别 我们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。但是这三者究竟是干嘛的呢?

“HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为

如果我们把前端开发的过程比喻成“建房子”,做一个网页就像盖一栋房子

1、先把房子结构建好(HTML)

2、建好房子之后给房子装修(CSS),例如往窗户安上窗帘、往地板铺上漂亮的瓷砖

3、最后呢,装修完了之后,当夜幕降临的时候,我们要开灯(JavaScript),这样才能看得见里面。

 

我们先用HTML搭建网页结构,这时候默认情况下,字体、字体颜色、字体大小和背景颜色如下图,仅仅使用HTML的文字

金沙澳门官网网址 3

然后我们通过CSS修饰一下,改变其字体、字体大小、字体颜色和背景颜色,得到如下的效果图

金沙澳门官网网址 4

最后,我们通过JavaScript定义鼠标一个行为,就是鼠标移动到上面的时候,背景颜色会变为深绿色,效果如下:

金沙澳门官网网址 5

       仔细阅读一下文档,就可以上手学习了。配置都有说明,我就不贴图了

  仓储地址:

六、 开发环境

市面上有很多的HTML编辑器可以选择,常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。

1、浏览器

浏览器在本地也能打开html文件,浏览器就跟解释器一样,从上倒下,从左到右

全球共有五大浏览器厂商,我们主要以chrome为主

ie
chrome
firfox
safri
presto
浏览器内核不同,浏览器渲染引擎不同(后期考虑兼容性问题),其他浏览器都是使用这5款浏览器内核 

2、浏览器历史:

世界最早浏览器,网景浏览器(Netscape )
后来它想做操作系统,动了微软的奶酪,微软就想弄死他,
微软做的也特别的绝情,微软利用windows操作系统的市场占有率,提供了免费浏览器ie,而且windows
操作系统里还必须有

中国最早浏览器ie6,国企内就用ie6,

浏览器不同,解析的标签标准不同,微软太霸道,就不改标准,坚持不更新,后来谷歌和火狐抢占了市场,IE就傻逼了,目前也只有傻逼才用IE。。。

市场越发地混乱,于是w3c(万维网联盟(World Wide Web Consortium,W3C))成立,用来制定大家的统一标准

须知:学前端一半工作在考虑兼容性,目前html5在兼容性方面解决的比较好

3、文件后缀名规范

.htm和.html扩展名的区别

#1、DOS系统(win95或win98)下只能支持长度为3的后缀名,所以老版本的系统一直在用.htm后缀

#2、但在windows后缀长度可以大于3位,所以windows下无所谓htm与html,html是为长文件的格式命名的

#3、如果文件后缀是.htm,毫无疑问,浏览器也可以兼容,但推荐使用.html
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

 三、总结

this.$http.get().then(res => {});//这里我使用post请求报错,由于是demo 就没有去百度具体原因,有强迫症的小伙伴可以去研究下,解决问题的话 热心的小伙伴可以贴我下代码 

  Model:模型,用于存储数据的组件;

    3.3 安装 Visual Studio Code

  1、 Vue.js是什么?

        4.安装依赖,运行vue项目。

  3.2、使用 Vue-cli 构建单页应用(需要先在电脑中安装好node.js环境才可使用)

  至此结束。希望对小伙伴们有帮助。Good luck !

  Controller:控制器,接受并处理用户指令,并返回内容

         这个问题是版本问题,更换下vue-cli的版本就可以了,出现这个问题就多试试版本 毕竟好事多磨嘛。版本问题解决了之后,可能会出现一些其他问题,比如初始化模板的时候页面卡住。流程不走。这是因为网上有许多windows下的命令行工具,比如MobaXterm这个工具。我之前出现过页面卡住的原因就是因为使用了这个工具。具体原因不明。后来使用了git bash here 解决了页面卡住的问题。

  • 自己的作品,CC BY-SA 3.0,链接

       在地址栏输入 会看到下面的页面

  Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,只关注于视图层。在Vue的官网中我们可以看见,对于渐进式框架这个词,作者是加粗表示的,按照作者的设计,Vue包含了现代前端框架所必须的内容,但是你并不需要一开始就把所有的东西都用上,这些都是可选的。

$ npm install -g vue-cli

  4.2、MVVM(Model-View-ViewModel):MVVM的核心是ViewModel,它提供了对于Model和ViewModel的双向数据绑定,通过ViewModel连接View和Model,确保视图与数据的一致性,而这个过程是框架自动完成的,无需手动干预。

alias cnpm="npm --registry=https://registry.npm.taobao.org 
--cache=$HOME/.npm/.cache/cnpm 
--disturl=https://npm.taobao.org/dist 
--userconfig=$HOME/.cnpmrc"

# Or alias it in .bashrc or .zshrc
$ echo 'n#alias for cnpmnalias cnpm="npm --registry=https://registry.npm.taobao.org 
  --cache=$HOME/.npm/.cache/cnpm 
  --disturl=https://npm.taobao.org/dist 
  --userconfig=$HOME/.cnpmrc"' >> ~/.zshrc && source ~/.zshrc

  对于Vue的解释,推荐简书上的一篇文章,文章地址:  

金沙澳门官网网址 6

  3.1、使用 script 标签引用Vue.js(这里可以在Vue的官网上下载好js文件后使用标签引入,也可以使用cdn的形式引入)

  这里需要注意的是,V是大写的。

金沙澳门官网网址 7

        vue项目我使用的是webpack的模板,关于打包请自行百度。

  在传统的前端开发中,为了完成某个任务,我们需要使用 JS/Jquery 获取到元素的DOM元素,随后对获取到的DOM元素进行操作。而当我们使用Vue进行前端开发后,对于DOM的所有操作全部交由Vue来处理,我们只需要关注于业务代码的实现就可以了。

1.前言

  //1、全局安装Vue-Cli
  npm install -g vue-cli
  //2、进入创建项目目录下
  //3、创建使用webpack模板的Vue单页应用,Enter后根据提示完成项目的创建
  vue init webpack projectname
  //4、进入项目目录下
  //5、下载项目引用的包
  npm install
  //6、运行项目
  npm run dev

      6.vue-router 路由

  4.1、MVC(Model-View-Controller):是一种表现模式(UI / Presentation Pattern),它将软件的UI部分的设计拆分成三个主要单元,分别是Model、View和Controller。MVC核心是控制器,它负责处理浏览器传送过来的所有请求,并决定要将什么内容响应给浏览器。

'/api': {
          target:'http://localhost:8080/', // 你请求的第三方接口
          changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite:{  // 路径重写,
              '^/api': '/api'  // 替换target中的请求地址,也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
          }
      }

 一、前言

 

  <script  src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

  5.axios 请求本地数据

 二、打怪升级

        这是一个编辑器,前端有很多编辑器,可以根据自己的喜好来。我比较中意这个的代码错误提示:ESLint

  2、 使用Vue.js后与传统的前端开发模式有何不同?

       与服务器进行交互使用的是 axios vue1.0的时候官方推的是vue-resource 但是2.0官方推的是 axios 所以最好使用axios 毕竟也要跟进潮流嘛。

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:前端基础,那些年vue踩过的坑

关键词:

上一篇:git编译安装与常见问题解决,Win10笔记本显卡驱动

下一篇:用模板引擎Art,HTML5新添的标签和性质总结