vue 将字符串最后一个字符给替换_初尝VUE

VUE的两个版本

VUE分为完整版（vue.js）和非完整版（vue.runtime.js）

二者的区别在于完整版的VUE（vue.js）会包含一个编译器，由于这个编译器的存在，完整版VUE（vue.js）的体积会比非完整版VUE（vue.runtime.js）大40%左右

那么，这个编译器的存在会对两个版本的开发方式有什么影响呢？

通常，我们会在html或template中写视图，在js中控制视图上的数据或元素的变化。

由于可能会存在复制的标签结构等，我们不能把数据简单的用replace替换掉，所以这个时候就要用到编译器来把模板字符串编译成JavaScrip渲染函数的代码

但是，这里就出现了一个问题，非完整版VUE（vue.runtime.js）本身是没有编译器的，由于无法编译，按常规的开发模式在非完整版上是会报错的。

那么，这要如何解决呢？

非完整版VUE提供了一个render方法来渲染视图

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

这种方式带来了一个弊端就是，使用这种方式创建视图是非常影响开发体验，所以VUE给出了一个解决办法：使用单文件组件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后直接在js文件中引入这个单文件即可：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

总结一下，非完整版会配合VUE文件和一个叫做vue-loader的加载器（代替开发者将vue文件中的HTML转义成‘h函数’）来代替拥有编译器的完整版

有人会问，完整版好像看起来更简单，为什么还要用更复杂的非完整版呢？因为非完整版的优点在于：

1. 代码集中，便于管理和维护
2. 可复用性高，可以直接移动到新项目中
3. 大大减少体积

所以这里建议总是使用非完整版，配合vue-loader和vue文件

使用http://codesandbox.io

由于本地创建vue项目会依赖一些组件，需要提前安装，这里提供一个免费在线沙盒，进入后点击【Create a Sandbox】按钮创建一个新的沙盒，选择VUE就可以直接使用了，最终的demo还可以直接输出到github上。

https://codesandbox.io/​codesandbox.io