day6_vue
day6_vue
1es6新语法
1.1模块化语法
1.模块化语法
默认导出 export default areaData
默认导入 import 导入对象别名 from './js/myData.js'
只能导一个对象
命名导入 export {myTest,areaData}
命名导出 import {myTest,areaData} from './js/myData.js'
可以导入导出多个对象
js文件导出
//导出json对象
//export default myTest
export {myTest,areaData}
html文件导入
<script type="module"> //需要支持模块化语法
//import 导入
//export 导出
import areaData from './js/myData.js'
import {myTest,areaData} from './js/myData.js'
console.log("通过模块化导入");
console.log(myTest);
console.log(areaData);
</script>
1.2箭头函数
//2箭头函数 ()=>{}
/*
定时函数
数组.forEach
//定义函数的写法
const myFun = (num1,num2)=>{
console.log(num1+num2);
}
1.3json对象修饰符
//3json对象 使用const修饰
let 临时变量时使用
//const 修饰对象时 不能通过=赋值 但是对象的内容可以操作和改变
const myJson = {name:'jack',age:15};
//myJson = {name:'rose'}
myJson.name = "rose"
console.log(myJson);
注意:函数 json对象 一般都用const修饰 临时变量再用let
2vue原理
1响应式数据原理
2虚拟dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="mytitle"></h1>
<input id="myarea" type="text"/>
</body>
<script>
/*响应式数据原理*/
// vue2响应式数据原理 数据劫持 Object 扩展属性时 改 get set的实现 把dom操作隐藏在其中
// vue3 数据劫持 简单数据类型 字符串 数字 bol ref 简单数据类型 复杂数据类型
// 代理对象 复杂数据类型 对象 数组 reactive 复杂数据类型
let myJson = {name:"jack"}
// //myJon.age = 15
// Object.defineProperty(myJson,'age',{
// get(){
// console.log("我要读取age的属性");
// },
// set(val){
// console.log("我要给age的属性赋值"+val);
// document.getElementById("mytitle").innerHTML = val
// }
// })
// //console.log(myJson);
// myJson.age = 55
let newJson = new Proxy(myJson,{
get(target,prop){
console.log(`尝试读取${prop}的值`);
},
set(target,prop,val){
console.log(`尝试给${prop}赋值${val}`);
if(prop == 'age'){
document.getElementById("mytitle").innerHTML = val
}
if(prop == 'addr'){
document.getElementById("myarea").value = val
}
}
})
// newJson.age=15
// console.log(myJson);
// console.log(newJson);
newJson.age=15
newJson.addr="科学大道1111"
/*虚拟dom*/
//html解析器 css解析器 js解析器
//逐行解释执行 如果有类似垃圾代码多 会造成页面卡顿
document.getElementById("mytitle").innerHTML = 1
document.getElementById("mytitle").innerHTML = 2
document.getElementById("mytitle").innerHTML = 3
</script>
</html>
3vue中js代码写法和规范
页面中需要提供根标签 vue会根据根标签中的内容 生成虚拟dom 并只对根标签中的内容生效
<div id="app">
<h1>{{myname}}</h1>
<div>姓名:{{myObj.name}}</div>
<div>年龄:{{myObj.age}}</div>
</div>
1.js代码中 需要引入vue的js 并创建vue对象
2.在setup函数中 检测vue需要使用的函数和变量 并通过数据劫持 或代理对象 生成响应式数据与页面元素的关联关系
3.setup函数中的变量和函数 如果需要在div中使用 需要通过return的json对象对外暴漏
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue对象
createApp({
setup(){
//设置vue参数
/*
响应式变量规则
1 简单数据类型 字符串 数字 bol ref()
2 复杂数据类型 对象 数组 reactive()
3 关键字 响应式数据 都会转成对象 const修饰
临时变量 let修饰
*/
//创建变量 创建函数
//只有初次渲染生效
const myname = ref("小明")
console.log(myname);
const myObj = reactive({name:'隔壁老王',age:55})
console.log(myObj);
return {
//对外暴漏 变量 函数
myname,myObj
}
}
}).mount('#app')
1.js代码中不再写dom操作了
2.把函数 变量... 都写入到setup函数中 并对外暴漏
安装vue插件
4vue模板语法
1插值表达式 {
在需要显示文本的部分 使用vue中的变量
插值表达式 {{}}
1基本作用 显示纯文本
2支持简单的代码处理 {{'亲爱的'+username}}
3支持函数处理 {{transName()}}
innerText
v-html 支持html解析
innerHTML 可以识别标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mystyle{
border: 1px solid black;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<div>欢迎:<span class="mystyle">{{username}}</span>登录</div>
<hr>
<div v-html="username2"></div>
</div>
</body>
<script type="module">
/*
插值表达式 {{}}
1基本作用 显示纯文本
2支持简单的代码处理 {{'亲爱的'+username}}
3支持函数处理 {{transName()}}
innerText
v-html 支持html解析
innerHTML 可以识别标签
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
const username = ref('rose')
const username2 = ref('j<b>ac</b>k')
const transName = ()=>{
if(username.value == 'rose'){
return "肉丝"
}
}
return {
username,transName,username2
}
}
}).mount('#app')
</script>
</html>
2v-bind属性绑定
v-bind:属性=""
让变量与属性关联
1.直接使用变量
2.支持表达式
3.配合函数 做复杂数据处理
属性绑定时 属性值 主要是字符串
特殊属性 disabled readonly 用bol值
注意: v-bind:属性="" 简写: :属性=""
了解:
class属性 支持普通处理方式 以字符串 控制样式值
也支持进阶控制 每个央视通过bol值动态控制
:class="{'cls1':clsStatus1,'cls2':clsStatus2,'cls3':clsStatus3}"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cls1{
width: 100px;
height: 100px;
border: 1px solid black;
}
.cls2{
background-color: blueviolet;
}
.cls3{
color: brown;
}
</style>
</head>
<body>
<div id="app">
<input :type="inputType" :value="username" :disabled="btnStatus"/>
<!-- <div :class="{'cls1':clsStatus1,'cls2':clsStatus2,'cls3':clsStatus3}"> -->
<div class="cls1" :class="mycls" >
testdiv
</div>
</div>
</body>
<script type="module">
/*
v-bind:属性=""
让变量与属性关联
1.直接使用变量
2.支持表达式
3.配合函数 做复杂数据处理
属性绑定时 属性值 主要是字符串
特殊属性 disabled readonly 用bol值
v-bind:属性="" 简写: :属性=""
了解:
class属性 支持普通处理方式 以字符串 控制样式值
也支持进阶控制 每个央视通过bol值动态控制
:class="{'cls1':clsStatus1,'cls2':clsStatus2,'cls3':clsStatus3}"
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
const username = ref('rose')
const inputType = ref('text')
const btnStatus = ref(false)
// const divcls = ref('cls2 cls3 cls1 ')
//,divcls
const clsStatus1 = ref(true)
const clsStatus2 = ref(false)
const clsStatus3 = ref(true)
const mycls = ref('cls2')
return {
username,inputType,btnStatus,clsStatus1,clsStatus2,clsStatus3,mycls
}
}
}).mount('#app')
</script>
</html>
3v-if 分支指令
v-if 通过条件分支 控制页面显示
单分支 v-if="bol值"
双分支 v-if="bol值"
v-else
多分支 v-if="xxx=xxx"
v-else-if="xxx=xxx"
v-else-if="xxx=xxx"
v-else
v-show 控制显示/隐藏 display:none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
正常访问看到的页面数据
<div v-if="isLogin">
精彩的付费内容.....
</div>
<div v-show="isLogin">
精彩的付费内容.....
</div>
<!--
<div v-else >
内容预览 充值之后看完整内容.......
</div> -->
<!-- <div v-if="vipGrade == 1">
普通小姐姐跳舞
</div>
<div v-else-if="vipGrade == 2">
高级小姐姐跳舞
</div>
<div v-else-if="vipGrade == 3">
顶级小姐姐跳舞
</div>
<div v-else>
大D小姐姐跳舞
</div> -->
</div>
</body>
<script type="module">
/*
v-if 通过条件分支 控制页面显示
单分支 v-if="bol值"
双分支 v-if="bol值"
v-else
多分支 v-if="xxx=xxx"
v-else-if="xxx=xxx"
v-else-if="xxx=xxx"
v-else
v-show 控制显示/隐藏 display:none
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
const isLogin = ref(false)
const vipGrade = ref(4)//1普通会员 2高级会员 3顶级会员 4私密会员
return {
isLogin,vipGrade
}
}
}).mount('#app')
</script>
</html>
4v-on事件绑定
1 函数需要定义在setup函数中 并对外暴漏
2 onclick ==== @click
3 调用的函数 如果不传参 可以不加括号
@click="myFun"
注意:
如果通过触发的函数 要改变页面中的数据(与事件绑定的函数)
需要对外暴漏 操作的数据 需要用响应式数据 ref reactive
如果程序运行过程中的公共函数 没有与页面绑定 不需要对外暴漏 可以直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>欢迎:{{username}}登录</h1>
<button @click="myFun">点我</button>
</div>
</body>
<script type="module">
/*
1 函数需要定义在setup函数中 并对外暴漏
2 onclick ==== @click
3 调用的函数 如果不传参 可以不加括号
@click="myFun"
注意:
如果通过触发的函数 要改变页面中的数据(与事件绑定的函数)
需要对外暴漏 操作的数据 需要用响应式数据 ref reactive
如果程序运行过程中的公共函数 没有与页面绑定 不需要对外暴漏 可以直接使用
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//不支持初次渲染之后的变化
//let username = 'jack'
//需要使用响应式变量
const username = ref('jack')
const myFun = ()=>{
console.log("运行了....");
username.value = 'rose'
getSum(1,2)
}
const getSum =(num1,num2)=>{
console.log(num1+num2);
}
return {
myFun,username
}
}
}).mount('#app')
</script>
</html>
5v-model双向绑定
单向绑定
model -------- > view
表单元素
model < -------- > view
v-model
输入类
v-model 代替value属性
<input type="text" v-model="textVal"/>
选择类
radio
v-model 分组 可以控制默认值
const gender = ref('3')
当用户改变选项时 gender值会变化
<input v-model="gender" type="radio" value="1" />男
<input v-model="gender" type="radio" value="2" />女
<input v-model="gender" type="radio" value="3" />女装大佬
checkbox
v-model 分组 可以控制默认值
const hobby = ref([2])
当用户改变选项时 hobby值会变化
<input v-model="hobby" type="checkbox" :value="1+''"/>唱歌
<input v-model="hobby" type="checkbox" :value="2"/>跳舞
<input v-model="hobby" type="checkbox" :value="'3'"/>打篮球
下拉列表
v-model 可以控制默认值
const area = ref('')
当用户改变选项时 area值会变化
<select v-model="area">
<option value="" disabled>---------请选择----------</option>
<option value="001">中国</option>
<option value="002">韩国</option>
<option value="003">泰国</option>
</select>
注意:
html元素属性值类型时字符串 如果想控制数据类型 可以做成属性绑定
:value="2" 数字
:value="'2'" 字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="textVal"/>
<button @click="changeText">改变数据</button>
<button @click="getText">读取数据</button>
<hr>
性别: <input v-model="gender" type="radio" value="1" />男
<input v-model="gender" type="radio" value="2" />女
<input v-model="gender" type="radio" value="3" />女装大佬
{{gender}}
<hr>
<input v-model="hobby" type="checkbox" :value="1+''"/>唱歌
<input v-model="hobby" type="checkbox" :value="2"/>跳舞
<input v-model="hobby" type="checkbox" :value="'3'"/>打篮球
{{hobby}}
<hr>
<select v-model="area">
<option value="" disabled>---------请选择----------</option>
<option value="001">中国</option>
<option value="002">韩国</option>
<option value="003">泰国</option>
</select>
{{area}}
</div>
</body>
<script type="module">
/*
单向绑定
model -------- > view
表单元素
model <-------- > view
v-model
输入类
v-model 代替value属性
<input type="text" v-model="textVal"/>
选择类
radio
v-model 分组 可以控制默认值
const gender = ref('3')
当用户改变选项时 gender值会变化
<input v-model="gender" type="radio" value="1" />男
<input v-model="gender" type="radio" value="2" />女
<input v-model="gender" type="radio" value="3" />女装大佬
checkbox
v-model 分组 可以控制默认值
const hobby = ref([2])
当用户改变选项时 hobby值会变化
<input v-model="hobby" type="checkbox" :value="1+''"/>唱歌
<input v-model="hobby" type="checkbox" :value="2"/>跳舞
<input v-model="hobby" type="checkbox" :value="'3'"/>打篮球
下拉列表
v-model 可以控制默认值
const area = ref('')
当用户改变选项时 area值会变化
<select v-model="area">
<option value="" disabled>---------请选择----------</option>
<option value="001">中国</option>
<option value="002">韩国</option>
<option value="003">泰国</option>
</select>
注意: html元素属性值类型时字符串 如果想控制数据类型 可以做成属性绑定
:value="2" 数字
:value="'2'" 字符串
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
const textVal = ref('jack')
const changeText = ()=>{
textVal.value = 'rose'
}
const getText = ()=>{
console.log(textVal.value);
}
const gender = ref('3')
const hobby = ref([2])
const area = ref('')
return {
textVal,changeText,getText,gender,hobby,area
}
}
}).mount('#app')
</script>
</html>
6遍历指令
v-for 遍历集合 生成dom元素
简化写法
<li v-for="遍历到的元素 in 集合">{{遍历到的元素.属性}}</li>
完整写法
<li v-for="(myNews,idx) in newsList" :key="idx">{{idx}}----{{myNews.content}}</li>
遍历时读取动态数据的方式
纯文本动态写入 {{myNews.xxx}}
属性动态写入 :属性="myNews.xxx"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<!-- <li v-for="myNews in newsList">{{myNews.content}}</li> -->
<li v-for="(myNews,idx) in newsList" :key="idx">{{idx}}----{{myNews.content}}</li>
</ul>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tbody>
<tr v-for="stu in stuList">
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.addr}}</td>
</tr>
</tbody>
</table>
<select v-model="currentArea">
<option value="">---------请选择----------</option>
<option v-for="area in areaList" :value="area.code">{{area.name}}</option>
</select>
{{currentArea}}
</div>
</body>
<script type="module">
/*
v-for 遍历集合 生成dom元素
<li v-for="遍历到的元素 in 集合">{{遍历到的元素.属性}}</li>
完整写法
<li v-for="(myNews,idx) in newsList" :key="idx">{{idx}}----{{myNews.content}}</li>
遍历时读取动态数据的方式
纯文本动态写入 {{myNews.xxx}}
属性动态写入 :属性="myNews.xxx"
*/
import { createApp, ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
let newsList = [{content:'新闻1'},{content:'新闻2'},{content:'新闻3'}]
let stuList = [ {name:'小明',age:15,addr:'科学大道1号'}
,{name:'小光',age:25,addr:'溜光大道1号'}
,{name:'小亮',age:35,addr:'光溜大道1号'}]
let areaList = [{name:'河南',code:1},{name:'河北',code:2},{name:'山东',code:3},{name:'山西',code:4}]
let currentArea = ref('')
return {
newsList,stuList,currentArea,areaList
}
}
}).mount('#app')
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<select v-model="prov" @change="changeCityList">
<option value="" disabled>---------请选择----------</option>
<option v-for="provInfo in provList" :value="provInfo.code" >{{provInfo.name}}</option>
</select>省
<select v-model="city" @change="changeAreaList">
<option value="" disabled>---------请选择----------</option>
<option v-for="cityInfo in cityList" :value="cityInfo.code" >{{cityInfo.name}}</option>
</select>市
<select v-model="area">
<option value="" disabled>---------请选择----------</option>
<option v-for="areaInfo in areaList" :value="areaInfo.code" >{{areaInfo.name}}</option>
</select>县区
<hr>
{{prov}}---{{city}}---{{area}}
</div>
</body>
<script type="module">
import { createApp, ref,reactive,onMounted,onUpdated } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import areaData from '/day731_vue/js/myData.js'
createApp({
setup(){
const prov = ref('')
const city = ref('')
const area = ref('')
const provList = ref([])
const cityList = ref([])
const areaList = ref([])
//记录切换中临时的城市列表
let currentCityList = []
//页面加载结束 加载省数据
onMounted(()=>{
provList.value = areaData
})
//切换省 换cityList
const changeCityList = ()=>{
//选中请选择
city.value = ''
area.value = ''
//清空选项
areaList.value = []
areaData.forEach(provData=>{
//如果遍历到的省 与选中的省编号相同
if(provData.code == prov.value){
//找到了市列表
console.log(provData.city);
//给临时变量赋值 方便县区联动
currentCityList = provData.city
//给城市列表 动态生成选项
cityList.value = provData.city
}
})
}
//切换市 换areaList
const changeAreaList = ()=>{
//选中请选择
area.value = ''
currentCityList.forEach(cityData=>{
if(cityData.code == city.value){
areaList.value = cityData.area
}
})
}
return {
prov,city,area,provList,cityList,areaList,changeCityList,changeAreaList
}
}
}).mount('#app')
</script>
</html>
5vue生命周期
参考课件声明周期图
钩子函数:
在vue声明周期执行过程中 可以加入自定义代码 在vue到特定时机是执行自定义代码
onMounted（） 这个钩子经常用来表示 页面加载结束 去后端加载数据
浙公网安备 33010602011771号