html页面中的js不识别el表达式_vue.js完整版与运行时版的区别

在初次使用vue.js时，可以看到官方提供了两个版本可以使用，包括vue.js（完整版）和vue.runtime.js（运行时版）。在实际环境中，应当使用运行时版，这是由于vue.runtime.js体积更小，在用户网络情况不好时能更快地加载。下面更具体地说明vue.js和vue.runtime.js的区别。

vue.js

我们知道，vue.js提供了一套模版，使我们能使用v-if, v-for之类的语法来编写html。但是浏览器并不认识v-if、v-for之类的模版，需要通过一个模版编译器将这样的模版转换为浏览器认识的html。所以vue.js的渲染逻辑是将模版字符串转换为html字符串，在将html字符串插入到页面的 html中实现渲染，例如：

// html


// main.js
new Vue({
  el: "#app", // 模版字符串插入的位置
  template: `
    
{{ value }}
  `,  // 模版字符串
  data: {
    value: 0
  }, // 替换的数据，即{{ value }} 被替换为0
})

最后获得的html如下:

0

vue.runtime.js

vue.runtime.js和vue.js的区别在于，vue.runtime.js不包含模版编译器来获得整个包体积的减少。显然，如果没有模版编译器，上面代码中的模版字符串就没有办法转化为原始的html字符串。但是与其将模版字符串在用户端编译，为何不在开发时本地编译好了再发送给用户呢？这样做就节省了vue.js中模版编译器所需要的体积。下面即是使用vue.runtime.js实现同样的功能:

new Vue({
  el: "#app",
  data: {
    value: 0
  },
  render(h) {
    return h('div', this.n)
  },
})

h就是vue.runtime.js提供的函数，它接收模版字符串中的参数，返回渲染好的原始的html。

在实际开发中，由于h函数的参数比较复杂，实际开发中通过使用webpack的vue-loader插件能将vue单文件组件（以.vue结尾的文件）转换为h函数所需要的参数。

http://codesandbox.io快速搭建Vue项目

http://codesandbox.io是一个在线的编辑器，能够快速创建vue项目。访问 https://codesandbox.io/进入主页面:

点击页面中央的创建沙盒按钮，看到可以选择创建很多不同种类的项目：

点击图中红圈的vue选项，就能创建一个vue项目了。