vue template标签_浅析Vue的两个版本

Vue是什么

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的两个版本

vue.min.js完整版和vue.runtime.min.js运行时版

如何引用vue

直接下载并用<script>标签引入，Vue会被注册为一个全局变量。

template 和 render 怎么用

首先在使用完整版vue.min.js时我们需要用到template，template可以写在页面里也可以在js中。

new Vue({
  el: "#app",
  template: `
  <div>{{n}}
  <button @click="add">+1</button>
  </n>`,
  data: {
    n: 0,
  },
  methods: {
    add() {
      this.n += 1;
    },
  },
});

使用vue.runtime.min.js需使用render

new Vue({
  el: "#app",
  // template: `
  // <div>{{n}}
  // </n>`,
  render(h) {
    return h("div", this.n);
  },
  data: {
    n: 0,
  }
});

Vue单文件组件

创建一个Demo.vue文件，代码如下：

<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>

在main.js中使用

import Demo from "./Demo.vue";
//console.log(Demo.render.toString());
new Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  },
});

vue.min.js和vun.runtime.min.js的区别

• 完整版有complier,运行时版无complier,且完整版代码要多余运行时版40%；
• 完整版视图写在HTML里或者template选项，运行时版视图写在render函数里用h来创建标签；；
• cdn引入vue.js，vun.runtime.js。文件名不同，生成文件名后缀为.min.js；
• webpack引入，默认使用运行时版，完整版需配置alias；
• @vue/li引入，默认使用运行时版，完整版需额外配置。

总是使用非完整版，配合vue-loader和vue文件。

如何用 http://codesandbox.io 写 Vue 代码

1. 首先进入http://codesandbox.io官网，找到vue，不用登录

点击vue

2.进入vue

3.下载

export to zip

4.解压缩，使用vscode打开。

资料来源：https://cn.vuejs.org/