vue在html中执行js代码,Vue.js 和 Vue.runtime.js
Vue官方中文文档：
Vue有两个版本：
完整版：vue.js、vue.min.js(运行时版+编译器)(编译器：将模板字符串编译成为JS渲染函数的代码)
运行时版：vue.runtime.js、vue.runtime.min.js(用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码)
vue-cli 创建的 vue 项目，默认的配置是 vue.runtime.js 版本
后缀为.min.js的是生产版
完整版(vue.js)和运行时版(vue.runtime.js)的区别：
比较项
vue.js
vue.runtime.js
评价
特点
有编译器(compiler)
无编译器
编译器占40%的体积
视图
写在HTML里或者写在template里
写在render函数里，用h创建标签
h是vue内置的回调函数
CDN引入
vue.js
vue.runtime.js
文件名不同，生产环境后缀都为.min.js (vue.min.js/vue.runtime.min.js)
webpack引入
需配置alias
默认使用此版本
vue作者配置的
@vue/cli引入
需要额外配置
默认使用此版本
vue作者配置的
完整版可直接将内容写在HTML中查看视图效果，或用template渲染到HTML。
运行时版无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点，vue.js的webpack引入和@vue/cli 引入都默认使用此版本。
运行时版最大的意义就在于体积小。
单文件组件：由于h函数的参数比较复杂，可以使用vue-loader把vue文件里的HTML转为h函数。
template和render
template
类型：string
详细：
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
其他：只适用于vue的完整版中，与el属性配合使用。
用template在页面中显示一个0
index.html
复制代码
main.js
new Vue({
// 元素 element
el: '#app',
template: `
`,
data: {
n: 0
}
})
复制代码render
类型：function
详细：
接收一个回调函数h(h为vue中内置的回调函数)，h包含两个参数。第一个参数为渲染的dom对象名(字符串)，第二个参数为dom内的内容。例如：render(h){ h('div','hello vue') }
用render在页面中显示一个0
index.html
复制代码
main.js
new Vue({
// 元素 element
el: '#app',
render(h){
// 创建一个div 里面是 n
return h('div', this.n)
},
data: {
n: 0
}
})
复制代码
单文件组件
我们有一种两全其美的方法：
使用 webpack 的 vue-loader。(注意：我们在使用 vue-cli 时，它已经帮我们配置好了这个加载器。)
我们在写组件的时候，在 build 时这个加载器会自动帮我们编译为 render 函数的方法来构造。
这样，用户下载产品时只需要下载体积小的非完整版，而开发人员编写代码时，也不需要使用 render 方法去构造元素。
↓↓↓以下代码用单文件组件的方法实现点一下“+1”按钮数字+1的功能↓↓↓：
html
复制代码
创建一个vue文件。
Demo.vue
{{n}}
+1
export default {
data() {
return {
n: 0
};
},
methods: {
add() {
this.n += 1;
}
}
};
.demo{
color:blue;
}
复制代码
在 template 中写 视图相关，在 script 中写 视图之外的所有内容，在 style 中写 CSS相关。
vue-loader 就可以把这些变为一个对象。
在js中引入：
main.js
import Vue from 'vue'
import Demo from './Demo.vue'
new Vue({
render(h) {
return h(Demo)
}
}).$mount('#app')
复制代码
这样 class为"demo" 的 div 就替换掉了 id为"app"的 div。并且 div 里有 n 和 button。
这也叫做 Vue 单文件组件。
在codesandbox中使用Vue
点击右上角create sandbox
创建 Vue (选中vue-cli)
保存
选择 File > Export to ZIP，即可导出代码到 zip 压缩文件