终于可以搞应聘必备的Vue了！

项目的搭建，目标一：搞出一个使用Vue的项目

创建步骤

搜索@vue/cli → 点击绿色started、安装
打开vs code ，新开一个终端，直接进入一个目录 cd /d/JS BIN
直接复制

yarn global add @vue/cli

检查是否成功

vue --version

创建一个项目

vue create vue-demo-2//文件的目录名字

接下来选项

其余的选项默认，下面的这一个选第二个

7. 当看到 cd vue-demo-3和yarn serve时，表明已经运行成功了，可以进行下一步了。 1）cd vue-demo-3 2)yarn server 3)stat .(windows系统直接打开这个目录即可) 4）然后把这个vue-demo-3文件拖进来 5）yarn serve 会看到下面页面，则表示成功了。

vue.js和vue.runtime.js的使用

做一个最简单的项目(+1 demo)，并把涉及的文档看一下

打开App.vue
需要复习de知识点{{n}}、data（）、methods：{}、@click=“”；现在去查查吧，随后再接着往后学。

{{}}是vue的插值表达式

主要作用是进行数据的绑定，最常见的是使用“Mustache”语法（双大括号）的文本插值

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。 data（）,具有存值读值取值的宫功能； methods:()

vue实例

vue 的两个版本：完整版vue 与非完整版vue

完整版vue，从CDN引用vue.js或者vue.min.js即可做到。完整版代码：

// 需要编译器
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

打开vue.js官网，找到CDN安装，进入bootcdn网站，进入vue，发现里面有很多版本；

vue.js,里面有注释，体积大； vuemin.js,里面没有注释，体积小，所以本次我们就用这个min；

将这个版本放到代码里面

直接在public文件夹里的index.html中的里面引入

 <div id="app"> {{n}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

则会得到一个全局变量，main.js里的内容暂时注释掉，输入console.log(window.Vue) 在main.js输入

new Vue({
  el:'#app',
  data:{
    n: 0
  }

那么页面就会显示0了。

完整版的vue支持直接把html里的内容转化到页面，不完整版则不支yun持。

不完整版

代码：

Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

首先明白

Vue的初级详解