Vue的使用浅谈

Vue.js

是一种渐进式JavaScript框架。开发者是尤雨溪，英文名 Evan You.
因为其优秀的中文文档编写，在中国的热度远超全球用户。

---

Vue的两个版本

Vue有完整版和非完整版两种版本的区别，完整版引入的文件名后缀含有 .vue.js ,而非完整版后缀含有 .vue.runtime.js.下面通过图表深入理解两种区别。

虽然有两种版本，但大部分情况最佳的实践是：总是使用非完整版，然后配合vue文件和vue-loader一起使用。

其中的思路是：
1.保证用户体验。用户下载JS文件体积更小，但只支持h函数。
2.保证开发体验。开发者可以直接在vue文件里写HTML标签，而不写h函数。
3.使用vue-loader把vue文件里的HTML转化为h函数即可。

---

Vue的视图

Vue的最佳实践，先直接在Vue文件里写template选项，然后使用vue-loader把Vue文件里的HTML转化为h函数，再将h函数传给render.
示例代码

<template>
  <div class="red">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default{
  data(){
    return {
      n:0
    }
  },
  methods:{
    add(){
      this.n += 1
    }
  }
};
</script>

<style scoped>
.red{
  color: red;
}
</style>

Vue单文件组件

import Vue from "vue";
import Demo from './Demo.vue'

new Vue({
  el:'#app',
  render(h) {
        return h(Demo)
  }
})

终端运行yarn serve可得Local预览

---

Vue在线使用

Vue可在代码沙盒网站 codesandbox.io上在线的写Vue代码。
打开页面后，可登录（只能创建50个项目）或游客身份（不限制项目），然后点击创建沙盒按钮 。然后在弹出来的官方框架选择页面中，点击选择Vue即可。

点选后会直接跳入创建好的项目，接着就能在线编写Vue代码啦。

编写的项目代码和配置还可以通过选项File > Export to ZIP导出，进行本地编程。

---