浅谈VUE

1-Vue 两个版本的区别和使用方法？
 
Vue完整版
Vue非完整版
原因
特点
有complier
没有complier
complier(编译器)占了40%的体积
视图
卸载HTML里或者写在template选项里
写在render函数里用h来创建标签
 h是Vue内置好传给render的
cdn引入 vue.js
vue.runtime.js
文件名不同，生产环境使用的后缀为.min.js（压缩版）
webpack引入
需要额外配置alias
默认使用此版
 vue内置的
@vue/cli引入
需要额外配置
默认使用此版
 vue内置的
 
推荐：使用非完整版，然后配合vue-loader和vue文件
原因：
    1、保证用户体验，用户下载的JS文件体积更小，但只支持h函数
    2、保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
    3、vue-loader把vue文件里的HTML转为h函数
 
 
2-template和render怎么用？
 
template ：HTML的方式渲染
render  ：js的方式渲染
 
render(提供) 是一种编译方式
render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后通过render进行解析。
 
h：就是 createElement()方法，createElement(标签名称，属性配置，children)
 
template 也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。
 
区别：
render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
template 是类似于html一样的模板来进行组件的封装
render 的性能比template 的性能好很多
render 函数优先级大于template 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h-title level="1">标题</h-title>
        <h-title level="2">标题</h-title>
        <h-title level="3">标题</h-title>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        Vue.component("h-title",{
            /*   template渲染   */
            // template:`
            //     <div>
            //         <h1 v-if="level==1"><slot></slot></h1>    
            //         <h2 v-else-if="level==2"><slot></slot></h2>    
            //         <h3 v-else-if="level==3"><slot></slot></h3>    
            //     </div>
            // `,
            
            /*   render渲染   */
            render:function(h){
                // createElement(标签名称,属性配置,children)
                return h("h"+this.level,
                    {
                        attrs:{
                            "data-id":10
                        }
                    },
                    // 相当于<slot></slot>标签接收
                    this.$slots.default
                )
            },
            props:{
                level:{
                    type:String
                }
            }
        });
        let vm=new Vue({
            el:"#app"
        });
    </script>
</body>
</html>

 

3-如何用 codesandbox.io 写 Vue 代码？

建一个vue沙箱
 
标签对应
 
 
 

 

posted @ 2021-02-21 23:42  蛰鸣  阅读(51)  评论(0)    收藏  举报