Vue开发前准备

需要去官网Home | Vue CLI (vuejs.org)安装cli，cli是官方的vue开发环境。

安装成功后，可以通过命令来检测是否安装成功

vue --version

创建项目命令（名字要求全小写）

vue create my-project

选择方式（初学）：

然后跳出选择版本的按钮，选择3.x版本即可。

然后就可以进行选择配置文件放在哪里，默认选择第一个即可。

运行操作

npm run serve

项目打包：需要前往需要打包的文件夹下面的终端

命令
切换目录
cd 目录地址
npm run build

解决打包后的vue项目白屏

在vue.config.js文件中添加以下代码即可

// vue.config.js
module.exports = {
    publicPath: './',
}

模板语法

数据绑定语法

通过{}绑定数据，其中data()是一个方法，返回对应的数据值

<template>
  <div class="hello">
    <h1>HelloWorld</h1>
    <h3>{{ message }}</h3>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: "测试"
    }
  }
}
</script>

原始HTML

双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，你需要使用指令v-html指令

<p>
    Using mustaches:{{rawHtml}}
</p>
<p>
    Using v-html directive:<span v-html="rawHtml"></span>
</p>

data(){
    return{
        rawHtml:"<a href='https://www.fish9.cn'>吃猫的鱼</a>"
    }
}

完整示例代码：

<template>
  <div class="hello">
    <h1>HelloWorld</h1>
    <h3>{{ message }}</h3>
    <div>{{ rawHtml }}</div>        //输出文本
    <div v-html="rawHtml"></div>    //输出html代码
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: "测试",
      rawHtml: "<a href='https://www.fish9.cn'>吃猫的鱼</a>"
    }
  }
}
</script>

运行截图：

属性Attribute

Mustache语法不能再HTML属性中使用，然而可以使用v-bind指令

当我们标签中的属性需要发生变化的时候，可以通过v-bing对其进行动态修改。

v-bind 可以简写成 :

<div v-bind:id="dynamicId"></div>    完整写
<div :id="dynamicId"></div>            简写

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      dynamicId: 1001
    }
  }
}
</script>

使用JavaScript表达式

Vue.js提供完全的js表达式，{{ }}里面可以进行js的相关符号式的操作。

表达式会再当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式。

条件渲染

指令用于条件性地渲染一块内容，这块内容只能在指令的表达式返回true才会被渲染

    <p v-if="flag">我是吃猫的鱼</p>

<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>

v-else:

    <!-- 条件渲染 -->
    <p v-if="flag">我是吃猫的鱼1</p>
    <p v-else="flag">我是吃猫的鱼2</p>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      flag: false
    }
  }
}
</script>

上面代码显示的是我是吃猫的鱼2

另一个用于条件性展示元素的是v-show指令,使用方式

<h1 v-show="flag">Hello!</h1>

v-if和v-show的区别

v-if是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的时间监听器和子组件适当地被销毁和重建。

v-if 也是惰性的，如果在初始渲染时条件为假，则什么也不做知道条件第一次变为真时，才会开始渲染条件快。

相比之下，v-show就简单得多-不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。

一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

列表渲染

用v-for把一个数组映射位一组元素。

我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。

    <ul>
      <li v-for="item in items">{{ item.message }}</li>
    </ul>

data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }

维护状态

当Vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给Vue一个提示，以便它能跟踪每个结点的身份，从而重用和冲i性能排序现有元素，你需要为每项提供一个唯一的keyattribute:

<div v-for="(item,index) in items" :key="item.id|index">
    <!--内容-->
</div>

事件处理

可以使用v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件时执行一些JavaScript，用法为v-on:click="mathodName"或使用快捷方式@click="methodName"

<button @click="counter+=1">
    Add 1
</button>

data(){
    return{
        counter:0
    }
}

事件处理方法

很多事件处理逻辑会更加复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，因此v-on还可以接受一个需要调用的方法名称

<button @click="greet">
    Greet
</button>

methods:{
    greet(event){
        //'event'是原生DOM event
        if(event){
            alert(event.target.tagName)
        }
    }
}

实例：

    <!-- 事件处理 -->
    <button @click="counter += 1">点击{{ counter }}</button>
    <button @click="clickHandle">控制台输出"哈哈哈"</button>
    <p @click="change">{{ message }}</p><!--点击撤回-->

data() {
    return {
      message: "测试",
      counter: 1
    }
  },
  methods: {
    clickHandle() {
      console.log("哈哈哈");
    },
    change() {
      //事件中，读取data中的属性，需要通过this.属性
      this.message = "消息消失了";
    }
  }

内联处理器中的方法

相当于“事件传递参数”

<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>

methods:{
    say(message){
        alert(message)
    }
}

表单输入绑定

可以使用v-model指令在表单input 、textarea 及<select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

<input v-model="message" placeholdere="edit me"/>
<p>
    Message is :{{message}}
</p>

data(){
    return {
        message:""
    }
}

修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以通过lazy修饰符，从而转为在change事件之后进行同步

<input v-model.lazy="message"/>
<p>
    Message is:{{message}}
</p>

data(){
    return {
        message:""
    }
}

trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符

<input v-model.trim="message"/>

data(){
    return {
        message:""
    }
}

组件基础

单文件组件

Vue单文件组件(又名 *.vue文件，缩写为SFC)是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装在单个文件中。

加载组件

第一步 ：引入组件 import MyComponentVue from'./components/MyComponent.vue'

第二步：挂载组件compnents:{MyCDomponentVue}

第三步：显示组件<my-componentVue/>

示例代码

MyComponents中代码

<template>
    <h3>我是单文件组件</h3>
</template>


<script>
export default {
    name: "MyComponent"
}
</script>
<!-- scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效-->
<style scoped>
h3 {
    color: red;
}
</style>

App.vue中代码

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <MyComponents />
  <my-components />
</template>

<script>

import MyComponents from './components/MyComponents.vue';
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    MyComponents
  }
}
</script>

在App.vue中

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

props组件交互

组件与组件之间进行交互。

App.vue可以向组件传递参数，例如

<MyComponents :title="title" :age="age" :name="name"/>

然后在组件中需要接受传过来的参数，接过来需要给参数赋值类型和默认值。

<script>
export default {
    name: "MyComponents",
    props: {
        title: {
            type: String,
            default: ""
        },
        age: {
            type: Number,
            default: 0
        },
        name: {
            type: String,
            //数组和对象必须使用函数返回
            default: function () {
                return []
            }
        }
    }
}
</script>

完整示例代码：

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponents :title="title" :age="age" :name="name"/>
</template>

<script>

import MyComponents from './components/MyComponents.vue';

export default {
  name: 'App',
  data() {
    return {
      title: "我是一个标题",
      age: 20,
      name:["aa","bb","cc","dd"]
    }
  },
  components: {
    MyComponents
  }
}
</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;
}
</style>

MyComponents.vue

<template>
    <h3>我是单文件组件</h3>
    <h2>{{ title }}</h2>
    <p>{{ age }}</p>
    <ul>
        <li v-for="item, index in name" :key="index">{{ item }}</li>
    </ul>
</template>


<script>
export default {
    name: "MyComponents",
    props: {
        title: {
            type: String,
            default: ""
        },
        age: {
            type: Number,
            default: 0
        },
        name: {
            type: String,
            //数组和对象必须使用函数返回
            default: function () {
                return []
            }
        }
    }
}
</script>
<!-- scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效-->
<style scoped>
h3 {
    color: red;
}
</style>

自定义事件组件交互

自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件，想要反向操作，可以使用自定义事件实现。

可以通过在组件中自定义方法，向app.vue中传递.

在自定义方法中使用

this.$emit("onEvent", this.message)

然后再app,vue中接收这个方法

 <MyComponents @onEvent="getDataHandle" />

methods: {
    getDataHandle(data) {
      this.message = data
    }
  }

完整示例代码

MyComponents.vue

<template>
    <h3>自定义事件传递数据</h3>
    <button @click="sendClickHandle">点我传递</button>
</template>


<script>
export default {
    name: "MyComponents",
    data() {
        return {
            message: "我是MyComponents数据"
        }
    },
    methods: {
        sendClickHandle() {
            //参数一是字符串,理论上是随意的，但是需要具有意义
            //参数二是传递的数据
            this.$emit("onEvent", this.message)
        }
    }
}
</script>
<!-- scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效-->
<style scoped>
h3 {
    color: red;
}
</style>

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <MyComponents @onEvent="getDataHandle" />

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

<script>

import MyComponents from './components/MyComponents.vue';

export default {
  name: 'App',
  data() {
    return {
      message: ""
    }
  },
  components: {
    MyComponents
  },
  methods: {
    getDataHandle(data) {
      this.message = data
    }
  }
}
</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;
}
</style>

组件生命周期

分类

创建时：beforeCreate、created

渲染时：beforeMount、mounted （网络请求一般放到这里）

更新时： beforeUpdate、updated

卸载时：beforeUnmount、unmounted

vue引入第三方扩展

swiper中vue引入官方文档 https://swiperjs.com/vue/

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

Axios发起网络请求

Axios 是一个基于promise的网络请求库

安装

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")

//在组件中调用
this.$axios

网络请求基本示例

get请求（post请求同理）

axios({
      method: "get",
      url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
      data:{
          userid:"123",
          psw:"123456"
      }
    }).then(res => {
      this.chengpin = res.data.chengpinDetails[0]
    })

建议放在组件渲染完成后。

完整示例代码

<template>
  <div class="hello">
    <p>{{ chengpin.title }}</p>
  </div>
</template>

<script>
import axios from "axios"

export default {
  name: 'HelloWorld',
  data() {
    return {
      chengpin: {}
    }
  },
  mounted() {   //组件渲染完成
    axios({
      method: "get",
      url: "http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
    }).then(res => {
      this.chengpin = res.data.chengpinDetails[0]
    })
  }
}
</script>

注意

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

安装依赖 npm install --save querystring

转换参数格式：qs.stringify({})

简单使用

axios.get("url")
.then(res =>{
    console.log(res.data);
})


axios.post("url",stringify({
    user:"",
    psw:""
})).then(res =>{
    console.log(res.data);
})

Axios网络请求封装

在目录utils下新建request.js用来封装Axios网络请求

import axios from "axios";
import { resolve4 } from "dns";
import querystring from "querystring"

const errqrHandle = (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
})

//拦截器最常用的


//发送数据之前
instance.interceptors.request.use(
    config => {
        if (config.method === "post") {
            config.data = querystring.stringify(config.data)
        }
        //config:包含着网络请求的所有信息
        return config;
    },
    error => {
        return Promise.reject(error)
    }
)

//获取数据之前
instance.interceptors.response.use(
    response => {
        return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
    },
    error => {
        const { response } = error;
        //错误处理才是我们需要最关注的
        errorHandle(response.status,response.info)
    }
)
export default instance;

封装可以新建一个目录api，然后将所有api请求都放在这个文件夹。

path.js //存放路径

const base = {
    baseUrl:"主要域名，如:https://www.fish9.cn",
    chengpin:"/api/chengpin"
}

export default base;

index.js 存放请求的方法

import axios from "../utils/request"
import path from "./path"

const api ={
    //成品详情地址
    getChengpin(){
        return axios.get(path.baseUrl + path.chengpin)
    }
}

export default api

组件中使用

<script>
import api from "../api/index"
    
    export default{
        name:'HelloWorld',
        mounted(){
            api.getChengpin().then(res =>{
                console.log(res.data);
            })
        }
    }
</script>

页面关系管理

在vue中，我们可以通过vue-router路由管理页面之间的关系

Vue Router 是Vue.js的官方路由，它与Vue.js深度集成，让用Vue.js构建单页应用变得轻而易举。

在Vue中引入路由

第一步：安装路由 npm install --save vue-router

第二步:配置独立的路由文件

新建router目录，新建index.js

import { createRouter, createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView"
//配置信息中需要页面的相关配置
const routes = [
    {
        path: "/",
        name:"home",
        component: HomeView
    },
    {
        path: "/about",
        name:"about",
        //这是异步加载方式
        component: () => import("../views/AboutView.vue")
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

新建views文件夹两个文件HomeView.vue ，AboutView.vue

AboutView.vue

<template>
    <h3>关于页面</h3>
</template>

HomeView.vue

<template>
    <h3>首页</h3>
</template>

然后在main.js引入import router from "./router"，然后再改成：

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

App.vue

<template>
  <!-- 路由的显示入口 -->
  <router-view></router-view>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于</router-link>
</template>

<script>


export default {
  name: 'App'
}
</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;
}
</style>

路由传递参数

第一步：在路由配置中指定参数的key

    {
        path: "/newsdetails/:name",
        name: "newsdetails",
        component: () => import("../views/NewsDetailView.vue")
    }

第二步：在跳转过程中携带参数

<template>
    <ul>
        <li><router-link to="/newsdetails/百度">百度新闻</router-link></li>
        <li><router-link to="/newsdetails/网易">网易新闻</router-link></li>
        <li><router-link to="/newsdetails/头条">头条新闻</router-link></li>
    </ul>
</template>

第三步：在详情页面读取路由携带的参数

<template>
    <h3>{{ $route.params.name }}新闻详情</h3>
</template>