初探Vue之两种模式

161 阅读1分钟

创建一个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

  1. 进入官网
  2. 点击‘start coding for free’
  3. 点击vue等待配置即可。写完的项目可以点左上角导出成压缩文件。 image.png