写代码啦
Vue 两个版本
回复数(0) 浏览数(69)
{{topic.upvote_count || 0}} 编辑 回复

Vue 两个版本的区别

完整版:
对应的文件名:vue.js ,vue.min.js
支持从html获取视图
支持template
有compiler编译器

非完整版:
对应的文件名:vue.runtime.js ,vue.runtime.min.js
不支持从html获取视图
不支持template,需要通过vue-loader 将组件中的template模板编译为render函数
没有compiler编译器,体积会比完整版小30%

template的用法

第一种方式:

new Vue({
  el: "#app",
  template: `
    <div>
      <div>文本1</div>
      <div>文本2</div>
      <div>文本3</div>
    </div>
  `
})

需注意的是,template中至少要有一个根元素,不能是纯文本,否则会报错

new Vue({
    el: "#app",
    template: '文本'
})

如果存在多个同级元素,没有根元素时,只会显示第一个元素

new Vue({
    el: "#app",
    template: `
    <div>文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    `
})

第二种方式:

<template id="demo1">
    <h2>标签模版2</h2>
</template>

new Vue({
    el: "#app",
    template: '#demo1'
})

第三种方式:

<script type="x-template" id="demo2">
    <h2 style="color:red">标签模板3</h2>
</script>

new Vue({
  el: "#app",
  template: '#demo2'
})

render的用法

new Vue({
  el: "#app",
  render: function (h) {
    return h(
      'div',
      {
        class: { 'style1': true, 'style2': true },
        style: { color: '#fff', background: 'red' },
        on: {
          click: function () {
            console.log('render函数')
          }
        }
      },
      ['元素文本', h('div', '子元素文本')]
    )
  }
})

render函数有一个回调函数
该函数有3个参数
第一个参数:可以是一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数,必填,类型:{String | Object | Function}
第二个参数:包含模板相关属性,用于设置模板元素的属性或者事件,可选,类型:{Object}
第三个参数:设置模板元素文本,或者创建子节点 类型:{String | Array}

用 codesandbox.io 写 Vue 代码


点击Create a Sandbox, it’s free按钮


选择vue即可

{{topic.upvote_count || 0}}

Vue 两个版本的区别

完整版:
对应的文件名:vue.js ,vue.min.js
支持从html获取视图
支持template
有compiler编译器

非完整版:
对应的文件名:vue.runtime.js ,vue.runtime.min.js
不支持从html获取视图
不支持template,需要通过vue-loader 将组件中的template模板编译为render函数
没有compiler编译器,体积会比完整版小30%

template的用法

第一种方式:

new Vue({
  el: "#app",
  template: `
    <div>
      <div>文本1</div>
      <div>文本2</div>
      <div>文本3</div>
    </div>
  `
})

需注意的是,template中至少要有一个根元素,不能是纯文本,否则会报错

new Vue({
    el: "#app",
    template: '文本'
})

如果存在多个同级元素,没有根元素时,只会显示第一个元素

new Vue({
    el: "#app",
    template: `
    <div>文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    `
})

第二种方式:

<template id="demo1">
    <h2>标签模版2</h2>
</template>

new Vue({
    el: "#app",
    template: '#demo1'
})

第三种方式:

<script type="x-template" id="demo2">
    <h2 style="color:red">标签模板3</h2>
</script>

new Vue({
  el: "#app",
  template: '#demo2'
})

render的用法

new Vue({
  el: "#app",
  render: function (h) {
    return h(
      'div',
      {
        class: { 'style1': true, 'style2': true },
        style: { color: '#fff', background: 'red' },
        on: {
          click: function () {
            console.log('render函数')
          }
        }
      },
      ['元素文本', h('div', '子元素文本')]
    )
  }
})

render函数有一个回调函数
该函数有3个参数
第一个参数:可以是一个 HTML 标签字符串,组件选项对象,或者解析上述任何一种的一个 async 异步函数,必填,类型:{String | Object | Function}
第二个参数:包含模板相关属性,用于设置模板元素的属性或者事件,可选,类型:{Object}
第三个参数:设置模板元素文本,或者创建子节点 类型:{String | Array}

用 codesandbox.io 写 Vue 代码


点击Create a Sandbox, it’s free按钮


选择vue即可

69
回复 编辑