Vue3 基础

vue 开发前准备

安装Vue工具 vue CLi

Vue CLi是Vue.js开发的标准工具。

npm install -g @vue/cli

安装之后，就可以在命令行中访问vue命令，可以简单运行vue，看是否安装成功

vue --version

创建一个项目

vue create vue-demo 

不能出现大写

创建完成后

进入工程目录

vue run serve

项目就可以运行了

安装Vue高亮插件

在vscode中安装vetur或votar都行，前者针对vue2 ，后者针对vue3

模板语法

<template>
    <h3>模板语法</h3>
    <p> {{ message }}</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      message:"Hello Vue World"
    }
  }
}
</script>

原始HTML

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

<template>
  <div class="hello">
    <h3>模板语法</h3>
    <p>{{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      rawHtml:'<a href="http://httpbin.org">测试</a>'
    }
  }
}

属性Attribute

双大括号语法不能在HTML属性中使用，然而，可以用v-bind指令,v-bind可简写成:

<div id="dynamicId"></div>

这个代码中的id是确定不变的

使用了v-bind后，id变成动态的了

<template>
  <div class="hello">
    <h3>模板语法</h3>
    <div v-bind:id="dynamicId"></div>
  </div>
</template>

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

使用js表达式

在模板中，我们一直只绑定简单的property键值，Vue.js提供了完全的JavaScript表达支持

{{ number + 1 }}
{{ ok? "Yes":"NO" }}
{{ message.split('').reserve().join('') }}

条件渲染

根据条件不同，在页面上渲染不同的内容。

v-if

v-if用于条件性的渲染一块内容。这块内容只会在指令的表达式为true时被渲染。

<template>
  <div class="hello">
    <p v-if="flag">I have an apple </p>
    <p v-else>I have a banana</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return {
      flag:true
    }   
  }
}
</script>

v-show

也是用来控制页面显示内容的指令。

<p v-show="flag">Are you have an apple</p>

v-if和v-show的区别

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

v-if是惰性的：如果初始渲染条件为假，则什么也不做，直到条件第一次变为真时才开始渲染

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

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

列表渲染

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

<template>
  <div class="hello">
    <ul>
      <li v-for="item in newLists">
      {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      newLists:[
        {
          id:1001,
          title:"今日头条"
        },
        {
          id:1002,
          title:"腾讯新闻"
        },
        {
          id:1003,
          title:"新浪头条"
        },
      ]
    }
  }
}
</script>

维护状态

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

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们必须提供一个唯一的key属性：

<li v-for="item in newLists" :key="itme.id">

事件处理

监听事件

我们可以使用v-on指令来监听DOM事件，并在触发时执行一些JS

v-on可以简写成@

    <button v-on:click="counter+=1">点击+1</button>
    <button v-on:click="counter-=1">点击-1</button>
    <p>counter = {{ counter }}</p>

  data () {
    return{
      counter :1,
    }

在页面中就会显示counter累加或者递减。

事件处理方法

但是许多方法是很复杂的，所以吧js代码写在v-on指令中是不可行的。因此v-on还可以接受一个需要调用的方法名称

我们需要在data同级建立一个methods，来写入各种方法

在methods中接受data中的参数时，要使用this.

<template>
  <div class="hello">
    <button v-on:click="counter+=1">点击+1</button>
    <button v-on:click="counter-=1">点击-1</button>
    <button @click="clickadd">点击+1</button>
    <button @click="clicksub">点击-1</button>
    <p>i = {{ i }}</p>
    <p>counter = {{ counter }}</p>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return{
      counter :1,
      i:0,
    }

  },
  methods: {
    clickadd () {
      // 在事件中读取data中的属性，要使用this.属性
      this.i += 1

    },
    clicksub () {
      this.i -= 1
    }
  }
}
</script>

表单输入绑定

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

<template>
  <div class="hello">
    <input v-model="username" type="text" name="" id=""> <br>
    <input v-model="passwoed" type="password" name="" id=""><br>
    <button @click="getUserName">点击获取用户名</button>
    <button @click="getPWD">点击获取密码</button>
    <p> {{ username }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data (){
    return{
      username:"",
      passwoed:""
    }
  },
  methods:{
    getUserName(){
      console.log(this.username);
    },
    getPWD(){
      console.log(this.passwoed);
    }
  }
}
</script>

修饰符

.lazy

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加.lazy修饰符，从而转为在change（失去焦点后）事件后进行同步。

因为同步执行消耗较大

<input v-model.lazy="username" type="text" name="" id=""> 

.lazy好像对password不起作用

.trim 用来去掉用户输入的首位空格

组件基础

单文件组件

Vue单文件组件(.vue文件)是一种特殊的文件格式，它允许将Vue组件的模板、逻辑、样式封装在单个文件内

加载组件

• 第一步：引入组件 import MyComponetsVue from './componets/MyComponetsVue.vue'
• 第二步：挂载组件componets:{MyComponetsVue}
• 第三步： 显示组件<MyComponetsVue/>或<my-componets-vue/>

Prop组件交互

组件和组价之间是需要交互的，否则完全没关系
prop是你可以在组件上注册的一些定义

组件声明周期

每个组件在被创建都要经过一系列初始化过程–例如，需要设置数据监听，编译模板、将实例挂载到DOM，并实时更新DOM等。同时在这个过程中会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己代码的机会。

• 创建时：beforeCreate、created
• 渲染时：beforeMount、mounted
• 更新时：beforeUpdate、updated
• 卸载时：beforeUnmount、Unmount

<template>  
    <title>声明周期函数</title>
    <h3>声明周期函数</h3>
    <button @click="message='数据'">点击</button><br>
    <button @click="click">点击</button>
    <p>{{ message }}</p>

</template>

<script>
    export default {
        name:"MyComponets",
        data(){
            return {
                message:"",
                num:1,
            }
        },
        beforeCreate(){
            console.log("beforeCreate:组件创建之前");
        },
        created(){
            console.log("beforeCreate:组件创建之后");
        },
        beforeMount(){
            console.log("beforeCreate:组件渲染之前");
        },
        mounted(){
            console.log("beforeCreate:组件渲染之后");
        },
        beforeUpdate(){
            console.log("beforeCreate:组件更新之前");
        },
        updated(){
            console.log("beforeCreate:组件更新之后");
        },
        beforeUnmount(){
            console.log("beforeCreate:组件卸载之前");
        },
        unmounted(){
            console.log("beforeCreate:组件卸载之后");
        },
        methods:{
            click(){
                console.log(this.num += 1);
            }
        }
    }
</script>

Vue引入第三方

Swiper 是纯js打造的滑动特效插件，面向手机、平板等移动终端

Swiper能实现触屏焦点图，触屏切换、触屏轮播图等功能

npm install --save Swiper@8.1.6

轮播图

swiper官方文档

<template>
    <!-- 使用组件 -->
    <swiper :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide>
        <img src="../assets/河北彩花.gif" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/冴岛奈绪.gif" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/中森明菜.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/樱空桃.gif" alt="">
      </swiper-slide>
    </swiper>
</template>

<script>
  // 引入组件
  import { Pagination } from "swiper"
  import { Swiper,SwiperSlide } from 'swiper/vue'
  import "swiper/css"
  import "swiper/css/pagination"

export default {
  name: 'HelloWorld',
  // 挂载组件
  components:{
    Swiper,
    SwiperSlide,
  },
}
</script>

<template>
<!-- 指示器效果，轮播图下面的小圆点 -->
<swiper :modules="modules" :pagination="{ clickable: true }">
</template>

<script>

export default {
  name: 'HelloWorld',
  components:{
    Swiper,
    SwiperSlide,
  },
  // 实现轮播图的指示器
  data(){
    return {
      modules:[
        Pagination,
      ]
    }
  }
}
</script>

Axios网络请求

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

安装

npm install --save axios

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

<script>
import axios from "axios"
import QueryString from "qs"

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      chengpin:{
      }
    }
  },
  // get请求方式
  mounted(){
    axios({
      method:"get",
      url:"https://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
    }).then(res=>{
      // console.log(res.data);
      this.chengpin = res.data.chengpinDetails[0]
    })
    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);
    })
  }
}
</script>

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

• 安装依赖 npm install --save querystring
• 转换格式 QueryString.stringify()

axios请求的封装

在日常应用过程中，一个项目的网络请求会很多，此时一般采用的方案是将网络请求封装起来。

在src目录下创建文件夹utils，并创建文件request用来存储网络请求对象axios