vue起步

Posted on
| Words count in article: 374

vue的两个版本

  • vue有两个版本，即完整版（vue.js）和 非完整版也叫运行时版本（vue.runtime.js）
  • 运行时：用来创建Vue实例、渲染处理虚拟DOM
  • 编译器：用于将模板字符串编译成JS渲染函数的代码
  • 完整版：运行时 + 编译器
  • @vue/cli默认引入的是运行时runtime版本
  • 最佳实践：总是使用runtime非完整版，并配合vue-loader和vue文件
  1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
  2. 保证开发体验，开发者可以直接在vue文件里写HTML标签，而不写h函数
  3. 其他工作交给loader来做，vue-loader会引入compiler（编译器），它会将vue文件里的HTML在构建时预编译成h函数，这样既简化写法又省下空间。

    template 与 render 的用法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 写法更简单，但需要编译器
    new Vue ({
        template: '<div>{{ hello }}</div>'
    })

    // 写成h函数，不需要编译器
    new Vue ({
        render(h) {
            return h('div', this.hello)
        }
    })

template标签和JS文件中的template

1
2
3
4
5
6
7
// .vue文件中的template标签
<template>
    <div id="app">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
1
2
3
4
5
6
7
8
9
// .js文件中的template
new Vue ({
    template: `
        <div>
            {{n}}
            <button @click="add">+1</button>
        </div>
    `
})

codeSandbox快速写vue代码

  • 快速开始在线写vue代码，无需安装任何本地依赖 => https://codesandbox.io/s/
  • 不要登录，直接一键create Sandbox选择vue即可
0%