一、v-model双向绑定
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 单项绑定 -->
<input type="text" :value="msg">
<!-- 双向绑定 -->
<input type="text" v-model="msg">
<select v-model="hobby">
<option value="1">唱歌</option>
<option value="2">跳舞</option>
<option value="3">排球</option>
</select>
<h2>{{hobby}}</h2>
</div>
</body>
<script>
Vue.createApp({
data(){
return {
msg:"hello vue",
hobby:2,
}
}
}).mount("#app")
</script>
<body>
<div id="app">
<!-- 消息发送案例 -->
<div class="content">
<p v-for="item in arr">{{item}}</p>
</div>
<input type="text" v-model="msg" @keyup.enter="handleSend1" @keyup.ctrl.enter="handleSend2">
<select v-model="opt">
<option value="1">按下enter键发送</option>
<option value="2">按下ctrl+enter键发送</option>
</select>
<h1>{{msg}}</h1>
<h2>{{opt}}</h2>
</div>
</body>
<script>
let app = Vue.createApp({
data() {
return {
msg: "",
arr: ["1", "2"],
opt: 1
}
},
methods: {
handleSend1() {
if (this.opt == 1) {
this.arr.push(this.msg)
this.msg = ""
}
},
handleSend2() {
if (this.opt == 2) {
this.arr.push(this.msg)
this.msg = ""
}
}
},
})
app.mount("#app")
</script>
二、watch监听(侦听器)
<body>
<div id="app">
<button @click="handleAdd">新增学员</button>
<button @click="handleEdit">编辑学员</button>
<button @click="num++">修改num{{num}}</button>
<div v-for="(item,index) in stu">
序号:{{index}},姓名:{{item.name}},成绩:{{item.score}}
</div>
</div>
</body>
<script>
Vue.createApp({
data() {
return {
stu: [
{ name: "张三丰", score: 100 },
{ name: "张翠山", score: 60 },
{ name: "张无忌", score: 90 },
{ name: "张无忌", score: 90 },
],
num:80
}
},
watch:{
// 浅监听
/* stu(){
console.log("检测到了stu的变化");
}, */
num(){
console.log("检测到了num的变化");
},
// 深监听
stu:{
handler(){
console.log("深度监听了stu的变化");
},
deep:true,//开启深度监听
}
},
methods:{
handleAdd(){
let arr = [...this.stu,{
name:"丽丽",score:88
}];
this.stu = arr;
},
handleEdit(){
this.stu[0].name="妮妮"
}
}
}).mount("#app")
</script>
三、生命周期钩子函数
- 创建阶段
- 渲染阶段
- 更新阶段
- 销毁阶段
3.1 beforeCreate
在组件实例初始化完成之后立即调用
beforeCreate() {
console.log("vue准备创建了");
}
3.2 created
在组件实例处理完所有与状态相关的选项后调用
created(){
console.log("vue对象准备完毕");
}
3.3 beforeMount
在组件被挂载之前调用
beforeMount() {
console.log("准备渲染了");
}
3.4 mounted
在组件被挂载之后调用
mounted() {
console.log("渲染完毕了");
}
3.5 beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用
beforeUpdate() {
console.log("即将更新");
}
3.6 updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用
updated() {
console.log("更新完毕");
}
3.7 beforeUnmount
在一个组件实例被卸载之前调用
beforeUnmount() {
console.log("准备卸载")
}
3.8 unmounted
在一个组件实例被卸载之后调用
unmounted() {
console.log("卸载完毕")
}
四、axios异步请求
基于 Promise 对象封装而成的,专门用于发起 http 异步请求的方法库 axios网址
4.1 回调函数的方式 【可能会导致回调地狱】
$.ajax({
url:'',
success:(res)=>{
}
})
4.2 promise 写法
axios({
url:''
}).then(res=>{
})
4.3 使用 axios 请求在线接口
axios({
url:'',
method:'GET',
headers:{ //给后端携带验证信息的请求头
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16350616353589329939070977"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res);
})
<body>
<div id="app">
<div v-for="item in movieList">
<img :src="item.poster" alt="">
{{item.name}}
</div>
</div>
</body>
<script>
Vue.createApp({
data(){
return{
movieList:[]
}
},
created() {
axios({
url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2000388",
method:"GET",
headers:{//携带一些验证信息给后端
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16832856734362668865486849","bc":"110100"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res);
this.movieList=res.data.data.films
})
},
}).mount("#app")
</script>
五、class动态绑定几种方式
5.1 三目
<div class="box" :class="isActive?'active':''">三目</div>
isActive:true
5.2 对象
<div class="box" :class="{'active':isActive}">对象</div>
isActive:true
5.3 数组+对象
<div :class="['box',{'active':isActive}]">数组+对象</div>
isActive:true,
5.4 数组+三目
<div :class="['box',isActive?'active':'']">数组+三目</div>
5.5 数组
:class="['box']"
六、内联样式的绑定
<div class="box" :style="{'background-color':bgColor}"></div>
bgColor: "blue"
七、组件化
7.1 单文件组件(SFC-Single File Component)
文件名为xxx.vue
7.2 什么是组件化
- 组件是一个独立封装,带有功能的一个代码板块
- 组件三要素:
- 结构 HTML
- 样式 CSS
- 功能 JS、JQuery、Vue
7.3 为什么采用组件化
- 提高代码的复用性、提升开发效率
- 项目可维护性较好
7.4 如何实现组件化开发
- 封装组件
- 挂载组件
- 调用组件
7.5 组件的复用性
- 开放封闭 原则
- 开放 组件应该提供一些供使用者可自定义调整的接口 【为了使用更灵活】
- 封闭 组件内部的通用功能,应该在内部实现后,方便直接调用 【使用更便捷】
7.6 组件的两种注册方式
- 全局注册
// 全局注册组件
app.component("my-num", {
template: `<button @click="handleNum">组件按钮{{num}}</button>`,
data() {
return {
num: 110,
};
},
methods: {
handleNum() {
this.num++;
},
},
});
- 局部注册
// 局部注册
components: {
"my-num": {
template: `<button @click="handleNum">组件按钮{{num}}</button>`,
data() {
return {
num: 110,
};
},
methods: {
handleNum() {
this.num++;
},
},
},
"my-select": {},
},
八、props 组件传参(父传子)
在组件内部开放一个数据接口,供用户向组件内部传递自定义的数据
8.1 在组件内部定义 props
props:['list','holder'],
8.2 在调用组件的时候,传递 props
<my-select :list="food" holder="请选择食物"></my-select>
8.3 命名规范
- 全小写 listdata
- 全大写 LISTDATA const 定义的常量才会使用
- 小驼峰 listData
- 大驼峰 ListData
- 烤串命名法 list-data
8.4 props 命名要求
- 组件外部全小写传递(list),内部全小写接收(list)
- 组件外部烤串传递(list-data),内部使用小驼峰接收(listData)
<body>
<div id="app">
<my-select :list-data="skill"></my-select>
<my-select :list-data="food"></my-select>
</div>
</body>
<script>
let app = Vue.createApp({
//创建vue应用
data() {
//数据包
return {
skill: ["HTML", "Vue"],
food: ["火锅", "拱嘴", "冰粉凉虾"],
};
},
});
app.component("my-select", {
template: `<div class="my-select">
<input type="text"/>
<ul>
<li v-for="item in listData">{{item}}</li>
</ul>
</div>`,
props: ["listData"], //当前组件调用时可以接收一个list属性参数
});
app.mount("#app");
</script>
select组件交互
<body>
<div id="app">
<my-select :list-data="skill"></my-select>
<my-select :list-data="food"></my-select>
</div>
</body>
<script>
let app = Vue.createApp({
//创建vue应用
data() {
//数据包
return {
skill: ["HTML", "Vue"],
food: ["火锅", "拱嘴", "冰粉凉虾"],
};
},
});
app.component("my-select", {
template: `<div class="my-select">
<input type="text" @focus="isShow=true" @blur="isShow=false" :value="msg"/>
<ul v-if="isShow">
<li v-for="item in listData" @mousedown="handleMsg(item)">{{item}}</li>
</ul>
</div>`,
props: ["listData"], //当前组件调用时可以接收一个list属性参数
data() {
return {
isShow: false,
msg: "",
};
},
methods: {
handleMsg(item) {
this.msg = item;
},
},
});
app.mount("#app");
</script>