vue2学习

vue版本

全局安装：vue-cli

npm install -g @vue/cli

命令行运行单个vue文件：

npm install -g @vue/cli-service-global

升级全局的 Vue CLI 包:

npm update -g @vue/cli

创建项目

vue create my-project

GUI创建

vue ui

vue3.0使用Element Plus。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')

// main.ts

ts.config.json

列表循环

<ul class="c-header-nav">
      <li v-for="(item, index) in navData" :key="index">
        {{item.value}}
      </li>
</ul>

动态绑定class

 <ul class="c-header-nav">
      <li :class="{'c-header-nav-li': true, 'c-header-nav-li-active': index === 0 }"
          v-for="(item, index) in navData"
          :key="index">
        {{item.value}}
      </li>
    </ul>

yapi: 一个好用的在线接口测试管理工具：YApi-高效、易用、功能强大的可视化接口管理平台

打死都不能用的innerHtml: v-html;

vue生命周期：

ts报错

解决：script 加上 类型

vue手写轮播图

vue中的this

 this中的data属性

动态绑定样式·：

动态内联绑定

 :style="{backgroundImage: 'url('+ item +')'}"
 :style="styleObject"
 :style="styleArrayObject"

vue中less的使用

console.log(this.$parent.a)
console.log(this.$parent.$root)
console.log(this.$parent.$refs)