# test-blog

**Repository Path**: wujiegis/test-blog

## Basic Information

- **Project Name**: test-blog
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-22
- **Last Updated**: 2021-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  深入分析Vue两个版本

vue有两个版本,分别是完整版和非完整版

完整版, 需要编译器, 用HTML得到视图, 或者写在template选项里, 从cdn引入vue.js, 用webpack引入需要配置alias, 用@vue/cli 引入需要额外配置
非完整版, 不需要编译器, 视图写在render函数里, 用h来构建标签, 从cdn引入vue.runtime.js, 用webpack引入默认使用这版, 用@vue/cli 引入默认使用这版
使用完整版, 将视图写在template:
```
new Vue({
  el: '#app',
  data: {
      n: 0
  },
  template: `<div>{{n}}<button @click="add">+1</button></div>`,
  methods: {
    add(){
      this.n += 1
    }
  }
})
```
使用非完整版, 将视图写在render函数:
```
new Vue({
  el: '#app',
  render (h) {
    return h('div', [this.n, h('button', {on:{click:this.add}}, '+1')])
  },
  data: {
      n: 0
  },
  methods: {
    add(){
      this.n += 1
      console.log('ggg')
    }
  }
})
```
上面两种方法都有各自的缺点, 使用完整版, 因为需要编译器, 占用内存比较大, 而使用非完整版用h来构建标签很不方便.

除了以上两种, 还有一种方法是使用vue-loader, 可以把.vue文件翻译成h构建方法, 如下
demo.vue
```
<template>
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default  {
  data: {
      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)
  }
})
```
这第三种方法解决了上面两种方法的缺点, 使用了vue.runtime.js减小了文件体积, 直接在.vue文件里写html标签更加方便

这种方法有个缺点是SEO不友好

用 http://codesandbox.io 写 Vue 代码
进入codesandbox.io, 不要登录, 登录后只能创建50个项目, 不登陆可以创建无数个项目