vue啊哈哈哈哈哈哈哈哈 - 详解
day6_vue
1js发展过程
原生js ---->js扩展库 jQuery ------> js框架 (减少程序中的dom操作)
前端常见框架
React angularJs Vue.js
2VUE
VUE3 版本 使用组合式API
3vue基本效果
减少dom操作
title
我的变量的值:{{myMsg}}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
/*
1. 创建一个Vue实例
2. 创建使用的变量
3. 变量与页面元素 通过vue的标记 关联
4. 自动渲染页面
*/
const { createApp, ref } = Vue
createApp({
setup(){
let myMsg = "jack";
return{
myMsg
}
}
}).mount('#app')
</script>
4vue原理
title
<script>
//document.getElementById('myTitle').innerHTML = 'hello world';
/*
1.vue响应式数据的原理
改页面页面自动渲染
数据劫持 vue2核心原理(框架加载时如果对象复杂 比较慢) (扩展vue对象属性 改get/set方法 隐藏dom操作)
(数字 字符串 bol值)
代理对象 vue3核心原理(对象属性代理+数据劫持)
(数组 自定义对象)
2.虚拟dom
生成虚拟dom模板 根据根标签生成
减少页面渲染次数 提高显示效率 减少卡顿
*/
let myJson = {name:"jack",address:"北京"};
//myJson.address = "beijing";
//
// Object.defineProperty(myJson,'address',{
// get(){
// console.log("尝试读取address属性的值");
// },
// set(val){
// console.log("尝试设置address属性的值"+val);
// document.getElementById('myTitle').innerHTML = val;
// }
// })
// myJson.address = "北京"
let newJson = new Proxy(myJson,{
get(target,prop){
console.log(`读取属性${prop}:`+target[prop]);
},
set(target,prop,value){
console.log(`尝试设置属性${prop}:`+value);
if(prop=="address"){
document.getElementById('myTitle').innerHTML = value;
}
if(prop=="name"){
document.getElementById('myText').value = value;
}
}
})
//newJson.address = "北京"
// console.log(myJson);
// console.log(newJson);
newJson.address = "北京2"
newJson.name = "张三"
document.getElementById('myTitle').innerHTML = 1;
document.getElementById('myTitle').innerHTML = 2;
document.getElementById('myTitle').innerHTML = 3;
</script>
5js模块化语法
/*
export 导出
import 导入
两种导入导出方式
默认导入导出
export default myName;
import name from './js/myjs.js'
命名导入导出
export {myName,myJson,myFun}
import { myName,myFun } from './js/myjs.js' 数量可以不对应 名称必须对应
*/6vue中创建变量和函数的语法
变量和函数 需要属于vue对象 变量和函数 都要写在setup函数中 才能与vue有关系
//ref 简单类型数据(使用数据劫持)
//js中 需要添加.value
//页面中 直接使用变量名
const msg2 = ref("hello world2")
const msg3 = ref({name:"张三",age:18})//ref 可以兼容复杂数据类型
//reactive 复杂类型数据(使用代理对象)
//js中 不需要添加.value
//页面中 直接使用变量名
const msg4 = reactive({name:"张三",age:18})
//普通变量
let msg = "hello world"函数
const myFun = ()=>{
console.log("myFun");
}
myFun()
title
{{msg2}}
名字:{{msg3.name}}
年龄:{{msg3.age}}
名字:{{msg4.name}}
年龄:{{msg4.age}}
<script type="module">
import { createApp,ref,reactive} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
//初次渲染生效 后续监听到变化时 不生效
let msg = "hello world"
//使用vue响应式数据函数
//ref 简单类型数据(使用数据劫持)
//js中 需要添加.value
//页面中 直接使用变量名
//reactive 复杂类型数据(使用代理对象)
//js中 不需要添加.value
//页面中 直接使用变量名
//如果是 数字 bol值 字符串
//vue响应式变量 修饰符使用const
//记录程序执行过程的变量 使用let
const msg2 = ref("hello world2")
const msg3 = ref({name:"张三",age:18})
const msg4 = reactive({name:"张三",age:18})
console.log(msg3);
msg2.value = "hello world3"
msg3.value.name = "李四"
msg4.name = "王五"
//函数方式与之前相同
const myFun = ()=>{
console.log("myFun");
}
myFun()
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
msg,msg2,msg3,msg4
}
}
}).mount('#myapp')
</script>
7vue指令(页面如何与变量和函数关联)
注意:各种模板语法 要在页面中使用 必须对外暴漏变量和函数
7.1插值表达式
1.插值表达式 {{变量}} 显示文本
2.v-html 可以解析html标签 不建议用 (在js中 不要涉及dom操作)
title
欢迎{{name}}登录{{num1+num2}}
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
/*
各种模板语法 要在页面中使用 必须对外暴漏变量和函数
1.插值表达式 {{变量}} 显示文本
2.v-html 可以解析html标签 不建议用 (在js中 不要涉及dom操作)
*/
createApp({
setup(){
//使用 变量 函数
const name = ref('rose')
const name2 = ref('rose')
const num1 = ref(1)
const num2 = ref(2)
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
name,num1,num2,name2
}
}
}).mount('#myapp')
</script>
7.2属性绑定
v-bind 属性绑定
给html的属性 绑定变量
v-bind:value="变量" :value="变量"
常用属性值 字符串 数字 (禁用 只读)布尔值
class属性(知道即可) 可以配置json对象 每个样式单独配置bol决定是否显示
title
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
/*
v-bind 属性绑定
给html的属性 绑定变量
v-bind:value="变量" :value="变量"
常用属性值 字符串 数字 (禁用 只读)布尔值
class属性 可以配置json对象 每个样式单独配置bol决定是否显示
*/
createApp({
setup(){
const div1status = ref(false)
const div2status = ref(false)
//使用 变量 函数
//bol 数字 字符串
const msg = ref(1)
const inputType = ref("button")
const inputStatus = ref(false)
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
msg,inputType,inputStatus,div1status,div2status
}
}
}).mount('#myapp')
</script>
7.3分支指令
v-if 分支指令
单分支 v-if="条件"
双分支 v-if="条件" v-else
多分支 v-if="表达式返回bol值" v-else-if="表达式返回bol值" v-else
v-show 显示/隐藏指令
控制样式的显示/隐藏
title
普通页面
微信:xxxxx
微信:xxxxx
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
/*
v-if 分支指令
单分支 v-if="条件"
双分支 v-if="条件" v-else
多分支 v-if="表达式返回bol值" v-else-if="表达式返回bol值" v-else
v-show 显示/隐藏指令
控制样式的显示/隐藏
*/
createApp({
setup(){
//使用 变量 函数
let isVip = ref(false)
let vipGrade = ref(0)//
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
isVip,
vipGrade
}
}
}).mount('#myapp')
</script>
7.4事件指令
//全局函数不能正常触发
//1.函数需要写在setup函数中 才能正常触发
//2.onclick 变成 v-on:click
//3. v-on:click="myTest" myText函数的()可以省略
//4. 通过函数 改变数据时 数据必须是相应式数据 ref reactive
// ref对象.value reactive对象.属性名
//5. 如果封装的公共函数 再div中没有调用 不需要对外暴漏
//6. v-on:事件 简写为 @事件
title
{{title}}
<script type="module">
//全局函数不能正常触发
//1.函数需要写在setup函数中 才能正常触发
//2.onclick 变成 v-on:click
//3. v-on:click="myTest" myText函数的()可以省略
//4. 通过函数 改变数据时 数据必须是相应式数据 ref reactive
// ref对象.value reactive对象.属性名
//5. 如果封装的公共函数 再div中没有调用 不需要对外暴漏
//6. v-on:事件 简写为 @事件
import { createApp,ref,reactive } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
const title = ref('hello world!!!!')
const msg = reactive({name:'张三'})
const myTest = () => {
console.log('点击了')
title.value = "你好世界!!!"
msg.name = "李四"
getRes(1,3)
}
const getRes=(a,b)=>{
console.log(a+b);
}
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
myTest,title,msg
}
}
}).mount('#myapp')
</script>
7.5双向绑定
//属性绑定 单向绑定
//model(数据) ------> view(视图 dom元素)
//表单元素 双向绑定 v-model
//model(数据) <------> view(视图 dom元素)
//双向绑定之后 需要操作和读取数据时 直接使用变量即可注意:表单元素不同 双向绑定用法稍有不同
1输入框类
v-model 替代 value属性
title
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
const textVal = ref('jack')
const setTextVal = ()=>{
textVal.value = 'rose'
}
const getTextVal = ()=>{
console.log(textVal.value);
}
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
textVal
}
}
}).mount('#myapp')
</script>
2选择类
单选框
v-model用来分组 绑定选中的值
男
//变量可以控制默认值 如果空值 谁都不选
const gender = ref('2')
多选框
v-model用来分组 绑定选中的值
吃饭
//数组变量可以控制默认值 如果空集合 谁都不选
const hobby = ref([2])
title
性别:男
女
{{gender}}
爱好: 吃饭
睡觉
打豆豆
{{hobby}}
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
const gender = ref('2')
const hobby = ref([2])
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
gender,hobby
}
}
}).mount('#myapp')
</script>
注意:小技巧
3下拉列表
v-model绑定在select标签上
{{city}}
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
const city = ref("")
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
city
}
}
}).mount('#myapp')
</script>
7.6v-for遍历标签
需要遍历生成元素时
1.有列表数据
2.在需要遍历生成的元素上添加 v-for 指令 会带着子标签一起遍历
3. v-for="临时变量 in 集合"
通过模板语法 使用临时变量 显示集合中的内容
4.配合使用的模板语法 {{city.name}}文本 :value="city.code" 属性简化的v-for语法
v-for="临时变量 in 集合"
完整语法
v-for="(临时变量,索引) in 集合"
为了防止数据重复渲染异常 建议搭配:key属性
title
- {{msg.content}}
编号
名称
年龄
{{student.id}}
{{student.name}}
{{student.age}}
{{cityCode}}
<script type="module">
import { createApp,ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
/*
1.有列表数据
2.在需要遍历生成的元素上添加 v-for 指令 会带着子标签一起遍历
3. v-for="临时变量 in 集合"
通过模板语法 使用临时变量 显示集合中的内容
4.配合使用的模板语法 {{city.name}}文本 :value="city.code" 属性
简化的v-for语法
v-for="临时变量 in 集合"
完整语法
v-for="(临时变量,索引) in 集合"
为了防止数据重复渲染异常 建议搭配:key属性
*/
//使用 变量 函数
const msgList = [{content:'中国航天 生日快乐'},
{content:'蜜雪冰城小票藏连载小说热'},
{content:'用风神L8打开书本里的世界商'}]
const stuList = [{id:1,name:"lisi",age:18},{id:2,name:"wangwu",age:20}]
const cityList = [{code:"001",name:"北京"},{code:"002",name:"上海"},{code:"003",name:"广州"}]
const cityCode = ref('')
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
msgList,stuList,cityList,cityCode
}
}
}).mount('#myapp')
</script>
8vue生命周期
生命周期钩子
当执行到指定时机时 可以运行自定义代码
其中最常使用的钩子 onMounted
表示页面加载结束 通常用这个时机 加载后端数据
title
{{msg}}
<script type="module">
import { createApp,onBeforeMount,onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup(){
//使用 变量 函数
let msg = "hello world"
/*
onMounted 这个时机页面加载完成
通常用这个时机获取后端数据 在页面使用
*/
// onMounted(()=>{
// console.log("Mountd周期执行了");
// })
// onBeforeMount(()=>{
// console.log("onBeforeMount周期执行了");
// })
// console.log("setup周期执行了");
return {
//如果变量 函数 需要在页面中使用，则需要返回 对外暴漏
msg
}
}
}).mount('#myapp')
</script>
浙公网安备 33010602011771号