Vue 两个版本的区别和使用方法

两个版本对应的文件名

  1. 完整版的 vue.min.js

特点:有compiler, 视图:写在HTML里面或者template选项,cdn引入:vue.js, webpack引入:需要配置 alias, @vue/cli:需要额外配置

script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>`

  1. 不完整版的 vue.puntime.min.js

特点:没有compiler, 视图:写在render函数里 用h创建标签,cdn引入:vue.runtime.js,webpack引入:默认使用非完整版,@vue/cli引入:默认使用非完整版
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.runtime.min.js"></script>

  1. 评价:完整版比非完整版大40%左右的体积,总是用非完整版,然后配合vue-loader和vue文件

template 和 render 怎么用

  1. template 的使用

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,

<div id="app>  
    {{n}}
<div>

new Vue({
    el: '#app',
    template: `
        <div>{{n}}</div>
    `
    data:{
     n: 0
    }
 // 页面就会显示 0 

 

2.render
非完整版,配合vue-loader 和 vue 文件

// 创建 Demo.vue 文件
    <template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            n:0
        }
    },
    methods:{
        add(){
            this.n +=1
        }
    }
}
</script>
<style scoped>
.red{
    color: red;
    }
</style>

// 引入 Demo 文件
import Demo from './Demo.vue'

new Vue({
    el: 'app',
    render(h){
        h(Demo)
    }
    
 

Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

createElement这个函数中有3个参数

第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数

第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类

第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的

教读者如何用 codesandbox.io 写 Vue 代码

  1. 打开 codesandbox.io/ 不登录可以创建很多文件 登录的话只能创建50个

  2. 点击Create SandBox 选择Vue

image.png

还可以下载到本地,下载解压包即可

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/12559.html

发表评论

登录后才能评论