目录
Vue是什么？
Vue是前端优秀框架，是一套用于构建用户界面地渐进式框架
为什么要学习Vue
1.Vue是目前前端最火地框架之一
2.Vue是目前企业技术栈中要求地知识点
3.Vue可以提升开发体验
4.Vue学习难度较低
5....
Vue开发前地准备
安装Vue工具 vue CLI
Vue CLI 是Vue.js开发地标准工具，Vue CLI是一个基于Vue.js进行快速开发地完整系统
npm install -g @vue/cli安装之后，你可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
vue --version创建一个项目
运行以下命令来创建一个新项目（注意：项目名不能存在大写）
vue create vue-demo温馨提示
在控制台中，可以用上下键调整选择项
在控制台中，可以用空格（spacebar)选择是否选中和取消选中
可以选择默认项目模板，或者选“手动选择特性”来选取需要的特性。
我们选择Babel和Progressive Web App (PWA) Support 两个选项即可
温馨提示
在学习期间，不要选中 Linter/Formatter以避免不必要的错误提示
Vue目前有两个主流大版本vue2和vue3,我们本套课程选择vue3最新版本
配置放在哪里？In delicated config files 专用配置文件或者 in package.json在package.json文件
将其保存为未来项目的预置？y代表保存，并添加名字，n不保存
创建成功如下提示信息
运行项目
第一步：进入项目根目录 cd vue-demo
第二步：运行 npm run serve 启动项目
安装Vue高亮插件
VSCode中安装 vetur或者volar都可，前者针对Vue2版本，后者针对Vue3版本
模板语法
文本
数据绑定最常见的形式就是使用“Mustache"(双大括号）语法的文本插值
<span>Message:{{msg}}</span>一般配合js中的data()设置数据
export default{
name:'Helloworld',
data(){
return{
msg:"消息提示"
}
}
}原始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.itbaizhan.com'>百战</a>"
}属性Attribute
Mustache语法不能在HTML属性中使用，然而，可以使用v-bind指令
<div v-bind:id="dynamicId"></div>data(){
return{
dynamicId:1001
}
}温馨提示
v-bind: 可以简写成 :
使用JavaScript表达式
在我们的模板中，我们一直都绑定简单的propery键值，Vue.js都提供了完全的JavaScript表达式支持
{{number+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}这些表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!--这是语句，不是表达式：-->
{{var a=1}}
<!--流程控制也不会生效，请使用三元表达式-->
{{if(ok) {return message}}}条件渲染
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令地表达式返回true值的时候被渲染。
<p>v-if="flag"我是孙猴子</p>data() {
return{
flag:true
}
}v-else
你可以使用v-else指令来表示v-if 的"else块”
<p v-if="flag">我是孙猴子</p>
<p v-else>你是山猴子</p>data() {
return{
flag:false
}
}v-show
另一个用于条件性展示元素的选项是v-show指令
<h1 v-show="ok">Hello!</h1>v-if VS 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一个提示，以便它能跟踪每个节点的身份，从而重用和重新排列现有元素，你需要为每项提供唯一的key attribute:
<div v-for="(item,index) in items :key="item.id||index">
<div>
<!--内容-->
</div>事件处理
监听事件
我们可以使用v-on指令(通常缩写为@符号)来监听DOM事件，并在出发事件时执行一些JavaScript。用法为v-on:click="methodName" 或使用快捷方式@click="methodName"
<button @click="counter+=1">Add 1</button>data(){
return {
counter:0
}
}事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把JavaScript代码写在v-on指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<button @click="reet">Greet</button>methods:{
greet(event){
//`event` 是原生DOM event
if(event){
alert(event.target.tagName)
}
}
}内联处理器中的方法
这是官方的翻译称呼，其实我们可以直接叫他"事件传递参数"
<button @click="say('hi')">Say hi</button>
<button @click="say('what')">Say what</button>method:{
say(message){
alert(message)
}
}表单输入绑定
你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户输入事件来更新数据，并在某种极端场景下进行一些特殊处理。
<input v-model="message" placeholder="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组件的模板、逻辑与样式封装在单个文件中
<template>
<h3>单文件组件</h3>
</template>
<script>
export default{
name:"MyComponent"
}
</script>
<!--scoped:如果在style中添加此属性，就代表着，当前样式，只在当前组件中生效-->
<style scoped>
h3{
color:red
}
</style>加载组件
第一步：引入组件 import MyComponent from './components/MyComponent.vue'
第二步：挂载组件components:{MyComponent}
第三步：显示组件<MyComponent />或者<my-component />
组件的组织
通常一个应用会以一颗嵌套的组件树的形式来组织
Props组件交互
组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了
Prop是你可以在组件上注册的一些自定义attribute
<my-component :title="标题" :names="names"/><template>
<h3>单文件组件</h3>
<p>{{title}}</p>
<ul>
<li v-for="(item,index) in names" :key="index">{{item}}</li>
</ul>
</template>
<script>
export default{
name:"MyComponent",
props:{
title:{
type:String,
default:""
},
names:{
type:Array,
//数组和对象必须使用函数进行返回
default:function(){
return[]
}
}
}
}
</script>
Prop类型
Prop传递参数其实是没有类型限制的
prop:{
title:String,
likes:Number,
isPublished:Boolean,
commentIds:Array,//数组和对象必须使用函数进行返回
author:Object,
callback:Function
}温馨提示
数据类型为数组或者对象的时候，默认值是需要返回工厂模式
自定义事件组件交互
自定义组件可以在组件中反向传递数据，prop可以减肥数据从父组件传递到字组件，那么反向如何操作呢，就可以利用自定义事件实现$emit
<template>
<h3>单文件组件</h3>
<button @click="sendHandle">发送数据</button>
</template>
<script>
export default{
name:"Mycomponent",
methods:{
sendHandle(){
//参数1：字符串：理论上是随便的，但是需要具有意义
//参数2：传递的数据
this.$emit("onCustom",数据)
}
}
}
</script><template>
<my-componentVue @onCustom="getData">
</template>
<script>
import MyComponentVue from '/components/MyComponent.vue'
</script>
export default{
name:'App',
components:{
MyComponentVue
},
methods:{
getData(data){
console.log(data);
}
}
}组件生命周期
每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己的代码机会
为了方便记忆，我们可以将他们分类：
创建时：beforeCreate、created
渲染时：beforeMount、mounted
更新时：beforeUpdate、updated
卸载时：beforeUnmount、unmounted
Vue引入第三方
Swiper 开源、免费、强大的触摸滑动插件
Swiper 时纯javascript打造的滑动特效插件、面向手机、平板电脑等移动终端
Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果
温馨提示
安装指定版本：npm install --save swiper@8.1.6
基础实现
<template>
<div class="hello">
<swiper class="hello">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</template>
<script>
import{ Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/css';
export default{
name:'HelloWorld',
components:{
Swiper,
SwiperSlide,
}
}
</script>添加指示器
<template>
<div class="hello">
<swiper class="mySwiper" :modules="modules" :pangination="{clickable:true}">
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
</swiper>
</div>
</template>
<script>
import {Pagination} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/css';
import 'swuper/css/pagination';
export default{
name:'HelloWorld',
data(){
return{
modules:[Pagination]
}
}
},
compinents:{
Swiper,
SwiperSlide,
}
</script>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请求
axios({
method:"get",
url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res=>{
console.log(res.data);
})post请求
温馨提示
post请求参数是需要处理的
1.安装依赖：npm install --save querystring
2.转换参数格式：qs.stringify({})
axios({
method:"post",
url:"http://iwenwiki.com/api/blueberryapi/login.php",
data:qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
})
}).then(res=>{
console.log(res.data);
})快捷方案
get请求
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php")
.then(res=>{
console.log(res.data);
})post请求
axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
}))
.then(res=>{
console.log(res.data);
})
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
