VUE之组件（基础、分类、命名）及ES6之模板引擎&&字符串模板x-template

VUE之组件（基础、分类、命名）

今天我们来介绍一下组件是什么，它的作用又是什么？

组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。
下面我们通过案例来进行讲解

上图呢是一个很常见的聊天界面，有些标准的控件，输入框，发送按钮，还有关闭按钮等。
大家也知道，在真正的实战项目中，我们有时候可能会遇到这种问题，产品经理要求我们对完成的项目进行更改时我们可能要把整套网站中所有的部分去进行修改，在之前呢，我们都是一个一个去修改，现在我们可以用 Vue.js的组件来修改

Vue.js的组件就是提高重用性的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇随需求。

组件注册

回顾下创建 Vue 实例的方法：

组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。
①全局组件：任何Vue 实例都可以使用
②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）

组件注册-全局

全局注册组件语法：

my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）。

要在父实例中使用这个组件，必须要在实例创建前注册，之后就可以用<组件名></组件名>形式来使用组件了，示例代码如下

此时打开页面还是空白的，因为注册的组件没有任何内容，在组件选项中添加 template（模板）就可以显示组件内容了。

最终渲染为

全局组件注册步骤小结：
①注册组件component并命名
②添加模板template内容
③通过自定义组件名调用组件

template模板语法要求：
template的 DOM 结构必须被一个元素包含， 如果直接写成 “这里是组件的内容”， 不带“

”等根元素是无法渲染的。

组件命名

定义组件名的方式有两种：kebab-case和PascalCase
（1）kebab-case短横线分隔命名

当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用/调用这个自定义元素时使用 kebab-case，例如 。
（2）PascalCase首字母大写命名即大驼峰
当使用 PascalCase (首字母大写命名) 定义组件，在html文档里引用时必须使用kebab-case短横线分隔命名才生效，否则报错（原理：HTML对大小写不敏感、JS对大小写敏感）。

组件注册-局部

在Vue 实例中，使用 components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。
组件中也可以使用components 选项来注册组件，使组件可以嵌套。
由上例可以看出，组件components添加模板component有两种方式
①直接绑定添加
②指向已有模板对象

全局VS局部

全局注册组件通过Vue.component语法，全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中。

全局注册有时是不够理想，例如即便你已经不再使用一个组件了，它仍然会被包含在最终的构建结果中，影响性能。
注意：局部组件只有在当前实例作用域下有效

组件注册-局部

局部组件也可以同时注册多个，引用时一一对应即可

组件嵌套

组件也可以嵌套其他组件

全局VS局部

（1）注册引用步骤
①全局组件：在创建实例前注册，注册后即可直接引用

②局部组件：在components选项内注册

（2）作用域
全局组件：全局都可以直接引用
局部组件：只有在当前实例作用域下有效

HTML文档限制||DOM解析限制

Vue组件模板在某些情况下会受到 HTML 的限制，比如

内规定只允许是、

、	等表格元素，所以内直接使用组件是无效的。 方案：可以使用特殊的is属性来挂载组件。 tbody在渲染时会被替换为组件的内容。常见的限制元素还有 解析 DOM 模板时的注意事项

需要注意的是如果从以下来源使用模板的话，HTML文档限制是不存在的：
①组件字符串模板 (例如：template: ...)
②单文件组件 (.vue)，后序课程工程化讲解
③

组件选项-data数据项

除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods 等。
但是在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。

组件选项-数据选项与复用

JS对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步，如下所示。
（引用关系，会产生浅拷贝，互相影响）

组件使用了3次，但是点击任意， 3个的按钮的数字都会+1 ，这是因为组件 data引用的是外部的对象。
这肯定不是我们期望的效果，所以接下来给组件返回一个新的data 对象来独立

这样，点击每个按钮就互不影响了，完全达到复用的目的。
当点击按钮时，每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。

总结

（1）注册位置：全局组件必须在实例化之前注册，局部组件需要在components选项内注册。
（2）作用域：全局组件：全局都可以直接引用；局部组件：只有在当前实例作用域下有效。
（3）HTML文档限制：组件模板在某些情况下会受到 HTML 的限制，使用特殊的is属性来挂载组件。
（4）除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods 等。但是在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。
（5）组件复用：可以将组件进行任意次数的复用。
（6）data选项再次强调：组件的data 并不是像原来一样直接提供一个对象，取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
（7）因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

ES6之模板引擎&&字符串模板x-template

在js里面，经常需要使用js往页面中插入html内容
字符串模板

<input type="button" id="btn" value="点击显示" />
    <div id='showArea'></div>
    <script type="text/template" id="showContent">
        <div class="prompt">
            <div class="promptHeader">内容头</div>
            <div class="promptbody">内容主体</div>
            <div class="promptfooter">内容底部</div>
        </div>
    </script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#showArea").html($("#showContent").html());
            });
        });
    </script>

中根元素必须只能有一个

原因：
因为template定义的模板，一定要用一个根元素包裹起来，每个组件必须只有一个根元素，比如上例中，如果去掉< div>标签，那么就相当于有多个根元素。
小结：
（1）type="text/template"相当于定义一个模板，如果没有使用html()方法的话，是显示不出来的

JS模板引擎template.js

简介：
template.js&&template-web.js，这是一个模板引擎，简单来说就是构建一个模板，让其生成html的js代码。
提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果

使用步骤：
简要步骤就是：
1.制作模板；2、获取数据
3.将数据插入模板中 ；4.将模板插入html代码中
语法：
（1）使用
引用简洁语法的引擎版本，例如
（2）表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式
（3）输出表达式
对内容编码输出： {{content}}
不编码输出： {{#content}}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击
案例：
1、制作模板

  <!-- 1、制作模板 -->
    <div id="wp"></div>
    <script id="tpl" type="text/html">
        <ul>
            <%for(var i in items){%>   
                <li>name:<%=items[i].name%>    val:<%=items[i].val%></li>
            <%}%>
        </ul>
    </script>

2、获取数据

 /* 2、获取数据 */
    var data={
        items:[
            {'name':'名字一','val':'数据一'},
            {'name':'名字二','val':'数据二'},
            {'name':'名字三','val':'数据三'},
            {'name':'名字四','val':'数据四'}
        ]
    }

3.将数据插入模板中

  /* 3.将数据插入模板中  */
    var tplInnerHTML = document.getElementById('tpl').innerHTML;
    var html = template(tplInnerHTML,data);

4.将模板插入html代码中

   /* 4、将模板插入html代码中 */
    document.getElementById('wp').innerHTML = html;

JS模板引擎template.js优势

优势：
1、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
2、支持运行时调试，可精确定位异常模板所在语句
3、对 NodeJS Express 友好支持
4、支持预编译，可将模板转换成为非常精简的 js 文件
5、支持所有流行的浏览器

其他JS模板引擎

拓展：
除了本节所讲template-web.js外，前端开发常用的模版引擎还包含Handlebars和Mustache
其实就是模板化，这是以前就开始推崇的面向数据编程的一个方式。比如jquery template
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用，性能问题现在逐渐被替代，了解即可，面试常问。

JS模板引擎template.js

（1）artTemplate模板引擎
artTemplate是新一代JS模板引擎，它在v8中的渲染效率可接近JS性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试)，artTemplate的模板还支持使用自动化工具预编译。
（2）分类
artTemplate的库分为两种，一个是template.js(采用"{{ }}")，另外一个是template-native.js(采用"<%= %>")；第一个是简洁语法版，第二个是原生语法(感觉像JSP)版，两个库的语法不可混用，否则会报错。
（3）原理
提前将Html代码放进一个中，当需要用到时，在js里这样调用:var htmlstr = template(“test”,放Json数据或其他)，然后$("#*").html(htmlstr)，最后放进去就好
（4）功能概述
提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果
（5）代码包限制
template.js包不支持简化写法；只能用<% %> ,template-web.js简洁和原始语法都可以。