vue作业

mttp02

已于 2023-02-07 23:20:43 修改

阅读量562

点赞数

文章标签： vue.js javascript 前端

于 2023-02-06 22:55:10 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128907912

版权

这篇文章详细介绍了Vue.js的基本概念和模板语法，包括数据绑定、事件处理、条件渲染、列表渲染以及组件系统。还提到了Vue2与Vue3之间的差异，如Vue3中对拦截器的改进，并且讨论了数据响应性、计算属性和watcher的使用。此外，还涵盖了网络请求库axios的使用方法。

摘要由CSDN通过智能技术生成

VUE

vue引入

<div id="box">
{{10+20}}
{ myname }}
</div>

<div>
{{10+20}}
</div>

<script>
	new vue({
		el : "#box"
		data:{
		myname: "kerwin"
		}

			}
		)
</script>

将box交给vue管理
将myname替换成kerwin

vue拦截原理

get set拦截
访问和修改可以被感知到

<script>
var obj = {
}
Object.defineProperty(obj, "myname",i
get({
console.log( "get")},
set(){
console.log( "set")
}
})</script>

注意:vue3的变化
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map 变化;
2、无法监听Class类型的数据;
3、属性的新加或者删除也无法监听;
4、数组元素的增加和删除也无法监听。

-vue模板语法-1

<button @click="handlechange()">change</button>

绑定点击事件

new Vue({
el :"#box" ,
data:{
myname : "kerwin",
myage:100
},


methods:{
handleChange()i
console. log( "handlechange")
vm.myname="tiechui"
vm.myage=18
}
}})

点击切换

<div :class="whichcolor">切换背景色</div>
<div :class="iscolor?' red ' : ' yellow’">切换背景色222</div>

:class是动态绑定
也支持运算符

-vue模板语法-2

<!-- v-show v-if 指令-->
<div v-show="isShow">我是动态显示和隐藏</div>

在这里插入图片描述
先设置为false

然后取反

<ul>
<li v-for="data in list">
{{data}}//临时变量
</li>
</ul>

(⑵指令∶是带有v-前缀的特殊属性
v-bind动态绑定属性
v-if 动态创建/删除
v-show动态显示/隐藏
v-on:click绑定事件
v-for遍历
v-model双向绑定表单

-on:click => @click

-todolist

<div id="box">
<input type="text" v-model="mytext"/><!-- {{mytext}} -->
<button @click="handleAdd()">add</button>
<ul v-show=" datalist.length">
<li v-for="data in datalist">
{{data}}
<button @click="handleDel(index)">del</button></li>
</ul>

<div v-show=" !datalist.length">待办事项空空如也</div>

</div>


<script>
var vm = new Vue({
el: "#box",
data:{
datalist: [ "1111","2222", "3333"],
mytext: "aaaaa"
},
methods:{
handleAdd(){
//console.log("获取value" ,this.mytext)
this.datalist.push(this.mytext)//清空
this.mytext = ""},
handleDel(index){
console.log("del",index)

this.datalist.splice(index,1)

}
}
})
</script>

-v-html指令

在这里插入图片描述
v-html容易受到攻击，必须是信任的

-点击变色

在这里插入图片描述

<div id="box">
<ul>
<li v-for="(data,index) in datalist" :class=" current===index?'active' :' '     "@click="handleclick(index)">
{{data}}
</li>
</ul>
</div>

<script>
methods:{
handleclick(index){
console.log(index)
this.current = index
}
}
</script>

:class=" current===index?'active ’ : ’ ’ "

-vue2-class&style


<div id="box">
<div :class="classobj">动态切换class-1-对象</div>
<div :class="classarr">动态切换class-2-数组</div>


<div :style="styleobj">动态切换style-1-对象</div>
<div :style="stylearr">动态切换style-2-数组</div>

</div>

<script>

var vm =new Vue({

el : "#box",
data:{
classobj:{
aa:true,
bb:true,
cc:false
},
classarr: [ "aa" , "bb"],
styleobj:{
baqkgroundColor:'red'

}
})
</script>

vue2解决方案, Vue.set(对象,属性，true)
后期 添加属性方法

vue3支持动态增加属性的拦截

在这里插入图片描述
VUE3
改成函数

<script>
var obj = {
data(){
		return {
			myname: "kerwin"

handleAdd(){
console.log( "add" ,this.mytext)
this.classobj.dd=true
}
		}
},
methods:{
}
}
Vue.createApp(obj).mount( "#box")
</script>

-条件渲染

<!-- <div v-if="isCreated">111111</div>
<div v-else>222222</div> -->

el : "#box",data:{ iscreated:false,datalist:[ { title: "11111" ,state:0 }, { title: "22222", state:1 }, { title: "33333", state:2 }, { title: "4444", state:3 }
状态码

<ul>
<li v-for='item in datalist'>
{{item.title}}---
<span v-if="item.state===O">未付款</span>
<span v-else-if="item.state===1">待发货</span>
<span v-else-if="item.state===2">已发货</span>
<span v-else>已完成</span>
</li>
</ul>

template就是个包装元素,不会真正创建在页面上.

<div id="box">
<template v-if="iscreated">
<div>11111111</div>
<div>22222222</div>
<div>33333333</div>
</template>
</div>

-列表渲染

在这里插入图片描述
遍历

key

<li v-for='item in datalist'  :key="item.id">

-检测数组变动

在这里插入图片描述

事件处理器

<button @click="handleAdd1()">add-1-函数表达式</button>
<button @click="handleAdd2" >add-2-函数名</button>

<button @click="handleAdd1($event,1,2,3)">add-1-函数表达式</button>

没（）不用传参，拿到事件对象

（）自定义参数传过去
在这里插入图片描述

-事件修饰符

<ul @click.self="handleulclick">
//
<li @click.stop="handleLiclick">1111</li>

阻止冒泡


<li @click.once="handleLiclick">3333</li>
<a href="http://www.baidu.com" @click.prevent>跳转</a>

//阻止跳转

-按键修饰符

<input type="text" @keyup.enter="handlekeyup"/>

<div>
<h2>注册页面-兴趣爱好</h2>
<input type="checkbox" v-model="checkList" value="vue" /> vue
<input type="checkbox" v-model="checkList" value="react"/>react
<input type="checkbox" v-model="checkList" value="wx"/> 小程序
<input type="radio" v-model="select" value="a"/>男
<input type="radio" v-model="select" value="b"/>女

</div>
<script>
var vm = new Vue({el: "#box" ,
data: {
mytext: localstorage.getItem( "username" ),
isRemember:true,
checkList:[]
select: "".

},
</script>

在这里插入图片描述

-表单修饰符

<input v-model.1azy="mytext" />{{mytext}}
//不同步更新
<input type="text" v-model.trim= "myusername"/>

去除首尾空格

-计算属性

{{ myComputedName }}
computed’{
myComputedName(){
return 1111
}
}

f{ myComputedName }}有缓存
f{ myMethodName()}

watch

1.·方法==》·事件绑定，·逻辑计算。可以不用return，没有缓存
2．计算属性(重视结果)=》︰解决模板过重问题，必须有return ，只求结果,有缓存，同步。
3. watch（重视过程)，监听一个值的改变。不用返回值﹐异步同步

<script>
watch:{
mytext(newvaL){
console.log("改变了" ,newvaL)
setTimeout(()=>{
this.datalist = this.originList.filter(item=>
item.includes(newvaL)·)
},1000)
</script>

-fetch-get

handleFetch(){
fetch( "./json/test.json")
.then(res=>res.json())
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})

}

fetch-post

普通字符串

fetch("**",{
method : 'post',
headers: {
"Content-Type" : "application/x-www-form-urlencoded"}，
body: "name=kerwin&age=100",
}).then(res=>res.json() ) .then(res=>iconsole.log(res)});

要JSON字符串时

fetch("https://m.vip.com/server.html?rpc&method=pageCache&f=www&_=1563946036520",{
method : ' post',
headers: {
"Content-Type" : "application/json"},
body:JSON.stringify({
name: "kerin",
age:100
})
}).then(res=>res.json()).then( res=>{console.log(res)})3

axios

methods:{
handleclick(){
axios.get("./json/maoyan.json").then(res=>{
console.log (es.data.data.films)
})
}}

过滤器

在这里插入图片描述
vue3不支持

-组件定义

<div id="box">
<navbar></navbar>
<navbar></navbar>

<script>
//定义一个全局的组件
vue. component( "navbar",{
// dom，js ,css
template: `<div style="background :red">
<button @click="handleLeft">left</button>
猫眼电影-{{mynme}}
<button @click="handleRight">right</button>
</div>`,
methods:{
handleLeft(){
console.log("left")},
handleRight(){
console.log( "right")
}
},
computed:{},
watch:{},
//data必须是函数写法
</script>

// 1．起名字:js驼峰不行，html链接-连接符
// 2. dom片段没有代码提示没有高亮显示- vue单文件组件解决
// 3. css只能写成行内。- vue单文件组件解决
//4. template包含一个根节点
//5．组件是孤岛,无法【直接】访问外面的组件的状态或者方法。-间接的组件通信来交流。
// 6．自定义的组件data必须是一个函数，
//7．所有的组件都在一起，太乱了— vue单文件组件解决
. le nini

-全局&局部组件

定义全局变量

Vue.component( "child",{
template:`
<div style="background:yellow">公司标语</div>
`
})

components:{
"kerwinChild":{
template:`
<div>child</div>
`
}
}

父传子

在这里插入图片描述

动态绑定，v-show控制显示

属性验证&默认属性

在这里插入图片描述

子传父场景

<navbar myname="电影":myright="false" :myparent="parent"></navbar>
<navbar myname="影院":mypapent="parent"></navbar>

template: `<div>
<button>left</button>
<span>{{myname}}--{fmyrarent}}</span>
<button v-show="myright" >right</button>
</div>`
})

<body>
<div id="box">
<navbar @myevent="handleEvent"></navbar><sidebar v-show="isShow"></sidebar>
</div>
<script>
vue.component( "navbar", {
template:`
<div style="background-color: red; ">
<button @click="handleclick()">点击</button>-导航栏
</div>`
,
methods:{
handleclick(){
/ / console.log("子传父，告诉父组件，取反您的isShow"
this.$emit( "myevent")
}
}
</script>