创建一个Vue实例
Vue一共有两种模式,分别为完整版和非完整版,一般使用非完整版,更加灵活而且更独立。
以Vue 2.0为例,完整版cdn引入
后缀为vue.min.js的文件
非完整版引入
后缀为vue.runtime.min.js的文件
两种模式的用法
根据MVC模式,这两种模式的view模块所在的区域有明显区别。
//在完整版中,view模块存在于页面中的template标签中或者html标签中,可以直接在页面中改变view视图,其原因是完整版自带编译器
//html这样写
<body id ='app'>{{n}}</body>
//在引入html的js中可以这样写
new Vue({
el: '#app',
data: {
n:0
}
})
//这样页面中的n就变成了0
//在非完整版没有编译器存在的条件下,view模块存在于render函数中。开发者在页面中写的html会被webpack的vue-loader加载成h函数。
//js中这样写
new Vue({
el: '#app',
render(h) {
return h(demo)
}
})
非完整版使用vue-loader将index.html中的html标签全部替换,原html标签中的内容会全部被覆盖,因此它是SEO(搜索引擎优化)不友好的一种方法。解决方法是先把title等标签写好。
在线创建Vue项目
使用codesandbox.io
- 进入官网
- 点击‘start coding for free’
- 点击vue等待配置即可。写完的项目可以点左上角导出成压缩文件。