一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$有1~3位小数的正实数：^[0-9]+(\.[0-9]{1,3})?$非零的正整数：^[1-9]\d*$或^([1-9][0-9]*){1,3}$或^\+?[1-9][0-9]*$非零的负整数：^\-[1-9][]0-9"*$或^-[1-9]\d*$非负整数：^\d+$或^[1-9]\d*|0$非正整数：^-[1-9]\d*|0$或^((-\d+)|(0+))$非负浮点数：^\d+(\.\d+)?$或^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$或^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$或^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$或^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$浮点数：^(-?\d+)(\.\d+)?$或^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$校验字符的表达式汉字：^[\u4e00-\u9fa5]{0,}$英文和数字：^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$长度为3-20的所有字符：^.{3,20}$由26个英文字母组成的字符串：^[A-Za-z]+$由26个大写英文字母组成的字符串：^[A-Z]+$由26个小写英文字母组成的字符串：^[a-z]+$由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$由数字、26个英文字母或者下划线组成的字符串：^\w+$或^\w{3,20}$中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$或^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+禁止输入含有~的字符：[^~\x22]+三、特殊需求表达式Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?InternetURL：[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}电话号码正则表达式（支持手机号码，3-4位区号，7-8位直播号码，1－4位分机号）:((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$日期格式：^\d{4}-\d{1,2}-\d{1,2}一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$钱的输入格式：有四种钱的表示形式我们可以接受:"10000.00"和"10,000.00",和没有"分"的"10000"和"10,000"：^[1-9][0-9]*$这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是"10"和"10.2"是通过的：^[0-9]+(.[0-9]{2})?$这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$中文字符的正则表达式：[\u4e00-\u9fa5]双字节字符：[^\x00-\xff](包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))空白行的正则表达式：\n\s*\r(可以用来删除空白行)HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*?/>(首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$)(可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)腾讯QQ号：[1-9][0-9]{4,}(腾讯QQ号从10000开始)中国邮政编码：[1-9]\d{5}(?!\d)(中国邮政编码为6位数字)IPv4地址：((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}
方式一：修改php.ini配置打开php.ini文件，设置display_errors=Onphp.ini相关设置说明：error_reporting=E_ALL;显示所有错误display_errors=Off;关闭错误提示log_errors=On;错误日志开启log_errors_max_len=1024;设置日志最大长度error_log=/usr/local/error.log;错误日志文件位置方式二：添加下方代码：<?phpini_set("display_errors","On");//打开错误提示ini_set("error_reporting",E_ALL);//显示所有错误?>error_reporting错误级别：E_ALL-所有错误和警告（包括PHP5.4.0中的E_STRICT）E_ERROR-致命的运行时错误E_RECOVERABLE_ERROR-几乎致命的运行时错误E_WARNING-运行时警告（非致命错误）E_PARSE-编译时解析错误E_NOTICE-运行时通知（这些通常是警告，从您的代码中的错误，但它可能是故意的（例如，使用未初始化的变量和赖于它自动初始化为一个事实空字符串）E_STRICT-运行时通知，允许PHP建议更改您的代码将确保最佳的互操作性,并转发代码的兼容性E_CORE_ERROR-PHP初始启动期间发生的致命错误E_CORE_WARNING-PHP期间发生的警告（非致命错误）,初次启动E_COMPILE_ERROR-致命的编译时错误E_COMPILE_WARNING-编译时警告（非致命错误）E_USER_ERROR-用户生成的错误消息E_USER_WARNING-用户生成的警告消息E_USER_NOTICE-用户生成的通知消息E_DEPRECATED-警告代码在将来的PHP版本中不起作用E_USER_DEPRECATED-用户生成的弃用警告error_reporting最常见的几种设置：E_ALL（显示所有错误，警告和通知，包括编码标准。）E_ALL&~E_NOTICE（显示所有错误，通知除外）E_ALL&~E_NOTICE&~E_STRICT显示所有错误，通知和编码标准警告除外。）E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR（仅显示错误）来源：https://blog.csdn.net/qq15577969/article/details/107199679
概述重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。代码展示123456789101112131415161718192021/*reset*/html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}table{border-collapse:collapse;border-spacing:0;}caption,th{text-align:left;font-weight:normal;}html,body,fieldset,img,iframe,abbr{border:0;}i,cite,em,var,address,dfn{font-style:normal;}[hidefocus],summary{outline:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6,small{font-size:100%;}sup,sub{font-size:83%;}pre,code,kbd,samp{font-family:inherit;}q:before,q:after{content:none;}textarea{overflow:auto;resize:none;}label,summary{cursor:default;}a,button{cursor:pointer;}h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}del,ins,u,s,a,a:hover{text-decoration:none;}body,textarea,input,button,select,keygen,legend{font:12px/1.14arial,\5b8b\4f53;color:#333;outline:0;}body{background:#fff;}a,a:hover{color:#333;}使用方法通过右键另存为下载reset.css(2012-11-15)，直接使用或将代码复制到你的css文件顶部。来源：http://nec.netease.com/framework/css-reset.html
Linux默认没有dns缓存，所以当Linux使用一些要求查询dns服务较多的场景下，就会造成延时高，或者无法查询的可能性。安装nscd可以解决这个问题。阿里云的服务器一般默认有安装，并且已经配置好了，直接开启即可如果没有安装yum安装：yuminstallnscd-yapt-getinstall-ynscdnscd的配置文件默认路径为/etc/nscd.conf。启动NSCD进程servicenscdstart加入自启动chkconfignscdon查看进程psaux|grepnscd查看统计信息nscd-g重启servicenscdrestart有一些服务器没有安装nscd的可以进行安装配置：配置可以参考以下资料：https://blog.csdn.net/weixin_36995644/article/details/82838800https://www.cnblogs.com/chai-/p/10520891.htmlhttps://www.cnblogs.com/EasonJim/p/10014517.htmlhttps://blog.csdn.net/zzhongcy/article/details/89089404https://blog.csdn.net/weixin_34217773/article/details/91494353
如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。好了，开始吧准备首先，以下几点希望你已经知道或者做到了:你会用html+css+javascript写一些网页你知道什么是DOM和BOM(BrowserObjectModel)你知道Vue.js是一个框架而不是一个新语言你会用百度或者Google其中之一去查找答案接着，我会围绕以下几个Vue.js的基本（核心）使用方法逐个做测试和使用说明：新建vue对象数据绑定事件绑定表单控件绑定最后，根据上面的知识点结合起来写出我们的第一个vuejs前端页面新建Vue对象引用vue.js在桌面建立一个Vue.html文件,然后引入vue.js的CDN地址https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js<scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>新建Vue实例在Vue.html中插入一个id为firstVue的<div><divid="firstVue"></div>在Vue.html中插入下面js代码:<scripttype="text/javascript">varmyVue=newVue({el:"#firstVue"})</script>然后整个代码看起来是这样的:<!DOCTYPEhtml><html><head><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><divid="firstVue"></div></body><scripttype="text/javascript">varmyVue=newVue({el:"#firstVue"})</script></html>解释一下代码js变量myVue就是Vue创建的一个对象，可以理解成把<divid="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象，这个对象就是myVueel是Vue的保留字，用来指定实例化的DOM的ID号,#firstVue这句话就是标签选择器，告诉Vue要实例化ID=“firstVue”的这个标签。至此，Vue.js框架在html页面的引入工作完成，但是如果我们访问这个页面并不能看到任何效果,一篇空白数据绑定VUE这个框架的数据流向是单向的，不懂没关系，记住就好了所以数据绑定后的数据流向是从vue实例——>DOM文档的我们给上一步的<div>标签添加下面一句话{{my_data}}变成这样<divid="firstVue">{{my_data}}</div>这个双大括号的语法叫做mustache语法，大括号里面的是作为变量形式出现的。然后在创建vue实例的代码中加入下面数据声明:data:{my_data:"test"}整个代码看起来向下面这样:<!DOCTYPEhtml><html><head><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><divid="firstVue">{{my_data}}</div></body><scripttype="text/javascript">varmyVue=newVue({el:"#firstVue",data:{my_data:"test"}})</script></html>data参数用来绑定VUE实例的数据变量，每个不同变量之间用逗号分隔，上面我们绑定了自定义变量my_data，并赋初值'test'完成数据绑定工作，<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动，浏览器查看当前页面,会出现'test'字符串，说明数据绑定成功这是在HTML标签内部的数据绑定，那么如果想绑定某个HTML标签的属性值，就要用到v-bind:属性了，比如我想绑定一个标签是否可见的属性(hidden)，那么就应该这么写:<divid="firstVue"v-bind:hidden="my_hidden">{{my_data}}</div>v-bind:后面写想要绑定的属性，my_hidden也不需要用两个大括号括起来了，直接写就可以了，然后在VUE实例中声明这个绑定数据varmyVue=newVue({el:'#firstVue',data:{my_data:"test",my_hidden:"hidden"}})这时候再浏览这个网页,又变成了空白，但是F12查看源代码，发现其实是div标签的hidden属性被激活了当然，v-bind:不仅可以绑定hidden属性，disabled属性，style属性,color属性，凡是标签有的属性，都可以通过这个方法进行绑定v-bind由于经常会用到，所以也可以缩写成冒号:，比如上面的<div>标签就完全可以这样写<divid="firstVue":hidden="my_hidden">{{my_data}}</div>这是和v-bind:hidden="my_hidden"完全等价的一种写法至此，Vue.js两种绑定数据的方法都写完并进行了测试事件绑定v-bind:是用来绑定数据的，v-on:则是用来绑定事件的，比如我要绑定一个<button>的click事件就这么写<buttonv-on:click="clickButton()">ClickMe</button>当然这里的click可以换成任意一个html事件，比如load,doubleclick,mouseon,mousedown这些，不过click肯定是我们最常用的将click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methodsvarmyVue=newVue({el:'#firstVue',data:{my_data:"test",my_hidden:"hidden"},methods:{clickButton:function(){this.my_data="Wow!I'mchanged!"}}})我们在methods关键字里面定义了clickButton方法，并在方法内改变了之前定义的my_data变量的值这里涉及到如何在vue实例中引用data字段的变量，如上所示，需要加this后面直接写要引用的变量就可以了如果不加this，系统会默认你想引用的是一个全局变量，可是这里我们需要引用的是这个vue实例里的局部变量现在整体代码和之前有些变化，看起来是这样的：<!DOCTYPEhtml><html><head><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><divid="firstVue"><buttonv-on:click="clickButton">ClickMe</button><p>{{my_data}}</p></div></body><scripttype="text/javascript">varmyVue=newVue({el:'#firstVue',data:{my_data:"test",my_hidden:"hidden"},methods:{clickButton:function(){this.my_data="Wow!I'mchanged!"}}})</script></html>好了，运行一下，点击ClickMe的时候"test"就会变成"Wow!I'mchanged!"，这是因为变量my_data的改变。另外，v-on:语法同样有一个缩写@，比如v-on:click="clickButton"就等价于@click="clickButton"表单控件绑定之前有说Vue这个框架是单向数据传输的，就是从vue实例传送数据到DOM，那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢这用到了Vue.js提供给用户的一个语法糖v-model,这个语法糖通过两步实现了数据的反向传递，也就是从DOM传送给vue实例数据。下面说的原理看不懂可以跳过，不会影响后续阅读v-model通过两步实现了数据反向传递第一步，绑定了DOM标签的input事件(比如叫tapInput())第二步，当用户进行输入时候，触发tapInput()函数，tapInput()函数内部读取此DOM标签的Value值，赋值给vue实例通过以上两步，v-model语法糖实现了vue数据的反向传输好，直接写一个例子吧<!DOCTYPEhtml><html><head><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><divid="firstVue"><inputtype="text"v-model="my_data"/><buttonv-on:click="clickButton">ClickMe</button><p>{{my_data}}</p></div></body><scripttype="text/javascript">varmyVue=newVue({el:'#firstVue',data:{my_data:"test",my_hidden:"hidden"},methods:{clickButton:function(){this.my_data="Wow!I'mchanged!"}}})</script></html>可以发现，我们增加了一个<input>标签，并且用v-model语法绑定了之前定义的变量my_data这个时候，当我们在<input>输入框输入值的时候，v-model会实时将最新值(value)赋值给vue实例的my_data变量，而my_data变量又将实时展现在<p>标签中这样我们看起来实现了这么一个数据流:DOM1(input标签)——>VUE——>DOM2(p标签)先从用户输入的DOM1获取输入保存在VUE实例，用从VUE实例里拿到数据输出到DOM2运行这个页面，发现<p>标签中的内容会随着<input>标签实时的变化，说明我们利用v-model语法变相实现了数据的双向传递总结看看我们学到了什么用newVue({})新建vue实例使用v-bind:和{{}}双大括号语法在html中绑定变量使用v-on:和@语法绑定函数到标签的事件使用v-model:语法使用户的页面输入反向传递回vue实例变量现在简单完善一下上面的代码，做成一个计数器程序，用户可以在输入框输入任意数字，点击按钮进行总数累加下面是对刚才代码进行了一些小的改动，相信你一定可以看明白的<!DOCTYPEhtml><html><head><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script></head><body><divid="firstVue"><inputtype="number"v-model.number="my_step"/><buttonv-on:click="clickButton">Add</button><p>{{my_total}}</p></div></body><scripttype="text/javascript">varmyVue=newVue({el:'#firstVue',data:{my_step:1,my_total:0},methods:{clickButton:function(){this.my_total=this.my_total+this.my_step}}})</script></html>上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型，因为默认是string类型，所以要多这么一句。本文算是vue的基础内容，下一篇将会是vue的核心内容，组件。前端的东西多且杂，东拼西凑总也不是进步的办法，我认为最好就是将主干的一支学明白用在实际项目中，其他的一些枝枝叉叉遇见了现看文档也是来得及的，比如我每次FLEX布局都要现查语法，甚至写前端页面的时候总是开着VUE的官方文档随时查看-囧-我会写出一个用Vue.js构建SPA(SinglePageApplication)的系列文章,希望可以让初学、转学VUE的人少走弯路一基础以上是VUE组件的官方定义，让我说的直白一点，比如<button>Click</button>这个html的按钮就可以理解为一个组件，因为这么写就会展示出一个按钮在界面。那么如果我写<button-demo>Click</button-demo>界面就不会有任何显示，因为浏览器不认识这个<button-demo>这个组件，html语法没有定义。那么VUE的组件使我们有能通过现有的浏览器认可的组件自定义一个像是<button-demo>这样的组件的显示方式和内部运行逻辑。举个栗子：Vue.component('button-demo',{template:'<button>Hellohere!</button>'})通过Vue注册一个叫做'button-demo'的组件，这个自定义组件是由<button>Hellohere!</button>组成的。可以这么理解，注册了'button-demo'以后，<button-demo></button-demo>就等价于<button>Hellohere!</button>看一下演示效果这里需要注意下，通过Vue注册的组件只能在Vue的注册范围内用，就像演示里面一样，必须要<divid="app"></div>里面用。二进阶VUE组件当然不可能就只能组合组合html标签，每一个VUE组件对相当于一个VUE实例，在组件内可以定义方法，数据，甚至可以引用其他组件//定义button-counter组件Vue.component('button-counter',{//定义数据data:function(){return{count:0}},//定义方法methods:{clickAdd:function(){this.count++}},template:'<button@click="clickAdd">Youclickedme{{count}}times</button>'})看一下演示效果这里需要注意的是data并不是像这样直接提供一个对象：data:{count:0}取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝（看不懂记住就好，以后慢慢理解）：data:function(){return{count:0}}三全局注册与局部注册上面我们注册的是全局组件，也就是在整个VUE根实例中注册的，也可以理解为调用了VUE的静态方法注册的，这样注册的组件是可以在任何VUE实例中使用的。不过这样也会带来作用域冲突的麻烦，比如我分别注册了一个前端HOME组件和一个后端ADMIN组件，又想注册两个HEAD组件分别用在HOME和ADMIN组件里面，代表前台后台不同的页头，这时候如果是全局注册为了区分不同的HEAD组件，我可能就需要为他们起两个名字，分别叫HOME_HEAD和ADMIN_HEAD。但是局部组件注册就允许用户把自定义组件的作用域限制在父级VUE实例中：//component-a是一个全局组件Vue.component('component-a',{template:'<div><p>这里是全局组件</p><component-b></component-b></div>',//使用components在父组件中注册局部组件components:{'component-b':{template:'<button>这是一个局部组件</button>'},}})可以看到，我们把在component-a组件里使用了关键字components注册了一个局部组件component-b并且嵌入了component-a的模板语法中。完整代码四注意问题单个根元素注意上面局部组件的那个例子，全局组件component-a的模板字符串是被一个<div>标签完全包裹起来的，是因为VUE规定每个组件必须只有一个根元素，所以不管你的组件由多少子元素组成，最外层都只有有且只有一个元素。合理组织代码结构同样是局部组件的那个例子，如果向下面这样写会不会更清楚明白一些：//定义component-b组件变量component-b={template:'<button>这是组件B</button>'}//定义component-a组间变量，并引用component-a变量component-a={template:'<div><p>这是组件A</p><component-b></component-b></div>'components:{'component-b':component-b}}//在Vue实例中注册component-a局部组件//虽然component-a实在Vue实例中注册，但是如果此Vue实例//是整个程序的跟实例，那也component-a也相当于进行了全局注册newVue({el:'#components-demo',components:{'component-b':component-a}})上面的代码将每个组件的代码赋值给了不同的变量，这样如果某个组件有变化，只用修改相应的变量，而不需要修改所有引用此变量的方法，实现了松耦合的编程思想。特殊元素特殊对待有些HTML元素，诸如<ul>、<ol>、<table>和<select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如<li>、<tr>和<option>，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：<table><blog-post-row></blog-post-row><!--table元素中只允许包含<th>,<tr>等元素--></table>这个自定义组件<blog-post-row>会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的is特性给了我们一个变通的办法：<table><tris="blog-post-row"></tr></table>这样<blog-post-row>这个自定义组件就会正常渲染。如果你使用单文件组件的话(就是.vue后缀的文件)，这一条可以忽略总结作为一个轻量级的JS前端框架，我认为这两章的内容就已经涵盖使用VUE最核心的语法和思想了。还是那句话，学习一个框架，最有效的方法就是实践，不需要把所有文档看一个遍再去写程序，因为真正写程序的时候，你还会翻看无数遍框架文档。直到现在，我在写VUE程序的时候，左边的屏幕是编辑器，右边的屏幕就是VUE的官方文档。数据绑定事件绑定用户输入获取组件定义和使用上面四大知识点已经足够支撑我们写出一个差不多的VUE程序了。转载：https://www.jianshu.com/p/5d0d913d2453视频教程：https://learning.dcloud.io/