初识Vue

初识Vue

今天开始学习Vue,这里主要介绍Vue的两个不同的版本;

完整版

完整版直接在HTML中引用 vue.js(CDN直达 ), 有compiler(编译器),视图可以写在HTML里或template选项,

具体的用法可参考 vue.js官方文档

使用webpack引入需要配置 alias , @vue/cli引入也需要进行额外的配置.

非完整版

非完整版直接在HTML中引用 vue.runtime.js,相对于完整版区别就是没有compiler(编译器), 视图写在render函数里,用"h"来创建标签,"h"是vue的作者写好传给 render函数的:

例:

//Demo.vue
<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

<script>
    export default {
        // name: "Demo",
        data(){
            return {
                n:0
            }
        },
        methods:{
            add(){
                this.n =+ 1;
                console.log(this.n);
            }
        }
    }
</script>

<style scoped>
.red{
    color: red;
}
</style>

//mian.js
import Vue from 'vue'
Vue.config.productionTip = false
import Demo from "./Demo.vue";
new Vue({
  el: '#app',
  render(h){ //render函数
    return h(Demo)
  },
})

目前前端一般都用此版本,用非完整版配合vue-loader+vue单文件，可以保证用户体验，其只支持h函数，用户下载的体积减小；vue-loader并不需要用户下载，在yarn build时已经执行，也可以保证开发体验，在开发的时候可以把vue单文件中直接写html，再用loader转换，变成h函数,使用webpack和@vue/cli引入都默认此版本,不需要需要进行额外的配置.

vue/cli

安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查其版本是否正确:

vue --version

创建一个项目

vue create hello-world

开发预览

vue serve

Usage: serve [options] [entry]

在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器


Options:

  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

vue/cli官方文档

还可以免费使用在线沙箱,https://codesandbox.io/,点击vue,即可快速创建vue项目

接下来就是学习Vue的旅程啦!