vue入门级学习

vue3官网
https://cn.vuejs.org/
vue2官网
https://v2.cn.vuejs.org/

准备工作

vscode插件

:::info
Bracket Pair Colorizer 2 花括号
Beautify 格式化
Chinese 中文简体
Vetur vue格式显示
:::

安装vue工具

npm install -g @vue/cli
vue --version

nodejs历史版本下载

https://nodejs.org/en/download/releases/

nodejs安装

环境变量

1. 在安装目录下，如 E:\toolsAz\nodejs 新建两个文件夹 node_global(全局包存放目录) 和 node_cache(缓存目录)；

2. 打开命令行工具，执行以下两句操作：

npm config set prefix “E:\toolsAz\nodejs\node_global”
npm config set cache “E:\toolsAz\nodejs\node_cache”；

3. 配置环境变量：

• NODE_PATH：E:\toolsAz\nodejs\node_modules
• 编辑用户变量的 path， E:\toolsAz\nodejs\node_global

Vue CLI#

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验。
关于从 Vue CLI 迁移到 Vite 的资源：

• VueSchool.io 的 Vue CLI -> Vite 迁移指南
• 迁移支持工具 / 插件

这个cli打开操作：生态系统–工具链指南–向下一点就看到了
点击跳转后的网址
https://cli.vuejs.org/zh/#%E8%B5%B7%E6%AD%A5

创建vue项目

遇到的问题 ：
vue : 无法加载文件 D:\toolsAz\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本问题处理：
1、get-ExecutionPolicy
2、set-ExecutionPolicy RemoteSigned
3、get-ExecutionPolicy

vue create first-demo


npm run serve
参考连接
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

语法

{{ message}}

    	<h1>{{ msg }}</h1>
      <div>{{ baidu }}</div>
      <div>{{ num * 5 }}</div>
      <div>{{ num > 10 ? 5000 : 0 }}</div>

v-bind = :

<div v-bind:id="divid">111</div>
      <div :id="divid">2222</div>

v-if v-else-if v-else v-show

    	<h1>条件渲染</h1>

      <button @click="testVIfClick">测试v-if</button>
      <button @click="testShowClick">测试v-show</button>


      <div v-if="testVIf">v-if</div>
      <div v-else>v-else</div>


      <div v-show="testShow">v-show</div>

v-for

	<div id="div3">
      <hr />
      <h1>列表渲染----循环</h1>
      <ul>
        <li v-for="one in ones" :key="one.name" @click="showName(one.name)">
          {{ one.name }}
        </li>
      </ul>
      <div>{{ "我是" + testShowName }}</div>
    </div>
  </div>

     ones: [
        {
          name: "鲁班",
          type: "射手",
        },
        {
          name: "后裔",
          type: "射手",
        },
        {
          name: "黄忠",
          type: "射手",
        },
      ],

v-click = @

    	<button @click="testVIfClick">测试v-if</button>
      <button @click="testShowClick">测试v-show</button>

  methods: {
    testVIfClick() {
      this.testVIf = !this.testVIf;
    },
    testShowClick() {
      this.testShow = !this.testShow;
    },
    showName(data) {
      console.log(data);
      this.testShowName = data;
    },
  },

v-model

  	<div id="div4">
      <hr />
      <h1>双向绑定</h1>
      <input type="text" v-model="inputMessage" />
      <p>{{ inputMessage }}</p>
    </div>

   inputMessage: "",

props

<template>
  <div>
    <div id="main">
      <h1>主组件</h1>
      <div class="showDiv">
      </div>
    </div>


    <hr />
    <div id="son1">
      <h1>子组件</h1>
      <HelloWorld  :mainMessage="mainMessage"/>
    </div>
  </div>
</template>


<script>
import HelloWorld from "./components/HelloWorld.vue";


export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data(){
    return{
      mainMessage:"我是主组件的消息"
    }
  }
};
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.showDiv{
  border: rgb(33, 20, 150) 1px solid;
  width: 900px;
  height: 300px;
  margin: auto;
}
</style>

<template>
  <div>
    <div class="showDiv">
      {{ mainMessage }}
    </div>
  </div>
</template>


<script>
export default {
  name: "2222",
  data() {
    return {};
  },
  props: {
    mainMessage: String,
  },
};
</script>


<style lang="less" scoped>
</style>

向父组件发送数据

<template>
  <div>
    <div id="main">
      <h1>主组件</h1>
      <div class="showDiv">{{ son }}</div>
    </div>


    <hr />
    <div id="son1">
      <h1>子组件</h1>
      <myComponents @sonMessage="sonMessage" />
    </div>
  </div>
</template>


<script>
import HelloWorld from "./components/HelloWorld.vue";
import myComponents from "./components/myComponents.vue";


export default {
  name: "App",
  components: {
    HelloWorld,
    myComponents,
  },
  data() {
    return {
      mainMessage: "我是主组件的消息",
      son: "",
    };
  },
  methods: {
    sonMessage(data) {
      var mes = "我是子组件来的数据：" + data;
      console.log(mes);
      this.son = mes;
    },
  },
};
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.showDiv {
  border: rgb(33, 20, 150) 1px solid;
  width: 900px;
  height: 300px;
  margin: auto;
}
</style>

<template>
  <div>
    <button @click="sendMessageToMain">sendMessageToMain</button>
  </div>
</template>
<script>
export default {
  name: "myComponents",
  data() {
    return {
      sonMessage: "子组件数据",
    };
  },
  methods: {
    sendMessageToMain() {
      this.$emit("sonMessage", this.sonMessage);
    },
  },
};
</script>

watch 监听变量的变化

<template>
  <div>
    <h1>MyComponents</h1>
    <div>
      {{ message }}
    </div>
  </div>
</template>


<script>
export default {
  name: "",
  data() {
    return {
      toData: "String",
      message: "我是来自主组件的消息：" + this.toData,
    };
  },
  methods: {},
  props: {
    toData: String,
  },
  watch: {
    toData: function (data) {
      this.message = "我是来自主组件的消息：" + data;
    },
  },
};
</script>

图片轮询

https://swiperjs.com/
https://swiperjs.com/vue
npm install --save swiper@8.1.16

<template>
  <div class="hello">
    <swiper :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide>
        <img src="../assets/logo.png" alt="" srcset="" />
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="" srcset="" />
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/logo.png" alt="" srcset="" />
      </swiper-slide>
    </swiper>
  </div>
</template>


<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// 指示器，显示第几个
import { Pagination } from "swiper";


// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";


export default {
  components: {
    Swiper,
    SwiperSlide,
    Pagination,
  },
  data() {
    return {
      modules: [Pagination],
    };
  },
};
</script>

官网这个其实也可以，

<template>
  <div>
    <hr>
    <swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
    </swiper>
  </div>


</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';


// Import Swiper styles
import 'swiper/css';


export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
    };
  },
};
</script>
<style scoped>
div {
  width: 500px;
}
</style>

网络请求

安装axios

npm install axios

将对象转换为string格式

npm install --save querystring

axios get post请求

<template>
  <div class="hello">
    <p>{{ data }}</p>
  </div>
</template>


<script>
import axios from "axios";
export default {
  name: 'HelloWorld',
  data() {
    return {
      data: ""
    }
  },
  mounted() {
    axios({
      url: "http://localhost:8003/cloud2021/vue/testSql",
      method: "get"


    }).then(res => {
      // console.log(res.data);
      // this.data = res.data;
    }),
    axios({
      url: "http://localhost:8003/cloud2021/vue/bb3",
      method: "post"


    }).then(res => {
      console.log(res.data);
      this.data = res.data;
    })
  }
}
</script>

element-ui

安装

查看我npm版本，8.9.0，看一些博客说npm版本太高了，需要降低npm的版本，之后，又查了查，看到别的博客，找到了解决的办法：
npm install --legacy-peer-deps element-ui --save
或者使用 element plus
npm install element-plus --save

文档地址：

https://element.eleme.cn/#/zh-CN/component/installation