精华内容
下载资源
问答
  • Vue新手入门指南(易懂)

    万次阅读 多人点赞 2021-02-21 20:05:21
    对于一名初入编程的新手来说,JavaScript的语法偏向复杂,选择Vue库可以说是一个较为不错的体验。在很多方面,Vue简化了JavaScrip语法,并且实现数据与视图的双向绑定,达到响应式页面的目的。 1. Vue实例和模板...

    Vue快速入门

    • 前言

      对于一名初入编程的新手来说,JavaScript的语法偏向复杂,选择Vue库可以说是一个较为不错的体验。在很多方面,Vue简化了JavaScrip语法,并且实现数据与视图的双向绑定,达到响应式页面的目的。

      博主是一位大二的编程小白,以下的内容都是自己对Vue的理解,写本篇博客的目的是为了巩固自己对Vue的基础知识,大家可以作为一种笔记来观看,如果能够给学校Vue的朋友带来帮助,不胜荣幸,对于存在许多表达不恰当以及逻辑错误的地方,还望大家斧正。
      参考资料:《Vue.js从入门到实践》

    1. Vue实例和模板语法

    <body>
    	<div id="app"> 
    		<p>{{message}}</p> 
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			message:'hello,word!'
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    
    • el

    Vue语法与JavaScript一样写在script中,通过id选择器绑定DOM,在Vue中,只需要在el中对DOMid进行挂载,可以简单的理解为钩子el通过id="app"的特征钩住了<div>中的所有内容,这样我们就可以在Vue中实现对DOM中的操作。

    • data

    Vue中的data用于声明我们所要使用的数据,这样操作有利于我们在维护或者操作文档的时候能够更容易的清晰某一板块所需要修改的数据,并且不需要直接对DOM进行操作,此时的数据与DOM是双向绑定的,当我们对data中所声明的数据进行修改时,DOM中同时也会发生响应式的变化。

    • methods

    Methods中包含的是我们对这个页面的整个逻辑以及页面中的触发事件,其中的内容相当于JavaScript中的function内容

    2. 内置指令
    在Vue中有许多内置指令,通过这些指令替换JavaScript中对文档的以及事件的操作。

    • v-html
      v-html:将数据以html标签形式更新
    <body>
    	<div id="app"> 
    		<p>{{website}}</p>
    		<p v-html="message">{{website}}</p> 
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			website:'Vue,js',
    			message:'<h1>hello,word!</h1>'
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述
    可以发现,第二个<p>标签中所绑定的Vue.js被hello,word!所更新,并且在声明的message中‘<h1>hello,word!<\h1>'通过html标签更新了其中的内容,看到的这是一个一级标题的hello,word!。

    • v-text
    <body>
    	<div id="app"> 
    		<p>{{website}}</p>
    		<p v-text="message">{{website}}</p> 
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			website:'Vue,js',
    			message:'<h1>hello,word!</h1>'
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述
    通过v-txet指令,尽管仍然替换掉了<p>标签中的内容,但是仅仅是通过字符串的形式显示了出来,而不是像html一样通过html标签的形式显示。

    • v-cloak

    代码加载的时候先加载HTML,把插值语法当做HTML内容加载到页面上,当加载完js后才把插值语法替换掉,所以我们会看到闪烁问题,而v-clock可以解决这个问题。

    <div v-cloak>{{msg}}</div>
    <style type="text/css">
     [v-cloak]{
      display: none;
     }
     </style>
    
    • v-once

    v-once指令只渲染元素和组件一次,随后的渲染,使用了此指令的元素、组件及其所有的子节点,都会当作静态内容并跳过,这个可以用于优化更新性能。

    <body>
    	<div id="app"> 
    		<p v-once>can not change:{{website}}</p>
    		<p>change: {{website}}</p>
    		<p ><input type="text" v-model = "website"></p> 
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			website:"hello"
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述

    • v-on

    对于Vue的事件绑定使用内置的v-on指令来完成,以及传递参数。

    <body>
    	<div id="app"> 
    		<input type="button" value="单击事件" v-on:click="alert"> //@click="alert"
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    		},
    		methods:{
    		alert:function() {
    			alert('触发了点击事件');
    		}	
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述

    v-on:click点击事件后面添加了命名为alert的方法,在此之前我试过直接使用v-on:click="alert(‘触发了点击事件’)",但是点击之后控制台报错,不知道有没有大神明白为什么会这个样子。
    使用v-on指令时,不仅仅可以触发点击事件,譬如双击事件以及键盘敲击事件等等,只需要修改v-on:click or(mousedown、mouseup等),同时我们可以将v-on:click简写为@click,触发事件的方法必须写在methods中。

    • v-if

    v-if、v-show可以实现条件渲染,Vue会根据表达式值的真假条件来渲染元素。还有可以与v-if搭配的v-else、v-else-if指令,类似与JavaScript中的if-else、if-elseif-elseif。

    简单来说,v-if相当于JavaScript中我们对DOM的条件操作,根据表达值的真假,从而对DOM进行有条件的操作,让我们来看看是如何操作的把。

    <body>
    	<div id="app"> 
    		<input type="button" value="切换"  @click="go">
    		<p v-if="jump">我跳出来拉</p>
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			jump:false
    		},
    		methods:{
    			go:function(){
    				this.jump=!this.jump;
    			}
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述
    注意,v-if的默认布尔值为false,并且v-if是直接对DOM的操作,而随后的v-show是对样式的操作。

    • v-show

    v-show用法与v-if大致一样,不同的是带有v-show的元素始终会被渲染并且保留在DOM中,v-show只是简单地切换元素的CSS属性display,当模板属性为true的时候,控制台显示为display:block;属性值为false的时候,控制台显示display:none。
    v-show不支持<tempalte>语法,也不支持v-else。

    <body>
    	<div id="app"> 
    		<input type="button" value="切换"  @click="go">
    		<p v-show="jump">我跳出来拉</p>
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    			jump:false
    		},
    		methods:{
    			go:function(){
    				this.jump=!this.jump;
    			}
    		},
    	})
    </script>
    </body>
    

    v-show与v-if的区别

    • 都是根据表达式的真假判断元素显示与隐藏
    • v-if只有在条件为真时,才对元素进行渲染,v-show无论初始条件为何,元素总会被渲染。
    • v-show初始开销更高,v-if的切换开销更高
    • 频繁切换时用v-show;运行条件很少改变时用v-if
    • v-for
      在Vue中,提供了v-for指令用来循环数据。
    <body>
    	<div id="app">
    		<h>开始循环</h>
    		<li v-for="index in item"> //index用于遍历item中的所有元素
    			{{index}}
    		</li>
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    		item:[1,2,3,4,5],
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述

    <body>
    	<div id="app">
    		<h>开始循环</h>
    		<li v-for="(index,items) in item">//index表示数组中的元素,items表实元素的下标
    			{{index}},{{items}}
    		</li>
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    		item:[1,2,3,4,5],
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    在这里插入图片描述

    可以使用of替代in作为分隔符,因为它更接近JavaScript迭代器的语法
    <div v-for=“index in items”>

    • v-model
      关于v-model最重要的就是双向数据绑定。使用Vue操作DOM元素时,视图与数据依照任何的一方同时发生改变。
    <body>
    	<div id="app">
            输入内容:<input type="text" v-model="message"><br/>    <!--v-model绑定了输入框与message中的内容-->
            反转内容:{{reversedMessage}}
        </div>
    <script>
    	new Vue({
                el:'#app',
                data:{
                    message:''
                },  
                computed:{              //计算属性在computed选项中定义,当计算属性所依赖的值发生变化时,这个属性的值会自动更新
                                        //computed可以换做methods定义一个方法实现相同的功能
                    reversedMessage: function(){
                        return this.message.split('').reverse().join('') //选中message中的内容,反转后添加
                    }
                }
            })
    </script>
    </body>
    

    当我们在input输入框里面输入值时,所绑定的message属性值也发生了变化,当绑定成功,我们在input中输入的任何合法字符串或者数字时,Vue都会重新更新message的属性值,从而符合我们所输入的值,再通过reversedMessage方法将message颠倒过来重新打印在=={{reversedMessage}}==,由于是双向数据绑定,三者是同时发生的。

    • v-bind
      v-bind的作用是为元素绑定属性,写法v-bind:属性名,可以简写为“:属性名”。
    <body>
    	<div id="app">
    		<img :src="imgsrc" :title="imgtitle">
    	</div>
    <script>
    	new Vue({
    		el:'#app',	
    		data:{
    		imgsrc:"xxx",
    		imgtitle:"获得图片",
    		},
    		methods:{
    		},
    	})
    </script>
    </body>
    

    无论是class还是其他标签,都可以通过“:标签名”来为元素绑定属性。对于绑定的元素内容是作为一个JavaScript变量,故而可以对其进行编写JavaScript的表达式。

    3. 结束语
    编程的学习任重而道远,如果大家觉得不错就点赞分享吧,谢谢大家的观看。

    展开全文
  • vue新手入门的简单网站If you want a create a website but have no idea how to start, you’ve come to the right place. Before you start building your site, there are five essential steps you need to go ...

    vue新手入门的简单网站

    If you want a create a website but have no idea how to start, you’ve come to the right place. Before you start building your site, there are five essential steps you need to go through – if you don’t, you may face serious problems further down the line. In this post, we’ll look at each of the steps and show you what you need to do so that any issues can be avoided.

    如果您想创建一个网站但不知道如何启动,那么您来对地方了。 在开始构建站点之前,需要完成五个基本步骤-如果不这样做,则可能会面临更严重的问题。 在这篇文章中,我们将研究每个步骤,并向您展示您需要做什么,以便可以避免任何问题。

    1.您需要一个网站名称 (1. You’ll need a website name)

    All website names are registered, so the first thing you’ll need to do is think of the name you want and check whether it is available to use. If it is, you’ll be able to register it and stop anyone else from using it.

    所有网站名称都已注册,因此您需要做的第一件事就是考虑您想要的名称,然后检查该名称是否可用。 如果是这样,您将能够注册它并阻止其他任何人使用它。

    Website names are technically known as domain names. They come in two parts, the name itself and the domain extension (.com, .co.uk, .org, etc.). You are free to use a wide range of extensions, though the best to use depends upon the type of website you are creating and, sometimes, the place you are located.

    网站名称在技术上称为域名。 它们分为两部分,名称本身和域扩展名(.com,.co.uk,.org等)。 您可以自由使用各种扩展程序,但是最佳使用方法取决于您创建的网站类型,有时还取决于您所在的位置。

    For more information, check out our post: 8 Tips to Help You Choose the Right Domain Name for Your Website. To find out whether the domain name you want is available or to register a domain, visit our domain page.

    有关更多信息,请查看我们的文章: 帮助您为网站选择正确的域名的8条提示 。 要了解您想要的域名是否可用或要注册域名,请访问我们的域名页面

    2.确定您要如何建立网站 (2. Decide how you want to build your website)

    There are multiple routes you can take to build a website. Here’s an overview of them:

    建立网站可以采取多种途径。 以下是它们的概述:

    a) Use an online website builder

    a)使用在线网站构建器

    No doubt you’ll have seen adverts on TV for services that let you create a website in just a few hours without any programming skills. While it is possible to do this, the drag and drop websites these services create are very limited in the functions they offer.

    毫无疑问,您会在电视上看到一些广告服务,这些广告可让您在短短几个小时内创建一个网站,而无需任何编程技能。 尽管可以这样做,但是这些服务创建的拖放网站在其提供的功能上非常有限。

    In addition, you may have to use a domain name that includes the website builders’ name, so instead of ‘mybusiness.co.uk’ you’ll have the less professionally sounding ‘mybusiness.webbuilder.co.uk’. The other downside is that you’ll have to use the web builder’s hosting and this may not provide best or cheapest service.

    另外,您可能必须使用包含网站建设者名称的域名,因此,您将使用听起来不太专业的“ mybusiness.webbuilder.co.uk”,而不是“ mybusiness.co.uk”。 另一个缺点是,您将不得不使用Web构建器的托管,这可能无法提供最佳或最便宜的服务。

    b) Use a CMS

    b)使用CMS

    Luckily, if you don’t have any coding skills, you are not restricted to using a website builder. Instead, you can do what the majority of website owners do and use a CMS (content management system) to create your website. The most popular, by far, is WordPress, which runs 29% of the world’s websites. Others include Magenta, Joomla and Drupal. All of them are completely free to use.

    幸运的是,如果您没有任何编码技能,则可以使用网站构建器。 相反,您可以执行大多数网站所有者的操作,并使用CMS(内容管理系统)来创建您的网站。 到目前为止,最受欢迎的是WordPress,它运行着全球29%的网站。 其他包括洋红色,Joomla和Drupal。 所有这些都是完全免费的。

    CMS are programs that let you build websites easily. Creating a web page is about as hard as creating a similar page on MS Word. It takes a little while to learn the software, but you don’t need to know anything about HTML or PHP coding.

    CMS是可让您轻松构建网站的程序。 创建网页与在MS Word上创建类似页面几乎一样困难。 学习该软件需要花费一些时间,但是您无需了解任何有关HTML或PHP编码的知识。

    CMS platforms enable you to use your own domain name and pick a web hosting package that offers the best services for your needs. They also have thousands of free web templates and plugins you can use to make your site look unique and to give it exceptional functionality.

    CMS平台使您可以使用自己的域名,并选择可提供满足您需求的最佳服务的网络托管软件包。 他们还提供了成千上万的免费Web模板和插件,您可以使用这些模板和插件来使您的网站看起来独特并赋予其出色的功能。

    c) Get a website built for you

    c)为您建立一个网站

    If you don’t have the time or the skills to build a website, the only other solution is to pay a developer to build one for you. The main advantage of this is that you’ll get a bespoke site that has all the features you want. However, it will be the most expensive option and you may end up being reliant on the developer to maintain the site over the long term.

    如果您没有时间或技巧来建立网站,那么唯一的其他解决方案是付钱给开发人员为您建立一个。 这样做的主要优点是,您将获得一个定制的站点,该站点具有所需的所有功能。 但是,这将是最昂贵的选择,您最终可能会依赖开发人员来长期维护该网站。

    For more information, read our post: Web Hosting or Online Website Builder: Which is the Best for Your Website?

    有关更多信息,请阅读我们的文章: Web托管或在线网站构建器:哪个是最适合您的网站?

    3.选择一个虚拟主机 (3. Choose a web host)

    In order to build a website or for it to be available on the internet, it will need to be hosted on a server. To do this, you will need to find a hosting service that will host your website for you.

    为了建立一个网站或使其在Internet上可用,它将需要托管在服务器上。 为此,您将需要找到一个托管服务来为您托管网站。

    Choosing the right web host is one of the most important decisions you will make when launching your new website. Here is a list of reasons why:

    选择合适的虚拟主机是启动新网站时最重要的决定之一。 以下列出了原因:

    * The hardware used by a web host will affect the performance of your site. This, in turn, can affect how it performs on search engines and whether visitors will stay on your site.

    *虚拟主机的硬件将影响您网站的性能。 反过来,这可能会影响它在搜索引擎上的效果以及访问者是否会留在您的网站上。

    * Hosting that provides robust security can protect your site from hacking and malware infection and help you stay compliant with data protection regulations. Reliable hosting can ensure your site does not go offline and is always available.

    *提供强大安全性的主机可以保护您的站点免受黑客攻击和恶意软件感染,并帮助您遵守数据保护法规。 可靠的托管可以确保您的网站不会脱机并且始终可用。

    * Good hosting will provide a range of essential features such as email, website backups, easy upgrades and site migration.

    *优质的托管服务将提供一系列基本功能,例如电子邮件,网站备份,轻松升级和网站迁移。

    * Hosting that provides 24/7 technical support means that, should you have any kind of problem with your site, there will be an expert on hand to help you.

    *提供24/7全天候技术支持的主机意味着,如果您对网站有任何疑问,将有一位专家为您提供帮助。

    When looking for a host, you need to consider these things carefully. For more detailed help, read our post: 10 Tips for Choosing the Right Web Host

    寻找主机时,您需要仔细考虑这些事情。 有关更多详细帮助,请阅读我们的文章: 选择合适的Web主机的10个技巧

    4.选择合适的托管包 (4. Choosing the right hosting package)

    Once you have decided on the right host, the next stage is to decide on the right hosting package. This can seem a complicated process as there is a wide range of hosting options available. At the less expensive end of the spectrum, you have shared hosting, dedicated WordPress hosting and some of the smaller VPS plans. If you have bigger hosting requirements, you may need a large VPS package, a dedicated server or cloud hosting.

    确定正确的主机后,下一步就是确定正确的主机包。 这似乎是一个复杂的过程,因为可以使用多种托管选项。 在价格较便宜的一端,您可以共享托管,专用WordPress托管以及一些较小的VPS计划。 如果您有更高的托管要求,则可能需要大型VPS软件包,专用服务器或云托管。

    The type of hosting you will need depends on the size of your website, the amount of traffic you expect to receive and whether you intend to run other applications on the server, besides your website. For a full overview, read our post: Different Web Hosting Types: A Detailed Guide

    您将需要的托管类型取决于您网站的大小,您希望收到的流量以及是否打算在服务器上运行除网站之外的其他应用程序。 有关完整的概述,请阅读我们的文章: 不同的虚拟主机类型:详细指南

    5.规划您的网站 (5. Planning your site)

    Before you get started with creating your website, the final stage is to plan your content. To do this, you should have a complete overview of all the pages you’ll need and all the functionality required for the website to achieve your aims (such as a checkout for eCommerce sites).

    在开始创建网站之前,最后一步是计划您的内容。 为此,您应该全面了解所需的所有页面以及网站实现目标所需的所有功能(例如,对电子商务网站进行结帐)。

    When planning your site, divide your content into clearly defined sections and subsections. This will ensure that everything is in the right place for your visitors to find things easily. If it helps, use standard website structures so that things are where visitors expect them to be.

    在规划站点时,请将内容分为明确定义的部分和子部分。 这将确保所有内容都在正确的位置,以使您的访客轻松找到所需的内容。 如果有帮助,请使用标准的网站结构,以使访问者可以按预期进行操作。

    To help, read our post: Essential Content for WordPress Websites. This will be useful for all websites, not just WordPress ones.

    为了帮助您,请阅读我们的文章: WordPress网站的基本内容 。 这将对所有网站有用,而不仅仅是WordPress网站。

    建立您的网站 (Building your site)

    When all the above steps have been completed, it will be time to start building your site. How you do this will depend on the choices you have made along the way, so there is no single piece of advice we can give to all readers. If you choose a web builder, follow the instructions on their site. If you are using the services of a developer, make sure you have given them a complete list of all the pages and features you require. If you are building a WordPress site, check out our posts, Complete Guide to installing WordPress using cPanel followed by How to Configure WordPress Settings.

    完成上述所有步骤后,就该开始构建您的网站了。 您如何执行此操作将取决于您在此过程中所做的选择,因此我们无法向所有读者提供任何建议。 如果您选择网络构建器,请按照其网站上的说明进行操作。 如果您使用的是开发人员的服务,请确保已为他们提供了所需的所有页面和功能的完整列表。 如果您正在构建WordPress网站,请查看我们的帖子, “使用cPanel安装WordPress的完整指南”,然后是“ 如何配置WordPress设置”

    结论 (Conclusion)

    As you can see, getting a website off the ground requires you to consider a number of very important factors. Thinking these through, before commencing, can prevent complicated and long-term issues developing further down the line. Hopefully, this post and the posts it links to, will help you make more informed decisions.

    如您所见,建立一个网站需要您考虑许多非常重要的因素。 在开始之前仔细考虑这些可以防止复杂的长期问题进一步发展。 希望这篇文章及其链接到的文章将帮助您做出更明智的决定。

    If you are planning to start a new website, check out our range of cPanel and WordPress hosting packages.

    如果您打算启动一个新网站,请查看我们的cPanelWordPress托管软件包范围。

    翻译自: https://www.eukhost.com/blog/webhosting/5-step-beginners-guide-to-starting-a-website/

    vue新手入门的简单网站

    展开全文
  • Vue.js新手入门指南

    2019-11-23 10:35:12
    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做...

    ”肉烂在汤锅里“,谚语,意思是比喻虽有损失,但仍属自己或自家人。

    欢迎访问我的个人博客:https://blog.52lhd.com

    Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。

    在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

    下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了HTML+CSS+JavaScript,如果你对JQuery这个前端库,以及各种后端模版语言比如说PHP,JSP还有所了解并且使用过的话那就太好了。

    1.Vue.js是什么?

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件Vue 生态系统支持的库开发的复杂单页应用。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架

    这是官网的介绍,是不是觉得非常的抽象非常的官方?看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?还有最后一段话,“Vue.js 与其它库/框架的区别”究竟是什么?

    不要担心,如果你慢慢看完这里面的所有问答,一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

    2.Vue.js到底是什么?

    想必现在能看到我这篇文章的人,都是用着APP或者网页版知乎在阅读把。Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

    3.单页应用程序(SPA)

    顾名思义,单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。

    4.你前面说的网页版知乎我也可以用JQuery写啊,为什么要用Vue.js呢?

    讲到JQuery,就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎,那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

    现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

    Vue 的核心库只关注视图层

    我们为什么要把视图层抽取出来并且单独去关注它呢?

    因为在像知乎这种页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,这什么问题呢?

    你是否还记得你当初写JQuery的时候,有写过KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲xxx').parent().…(’#xxx’).parent().parent().parent()可能就会变成$(’#xxx’).parent().parent().parent().parent().parent()了。

    这还不算什么,等以后产品迭代越来越快,修改越来越多,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的,可能到时候打开这个页面,会变得越来越卡,而你却无从下手。

    当你在编写项目的时候遇到了这种问题,你一定会抱怨,为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言,为什么当初学JQuery看中的是它简洁的DOM操作,现在却一点也不觉得它有多简洁,难道我学的是假的JQuery?为什么写个代码这么难,你想砸电脑,你想一键盘拍在产品狗的脑袋上,责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

    这个时候如果你学过Vue.js,那么这些抱怨将不复存在。

    5.Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?

    因为Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

    可是这些名词都是啥?

    6.响应式的数据绑定

    这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue.js</title>
    	<script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
    		<hr>
    		<p>{{ message }}</p>
    	</div>
    	<script type="text/javascript">
    		var app = new Vue({
    		  el: '#app',
    		  data: {
    		    message: 'Hello Vue!'
    		  }
    		})
    	</script>
    </body>
    </html>
    

    是不是会发现一个很神奇的现象,文本框里面输入的文字和后面的p标签中的内容一起变化?

    换句话说,p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起,其中变化,另外一个和它绑定的数据就跟着变化。

    结合标题来说,就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

    7.组件化开发

    还记得在传统前端开发的时候,我们都是每个人做一个页面,然后最后套入各种后端模版引擎,比如说PHP的Smarty或者Java的JSP等等。

    但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

    在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。

    在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

    8.Virtual DOM

    现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

    而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

    对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

    9.我到底该怎么用Vue.js做单页应用开发?

    说了这么多,我还是不知道怎么用它做出一个像知乎那样的页面啊,到底怎么学它呢?

    前面我们看了一个响应式的数据绑定案例,那只是一个DEMO,而且也看不出有什么实际意义,离真正的单页应用程序还差得远,到底怎么用它开发真实的项目呢?

    我的建议是,先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外,前面几章完全就是把Vue.js当作一个模版引擎来用。

    然后开始学习ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解。

    最后组件部分先大致看一遍,了解组件里面都有哪些概念之后,开始看网上各种实战视频以及文章还有别人开源的源代码。

    10.在前面你提到过好几次ECMAScript,这是啥?

    ECMAScript听名字好像和JavaScript很像,难不成他们有什么千丝万缕的联系?

    没错你猜对了,他们之间还真有着很深的联系。

    引用阮一峰老师的话:(ECMAScript 6入门

    要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版。

    该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

    因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

    而ECMAScript6就是新一代的JavaScript语言。

    这里也强烈推荐大家学习ECMAScript6的时候参考这本书ECMAScript 6入门

    11.我在学习Vue.js的时候老是听到Webpack,这是啥?

    Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你的HTML文件,以及通过Script标签的src属性引入外部的JS脚本,那么你肯定会对这个工具感到陌生。不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。

    12.为什么要用Webpack

    前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材和别的第三方库,我们该如何去管理这些东西呢?

    还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?因为单页应用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么请求一个页面的时候,可能浏览器就要发起十多次请求,往往请求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不需要,但是由于HTTP是应用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长,所以需要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP请求,所以head等部分也是共享的,相当于形成了规模效应,让网页展现更快,用户体验更好。

    前面说到Webpack还有构建的功能,这就不得不提到了ECMAScript6这个新版本的JavaScript,但是现在国内外还有很多人用着老版本的浏览器,这些浏览器并不支持ECMAScript6,那么我们的前端项目如何在这种浏览器上运行呢?这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言,这个转换器的名字叫做babel,如果你以后听到或者看到了这个单词,应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass,Less,stylus之类的CSS预处理器,我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

    开头的介绍提到了vue.js可以使用单文件组件开发项目,其实也是通过Webpack将单文件组件中的模版,样式以及JS转换到主页面中

    当然Webpack不止这点功能,它还可以通过安装各种插件来扩展,比如说热加载技术,就是解放键盘的F5键。让我们修改代码,并且按Ctrl+S保存之后,浏览器页面自动刷新变化,不需要我们去手动刷新,还有一些插件可以自动添加注释,自动给CSS代码加上一些浏览器内核对CSS3兼容前缀,就像webkit-xxx之类的一样。

    13.NPM和Node.js又是什么?它们是什么关系?

    首先讲讲Node.js。我们知道通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的,所以作为一个前端开发,即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

    NPM是一个node.js的包管理器。我们在传统开发的时候,JQuery.js大多都是百度搜索,然后去官网下载,或者直接引入CDN资源,这种方法太过于麻烦。如果以后遇到其他的包,这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系),那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器,直接可以通过

    npm install xxx包名称
    
    

    的方式引入它,比如说

    npm install vue
    

    就自动在当前项目文件夹下导入了这个包,并且npm自动下载好了vue这个包依赖的其他包。

    至于有的人在按照网上的npm教程配置的时候踩坑了,发现下载速度很慢或者完全下载不了,那是因为我国有着众所周知的原因,网上也有各种解决方法可以解决这个问题,大家多善用搜索引擎。

    前面提到了Webpack可以安装各种插件来扩展功能,其实也是通过这种方式扩展。

    如果你学过PHP的话,NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

    14.Vue-CLi又是啥?

    它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具,它可以通过

    npm install vue-cli -g
    

    的方式安装,后面的-g表示全局安装的意思,意味着你可以打开命令行之后直接通过vue命令调用它。

    15.我该不该学Vue.js?

    现在Vue.js无论是发展势头还是作者支持还是很好的,而且它本身中文资料就比较多,教程也很多,现在随随便便打开几个和前端开发有关的知乎专栏,基本上都能见到相关文章,社区也很活跃。

    至于你该不该学,取决于你自己,如果你当前只是做做以内容展示为主的项目,或者就是成天用各种CMS建站仿站,并且以后都不打算更换更好的工作,那么可以暂时不用学。如果你开发的项目交互非常多,而且前后端开发都对前后端分离有很清楚的认识,那么可以大胆的学习,并且在实际项目中运用。

    16.Vue.js怎么火起来的?

    关于这个问题,网上说法很多,我自己认为主要还是前些年大前端变革太快,而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了,而且已经有了很多中文资料。

    对比它的竞争对手AngularJS,新旧版本项目无法平滑升级,变革太大让用户感觉不安稳。

    而React本身主流推荐用的是JSX,需要额外学习一门语法(什么?学Vue.js还要学ECMAScript6?现在ECMAScript6是趋势,并不是因为Vue.js才要学的),并且React本身用的是render写法编写模版代码,这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应,现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

    当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的,他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

    17.我在很多地方还看到Vuex和Vue-route,它们又是什么?

    Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

    Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

    要讲清楚这两个东西,又得花费大量篇幅,所以这里只是简单提一下,先学好vue.js本身才是最重要的。

    18.我还在一些地方看到过Vue-resource和Axios,它们又是什么?

    我们在传统的前后端不分离的开发中,后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发,那么这个单页应用程序中的数据就得通过ajax的方式获取,也要通过ajax的方式提交到后端。

    在传统开发中我们都是通过xmlhttprequest手动操作,或者通过JQuery的ajax方法来进行数据提交获取。

    vue.js本身没有封装ajax操作库,所以我们要通过Vue-resource和Axios来进行ajax操作,而因为种种原因,现在vue.js2.0已经将axios作为官方推荐的ajax库了。

    19.写Vue.js用什么开发工具和电脑呢?

    前端开发基本上不需要太高端的电脑都能胜任,现在这个时代是台电脑,装个编辑器都可以做前端开发的。

    Vue.js的组件文件本质上还是普通的代码文件,所以各种编辑器配合一些语法检查插件就足够了。我自己用的是sublime text 3,安装一些插件之后可以实现.vue单文件组件高亮代码以及各种自动完成。Webstorm中也有类似插件,大家可以在网上各种教学文章的指导下配置好环境。

    我用的主题是Monokai,这个主题在大部分显示器下长时间观看眼睛不会很疼。我使用的显示器是LG IPS236,部分显示器有亮度色标调节,我这款显示器调到2.0左右会比较舒适,过低会导致底部的茶色背景变黑,反差较大更加疲劳,过高会导致对比度不足,画面泛白影响调色。

    结束语:

    可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳,而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端,如果一个对于前端各个方面没有深入认识就想着能一步登天,肯定对不起大前端的“大”字。原本看着只想学一个Vue.js,没想到顺带把ECMAScript6,Webpack配置,ESLint配置,bable配置,npm使用,node.js语法,以后vue全家桶中的vuex,vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫做Webpack配置工程师,从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油,有什么问题也可以在评论区回复,我会抽空补充在文章内容中。谢谢各位的支持!~


    github文章资源地址:我们为什么要用vue,他解决了什么问题,如何使用它?

    我的个人博客:https://blog.52lhd.com

    如果您对我的博客内容有疑惑或质疑的地方,请在下方评论区留言,或邮件给我,共同学习进步。

    邮箱:im.lihaodong@gmail.com

    展开全文
  • vue.js新手入门指南

    千次阅读 2019-07-16 20:32:24
    最近项目需要用到前端的vue框架,而我之前完全没有接触过前端的东西,刚开始搜索vue的相关介绍,...在知乎上搜到了一篇关于vue入门介绍,以问答的形式进行分享的,非常的棒。 原文出处:https://zhuanlan.zhihu.com/...

    最近项目需要用到前端的vue框架,而我之前完全没有接触过前端的东西,刚开始搜索vue的相关介绍,被vue一些全家桶给整蒙了,对于vue,vue-router,vuex,axios还有什么JQuery、Webpack等这么多名词是干什么的,之间是什么关系很不清楚。在知乎上搜到了一篇关于vue入门介绍,以问答的形式进行分享的,非常的棒。
    原文出处:https://zhuanlan.zhihu.com/p/25659025


    这里假设你仅仅只掌握了HTML+CSS+JavaScript,如果你对JQuery这个前端库,以及各种后端模版语言比如说PHP,JSP还有所了解并且使用过的话那就太好了。

    Vue.js是什么?

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
    如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。

    这是官网的介绍,是不是觉得非常的抽象非常的官方?看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?还有最后一段话,“Vue.js 与其它库/框架的区别”究竟是什么?

    不要担心,如果你慢慢看完这里面的所有问答,一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

    Vue.js到底是什么?

    想必现在能看到我这篇文章的人,都是用着APP或者网页版知乎在阅读把。Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

    单页应用程序(SPA)

    顾名思义,单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。

    网页版知乎也可以用JQuery,为什么要用Vue.js?

    讲到JQuery,就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎,那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

    现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

    Vue 的核心库只关注视图层

    我们为什么要把视图层抽取出来并且单独去关注它呢?

    因为在像知乎这种页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,这什么问题呢?

    你是否还记得你当初写JQuery的时候,有写过KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲xxx').parent().…(’#xxx’).parent().parent().parent()可能就会变成$(’#xxx’).parent().parent().parent().parent().parent()了。

    这还不算什么,等以后产品迭代越来越快,修改越来越多,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的,可能到时候打开这个页面,会变得越来越卡,而你却无从下手。

    当你在编写项目的时候遇到了这种问题,你一定会抱怨,为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言,为什么当初学JQuery看中的是它简洁的DOM操作,现在却一点也不觉得它有多简洁,难道我学的是假的JQuery?为什么写个代码这么难,你想砸电脑,你想一键盘拍在产品狗的脑袋上,责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

    这个时候如果你学过Vue.js,那么这些抱怨将不复存在。

    Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?

    因为Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

    可是这些名词都是啥?

    响应式的数据绑定

    这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue.js测试 - 代码之美专栏</title>
    	<!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
    	<script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
    		<hr>
    		<p>{{ message }}</p>
    	</div>
    	<script type="text/javascript">
    		var app = new Vue({
    		  el: '#app',
    		  data: {
    		    message: 'Hello Vue!'
    		  }
    		})
    	</script>
    </body>
    </html>
    

    是不是会发现一个很神奇的现象,文本框里面输入的文字和后面的p标签中的内容一起变化?

    换句话说,p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起,其中变化,另外一个和它绑定的数据就跟着变化。

    结合标题来说,就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

    组件化开发

    还记得在传统前端开发的时候,我们都是每个人做一个页面,然后最后套入各种后端模版引擎,比如说PHP的Smarty或者Java的JSP等等。

    但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

    在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。

    在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

    Virtual DOM

    现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

    而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

    对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

    我到底该怎么用Vue.js做单页应用开发?

    说了这么多,我还是不知道怎么用它做出一个像知乎那样的页面啊,到底怎么学它呢?

    前面我们看了一个响应式的数据绑定案例,那只是一个DEMO,而且也看不出有什么实际意义,离真正的单页应用程序还差得远,到底怎么用它开发真实的项目呢?

    我的建议是,先把官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外,前面几章完全就是把Vue.js当作一个模版引擎来用。

    然后开始学习ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解。

    最后组件部分先大致看一遍,了解组件里面都有哪些概念之后,开始看网上各种实战视频以及文章还有别人开源的源代码。

    在前面你提到过好几次ECMAScript,这是啥?

    ECMAScript听名字好像和JavaScript很像,难不成他们有什么千丝万缕的联系?

    没错你猜对了,他们之间还真有着很深的联系。

    要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版。
    该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。
    因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

    而ECMAScript6就是新一代的JavaScript语言。

    我在学习Vue.js的时候老是听到Webpack,这是啥?

    Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你的HTML文件,以及通过Script标签的src属性引入外部的JS脚本,那么你肯定会对这个工具感到陌生。不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。

    为什么要用Webpack

    前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材和别的第三方库,我们该如何去管理这些东西呢?

    还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?因为单页应用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么请求一个页面的时候,可能浏览器就要发起十多次请求,往往请求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不需要,但是由于HTTP是应用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长,所以需要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP请求,所以head等部分也是共享的,相当于形成了规模效应,让网页展现更快,用户体验更好。

    前面说到Webpack还有构建的功能,这就不得不提到了ECMAScript6这个新版本的JavaScript,但是现在国内外还有很多人用着老版本的浏览器,这些浏览器并不支持ECMAScript6,那么我们的前端项目如何在这种浏览器上运行呢?这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言,这个转换器的名字叫做babel,如果你以后听到或者看到了这个单词,应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass,Less,stylus之类的CSS预处理器,我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

    开头的介绍提到了vue.js可以使用单文件组件开发项目,其实也是通过Webpack将单文件组件中的模版,样式以及JS转换到主页面中

    当然Webpack不止这点功能,它还可以通过安装各种插件来扩展,比如说热加载技术,就是解放键盘的F5键。让我们修改代码,并且按Ctrl+S保存之后,浏览器页面自动刷新变化,不需要我们去手动刷新,还有一些插件可以自动添加注释,自动给CSS代码加上一些浏览器内核对CSS3兼容前缀,就像webkit-xxx之类的一样。

    NPM和Node.js又是什么?它们是什么关系?

    首先讲讲Node.js。我们知道通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的,所以作为一个前端开发,即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

    NPM是一个node.js的包管理器。我们在传统开发的时候,JQuery.js大多都是百度搜索,然后去官网下载,或者直接引入CDN资源,这种方法太过于麻烦。如果以后遇到其他的包,这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系),那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器,直接可以通过

    npm install xxx包名称
    

    的方式引入它,比如说

    npm install vue
    

    就自动在当前项目文件夹下导入了这个包,并且npm自动下载好了vue这个包依赖的其他包。

    至于有的人在按照网上的npm教程配置的时候踩坑了,发现下载速度很慢或者完全下载不了,那是因为我国有着众所周知的原因,网上也有各种解决方法可以解决这个问题,大家多善用搜索引擎。

    前面提到了Webpack可以安装各种插件来扩展功能,其实也是通过这种方式扩展。

    如果你学过PHP的话,NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

    Vue-CLi又是啥?

    它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具,它可以通过

    npm install vue-cli -g
    

    的方式安装,后面的-g表示全局安装的意思,意味着你可以打开命令行之后直接通过vue命令调用它。

    我该不该学Vue.js?

    现在Vue.js无论是发展势头还是作者支持还是很好的,而且它本身中文资料就比较多,教程也很多,现在随随便便打开几个和前端开发有关的知乎专栏,基本上都能见到相关文章,社区也很活跃。

    至于你该不该学,取决于你自己,如果你当前只是做做以内容展示为主的项目,或者就是成天用各种CMS建站仿站,并且以后都不打算更换更好的工作,那么可以暂时不用学。如果你开发的项目交互非常多,而且前后端开发都对前后端分离有很清楚的认识,那么可以大胆的学习,并且在实际项目中运用。

    Vue.js怎么火起来的?

    关于这个问题,网上说法很多,我自己认为主要还是前些年大前端变革太快,而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了,而且已经有了很多中文资料。

    对比它的竞争对手AngularJS,新旧版本项目无法平滑升级,变革太大让用户感觉不安稳。

    而React本身主流推荐用的是JSX,需要额外学习一门语法(什么?学Vue.js还要学ECMAScript6?现在ECMAScript6是趋势,并不是因为Vue.js才要学的),并且React本身用的是render写法编写模版代码,这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应,现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

    当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的,他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

    我在很多地方还看到Vuex和Vue-route,它们又是什么?

    Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

    Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

    要讲清楚这两个东西,又得花费大量篇幅,所以这里只是简单提一下,先学好vue.js本身才是最重要的。

    我还在一些地方看到过Vue-resource和Axios,它们又是什么?

    我们在传统的前后端不分离的开发中,后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发,那么这个单页应用程序中的数据就得通过ajax的方式获取,也要通过ajax的方式提交到后端。

    在传统开发中我们都是通过xmlhttprequest手动操作,或者通过JQuery的ajax方法来进行数据提交获取。

    vue.js本身没有封装ajax操作库,所以我们要通过Vue-resource和Axios来进行ajax操作,而因为种种原因,现在vue.js2.0已经将axios作为官方推荐的ajax库了。

    展开全文
  • Vue 学习入门指南

    2020-10-16 17:49:13
    如果你是一名 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序、异步组件、服务器端渲染等等,或者还听说过与 Vue 有关的一些工具和库,比如 Vuex、Webpack、Vue CLI 和 Nuxt。 那么究竟什么是Vue,有...
  • Vue.js新手入门指南

    2018-01-03 21:39:57
    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。...

空空如也

空空如也

1 2 3 4
收藏数 80
精华内容 32
关键字:

vue新手入门指南

vue 订阅