![b3ea0be115d9cff228b887cf5c619b9f.png](https://i-blog.csdnimg.cn/blog_migrate/0e377d7962f76e621175ecfb54ff3449.jpeg)
前言
此篇为Vue正式入门学习开始时的小TIPS
两个版本??
是的,著名的Vue是有两种版本的——vue.js和vue.runtime.js,它们分别对应了Vue的完整版和非完整版,最重要的区别就是前者包含了compiler而后者并没有。因此,在文件大小上,后者比前者要小上30%,保证了用户体验。
当然,这也并不是说开发者就一定要使用完整版的Vue。开发者也可以通过与vue-loader的配合来进行把html内容转化为h函数的过程,也就是写在render函数内。
template和render
template是一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。而render则是上文中对应的在Vue实例中进行模板渲染的函数。
具体用法:
new Vue({
el: "#app",
data: {
name: "Troy",
},
template: `<div>hello${this.name}</div>`,
render: (h) => h(App),
});
A Useful Tool
http://codesandbox.io是一个很适合编程者的网站,只要用户没有注册过,理论上可以在该站点上创建无数个代码项目。对应的,网站上有许多对应语言与库的项目。Vue当然也包含在其中,只要像如下步骤进行操作即可:
1、先进入该网站;
2、点击‘Create a Sandbox, it's free':
![f249b152a11389fa3fac1c45c44d9266.png](https://i-blog.csdnimg.cn/blog_migrate/cbdc5551dcee4dcfc23464432a4cfe83.png)
3、选择你想要进行创建的代码项目(这里选择的是Vue):
![077b6be78450112b36a09bec789e3f39.png](https://i-blog.csdnimg.cn/blog_migrate/a498390a67e15166a4927635febcd41f.jpeg)
4、创建成功!
![ff91dce093aabae27ae207dd2871f581.png](https://i-blog.csdnimg.cn/blog_migrate/c7358a82e18e7c6def344a91d875195b.jpeg)