Vue 两个版本的区别
| Vue完整版 | Vue非完整版 | 评价 | |
|---|---|---|---|
| 特点 | 有compiler | 没有compiler | compiler占40%体积 |
| 视图 | 写在htm里或者写在template选项 | 写在render函数的，用h来创建标签 | h是尤雨溪写好传给render的 |
| CDN引入 | vue.js | vue.runtime.js | 文件名不同，生成环境后缀为min.js |
最佳实践：总是使用非完整版，然后配合vue-loader和vue文件。
template用法
在xxx.vue文件里写
<template>
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
export default {
name: "Demo",
data(){
return {
n: 0
}
},
methods:{
add(){
this.n += 1
}
}
}
</script>
<style scoped>
.red{
color: red;
}
</style>
然后在main.js里写
import Demo from "./Demo";
new Vue({
el: '#app',
render(h){
return h(Demo)
}
})
被选为挂载点的这个标签div#app会被替代为<template>标签里的内容。
render用法
render 函数即渲染函数，它是个函数，render 函数的返回值是VNode（即：虚拟节点，也就是我们要渲染的节点）createElement 是 render 函数的参数，它本身也是个函数，并且有三个参数。
createElement 第一个参数是必填的，可以是String | Object | Function String，表示的是HTML 标签名Object ，一个含有数据的组件选项对象Function ，返回了一个含有标签名或者组件选项对象的async 函数。
createElement 第二个参数是选填的，一个与模板中属性对应的数据对象 常用的有class | style | attrs | domProps | onclass：控制类名style ：样式attrs ：用来写正常的 html 属性 id src 等等domProps :用来写原生的dom 属性on:：用来写原生方法。
createElement 第三个参数是选填的，代表子级虚拟节点 (VNodes)，由createElement()构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的。
如何用codesandbox.io写Vue代码
-
如果登录只能创建50个项目，不登录可以创建无数个:)
-
进入网站后点击 Create a Sandbox it's free 创建项目；
-
选择你要创建的项目模板类型即可进入编程；
-
做完一个项目的时候可以通过file目录找到Export to ZIP导出你的文件，以压缩包的形式。
