VUE笔记

常用语法

文档 Vue.js

在html文件中写vue需要引入一个包(从上方链接中查找)

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

• {{ }} 变量、表达式渲染
• v-html html模板，渲染html
• v-model 绑定值（双向绑定）
• v-if v-else-if v-else 判断
• v-bind 简写 : 绑定属性
• v-on 简写 @ 事件绑定
• v-for 循环
• 动态class style

----------------------------------------------------------------------------------

git仓库的使用

4. Git怎么用？怎么把自己的代码发布到远程代码仓库Gitee · 语雀

文件中除了gitignore全部提交到git仓库

---------------------------------------------------------------------------------------------

输入提示技能包

vue输入提示框(输入内容有指定提示)

<el-autocomplete style="width: 300px" placeholder="请输入内容，我来帮你猜一猜" :fetch-suggestions="querySearch"
                 :trigger-on-focus="false" v-model="value3"></el-autocomplete>

<script>
export default {
  name:'Element',
  data(){
    return {
      value:'',
      value1:'',
      value2:'',
      value3:'',
      coffees: [{ value: '1星巴克咖啡' },{value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}]
    }
  },
  methods: {
// 值必须带value
    querySearch(query, cb) {  // callback
      let result =  query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      console.log(result)
      cb(result);
  }
}
}
</script>

vue3的创建

项目前搭建环境

下载node.js

指令查看node版本

node -v

 node包管理器

npm -v

软件安装 nodejs16 下载node.js地址

Index of /download/release/v16.20.0/ (nodejs.org)

淘宝镜像

npm config set registery https://registry.npm.taobao.org

第一步：在本机创建一个文件夹 

快速上手 | Vue.js (vuejs.org)

第二步：找到创建的文件夹 运行这一行代码 创建vue3项目

 npm create vue@latest

第三步输入 y(出现以下场景)   问你起一个什么名称

第四步会问你的需求（如图回答）

第五步：通过后面的三行字启动vue项目（前题是文件夹有这个文件）

第五步：输入命令

npm install

第六步：输入命令

npm run dev

vue2的创建

准备工作

npm install -g @vue/cli      //全局安装 vue-cli

 软件安装 nodejs16 下载node.js地址

Index of /download/release/v16.20.0/ (nodejs.org)

第一步：创建一个空文件夹放项目

第二步：vue cli工具（下方指令安装）

npm install -g @vue/cli

 第三步:找到创建的文件夹 运行这一行代码 创建vue2项目

vue create vue

选择1，3 

 

选择器

#app是id选择器  .app是class选择器

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

autofocus属性

<input type="text" autofocus>

说明：在这个例子中，<input>元素被设置为自动获取焦点，用户打开页面后可以直接在该输入框中输入内容。

placeholder属性

placeholder="请输入任务"

 说明:在Vue中，placeholder="请输入任务"是用于在输入框中显示灰色提示文本的属性。

v-model双向数据绑定

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

event对象

在事件处理函数中，通常会使用event对象来获取触发事件的相关信息，例如：

• 获取触发事件的元素：event.target
• 获取事件类型：event.type
• 阻止事件默认行为：event.preventDefault()
• 阻止事件冒泡：event.stopPropagation()

加载组件的流程

生命周期

vue引入第三方

温馨提示

官方文档： https://swiperjs.com/vue

安装指定版本的swiper : npm instal -- save swiper@8.1.6

网络请求

安装

Axios 的应用是需要单独安装的 npm install -- save axios

安装完以后还要继续引用他

引用方式

引入

组件中引入 : import axios from "axios

全局引入

import axios from "axios"

const app = createApp(App);
app.config.globalProperties.$axios = axios
app.mount('#app')

案例

Get请求方式

<template>
	{{chengpin.title}}<br><br><br>
	{{chengpin.content}}
</template>

<script>
import axios from "axios"
export default{
	name:"hello World",
	data() {
		return{
			chengpin:{}
		}
	},
	mounted() {
		axios({
			method:"get",
			url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
		}).then(res=>{
			// console.log(res.data)
			this.chengpin=res.data.chengpinDetails[0]
		})
	}
}
</script>

<style>
</style>

get请求的快捷版

//get请求的快捷方案
//组件this.$axios
//用了全局引入直接调用组件this.$axios

		this.$axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
		   .then(res =>{
		 //      console.log(res.data);
		 this.chengpin=res.data.chengpinDetails[0]
		   })

解释：

这段代码是使用axios库发送一个GET请求到指定的URL，并在请求成功后打印出返回的数据。在Vue中，可以使用axios库来发送HTTP请求。当请求成功时，会返回一个包含响应数据的对象。通过箭头函数res=>{console.log(res.data)}可以处理请求成功后的操作，即打印出返回的数据。

res.data表示从HTTP响应中获取的数据。在axios中，响应对象res包含了很多属性，其中data属性包含了服务器返回的数据。所以通过res.data可以访问和处理服务器返回的数据。

POST请求方式

post 请求参数是需要额外处理的

安装依赖前要停止运行（停止运行快捷键：ctrl+c）

1 安装依赖 : npm install -- save querystring

2 转换参数格式: querystring.stringify({})

最后 import querystring from "querystring"方式引入

// post请求方式
		axios({
		  method: "post",
		  url: "http://iwenwiki.com/api/blueberrypai/login.php",
		  data: querystring.stringify({
		    user_id: "iwen@qq.com",
		    password: "iwen123",
		    verification_code: "crfvw"
		  })
		}).then(res =>{
		  console.log(res.data);
		})

post请求的快捷版

//组件this.$axios
//用了全局引入直接调用组件this.$axios

axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
		      user_id: "iwen@qq.com",
		      password: "iwen123",
		      verification_code: "crfvw"
		    })).then(res => {
		      console.log(res.data);
		    })

网络请求的封装

//网络请求公共配置
const instance = axios.create({
    //设置网络请求的公共配置
   timeout:5000//设置网络请求的超时时间为五秒
 })

// 参考文档：https://www.kancloud.cn/yunye/axios/234845

import axios from "axios"
import querystring from "querystring"

const errorHandle = (status,info) => {
    switch(status){
        case 400:
            console.log("语义有误");
            break;
        case 401:
            console.log("服务器认证失败");
            break;
        case 403:
            console.log("服务器拒绝访问");
            break;
        case 404:
            console.log("地址错误");
            break;
        case 500:
            console.log("服务器遇到意外");
            break;
        case 502:
            console.log("服务器无响应");
            break;
        default:
            console.log(info);
            break;
    }
}





//网络请求公共配置
const instance = axios.create({
    //设置网络请求的公共配置
   timeout:5000//设置网络请求的超时时间为五秒
 })
 
 //interceptors拦截器的对象 
 
// 发送数据之前
 instance.interceptors.request.use(
 //config包含了网络请求的所有信息
     config =>{//发送成功的函数
         if(config.method === "post"){//如果请求的方式是post请求方式需要转化一下
             config.data =qs.stringify(config.data)
        }
         return config;
    },
     error => Promise.reject(error)
  )
 // 获取数据之前
 instance.interceptors.response.use(
     response =>{//此函数是接收成功的方法
		 // Promise.resolve(response)响应成功的方法 Promise.reject(response)响应成功的方法
         return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
     },
     error =>{//error接收的过程中就出现了问题
         const { response } = error;
         // 错误的处理才是我们需要最关注的
         errorHandle(response.status,response.info)
     })

 export default instance;//将网络请求导出

测试地址：iwenwiki - Slidev

跨域

跨域错误

解决跨域方案：

将下面代码复制在vue.config.js中

devServer: {
    proxy: {
      '/api': {
        target: '<url>',//什么地址跨域写什么地址
        changeOrigin: true
     }
   }
}

温馨提示

解决完跨域配置之后，要记得重启服务器才行哦！

二级路由

案例

vue状态管理的核心

最常用的核心概念包含 : State 、 Getter 、 Mutation 、 Action

Getter

对 Vuex 中的数据进行过滤

store文件

import { createStore } from 'vuex'

export default createStore({
  state: {
	  counter:0
  },
   getters:{
      getCounter(state){//判断counter是否符合返回条件
						//操作state中的数据，确保数据的统一管理和共享。
        return state.counter > 0 ? state.counter : "counter数据异常"
      }
    },
  mutations: {
	  addCounter(state,num){
		  state.counter+=num
	  }
  },
})

<template>
  <div class="home">
     <p> count={{ $store.getters.getCounter }}</p>
     <p>{{getCounter }}</p>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
  name: 'HomeView',
  components: {
   
  },
  computed:{
     ...mapGetters(["getCounter"])
  }
  
}
</script>

Mutation

通过调用的方法对数据进行更改

<script>
import {mapGetters,mapMutations} from "vuex"
export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  computed:{
     ...mapGetters(["getCounter"])
  },
  methods:{
	  ...mapMutations(["addCounter"]),
	  addClickHandl(){
		  //固定调用方式
		  // this.$store.commit("addCounter",15)
		  this.addCounter(20)
	  }
  }
  
}
</script>

Action

Action 类似于 mutation ，不同在于：

Action 提交的是 mutation ，而不是直接变更状态

Action 可以包含任意异步操作

（mutation只允许同步操作不允许异步操作，Action是可以进行异步操作的）

import { createStore } from 'vuex'
import axios from "axios"

export default createStore({
  state: {
    counter:10
  },
  getters:{
    getCounter(state){
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  mutations:{
    addCounter(state,num){
      state.counter += num
    }
  },
  // 为异步操作所准备的
  actions:{
    asyncAddCounter({ commit }){
      axios.get("http://iwenwiki.com/api/generator/list.php")
      .then(res =>{
        // 一下是使用方式
        commit("addCounter",res.data[0])
      })
    }
  }
})

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h3>home</h3>
    <p> count={{ $store.getters.getCounter }}</p>
    <p>{{ getCounter }}</p>
    <button @click="addClickHandle">增加</button>
    <button @click="addAsyncClickHandle">异步增加</button>
  </div>
</template>

<script>

import { mapGetters,mapMutations,mapActions } from "vuex"

export default {
  name: 'HomeView',
  components: {
  },
  computed:{
    ...mapGetters(["getCounter"])
  },
  methods:{
    ...mapMutations(["addCounter"]),
    ...mapActions(["asyncAddCounter"]),
    addClickHandle(){
      // 固定调用方式
      // this.$store.commit("addCounter",15)
      this.addCounter(20)
    },
    addAsyncClickHandle(){
      // this.$store.dispatch("asyncAddCounter");
      this.asyncAddCounter();
    }
  }
}
</script>

vue3的特性

声明  函数调用  数据的传递（父传子） 获取实例对象

<template>
<div class="hello">
	{{message}}
	<ul>
		<li v-for="item in names.List">{{item}}</li>
	</ul>
	<button @click="click">点击</button>
	<p>{{msg}}</p>
</div>

</template>

<script>
import { reactive, ref } from 'vue'

export default {
  name: 'HelloWorld',
  props:{
	  msg:String
  },
  setup(props,ctx) {
	  console.log(ctx)//获取当前实例对象
  	const message=ref("iwen")
	const names=reactive({
		List:["小明","小黑"]
	})
	
	function click(){
		console.log("点击了一下")
		message.value="我是新的对象"
	}
	const msg =props.msg
	return{
		message,
		names,
		click
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

setup（）生命周期函数

Provide / Inject

provide() 和 inject() 可以实现嵌套组件之间的数据传递。

这两个函数只能在 setup() 函数中使用。

父级组件中使用 provide() 函数向下传递数据。

子级组件中使用 inject() 获取上层传递过来的数据。

不限层级

案例

父文件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>

import HelloWorld from '@/components/HelloWorld.vue'


import {provide} from "vue"
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  setup() {
  	provide("message","我是消息信息")
  }
}
</script>

子文件

<template>
<div class="hello">
	
	{{message01}}
</div>
</template>


<script>
import { inject} from 'vue'
export default {
  name: 'HelloWorld',
  setup(props,ctx) {
	const message01=inject("message")
	return{
		message01
	}
  }
}
</script>


<style scoped>
</style>

Element Plus

安装 Element-Plus

npm install element - plus -- save

引用方式：

完全引入

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import ElementPlus from 'element-plus'//这两个为element的引用方式
import 'element-plus/dist/index.css'//

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

按需引入

首先你需要安装 unplugin - vue - components 和 unplugin - auto - import 这两款插件

npm install -D unplugin-vue-components
unplugin-auto-import

第二步：

然后修改 vue.config.js 配置文件（将 vue.config.js全部覆盖掉 ）

const { defineConfig } = require('@vue/cliservice')
const AutoImport = require('unplugin-autoimport/webpack')
const Components = require('unplugin-vuecomponents/webpack')
const { ElementPlusResolver } =
require('unplugin-vue-components/resolvers')
 module.exports = defineConfig({
transpileDependencies: true,
 configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
     }),
      Components({
        resolvers: [ElementPlusResolver()]
     })
   ]
 }
 })

最后直接使用