Compare commits
96 Commits
418 changed files with 78238 additions and 1 deletions
@ -0,0 +1,50 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>自定义指令</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h2>当前的n值是：<span v-text="n"></span></h2> |
||||
<h2>放大10倍的n值是：<span v-big="n"></span></h2> |
||||
<button @click="n++">n+1</button> |
||||
<hr/> |
||||
<input type="text" v-fbind:value="n" > |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建Vue实例 |
||||
const x = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
n: 1, |
||||
}, |
||||
directives: { |
||||
// big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在模板被重新解析时 |
||||
big(element, binding) { |
||||
element.innerText = binding.value * 10 |
||||
}, |
||||
fbind: { |
||||
// 绑定时调用 |
||||
bind(element, binding){ |
||||
element.value = binding.value |
||||
}, |
||||
// 渲染时调用 |
||||
inserted(element, binding){ |
||||
element.focus() |
||||
}, |
||||
// 重新渲染时调用 |
||||
update(element, binding){ |
||||
element.value = binding.value |
||||
element.focus() |
||||
} |
||||
} |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,30 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>focus</title> |
||||
<style> |
||||
.demo { |
||||
background-color: orange; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<button id="btn">显示输入框</button> |
||||
<script type="text/javascript"> |
||||
const btn = document.getElementById("btn") |
||||
btn.onclick = () => { |
||||
const input = document.createElement('input') |
||||
input.className = 'demo' |
||||
input.value = 99 |
||||
input.onclick = ()=>alert(1) |
||||
|
||||
document.body.appendChild(input) |
||||
|
||||
input.parentElement.style.backgroundColor = "skyblue" |
||||
input.focus() |
||||
} |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,39 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>引出生命周期</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h2 v-if="isShowHello">你好</h2> |
||||
<h2 :style="{opacity}">欢迎学习Vue</h2> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
isShowHello: true, |
||||
opacity: 1 |
||||
}, |
||||
// Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted |
||||
mounted() { |
||||
console.log('mounted') |
||||
setInterval(() => { |
||||
this.opacity -= 0.01 |
||||
if (this.opacity <= 0) this.opacity = 1 |
||||
}, 16) |
||||
} |
||||
}) |
||||
// setInterval(()=>{ |
||||
// vm.opacity -= 0.01 |
||||
// if (vm.opacity <= 0) vm.opacity = 1 |
||||
// },16) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,101 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>分析生命周期</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root" x="1"> |
||||
<h2>当前的n值是：{{n}}</h2> |
||||
<button @click="add">n+1</button> |
||||
<button @click="bye">销毁vm</button> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
// template: ` |
||||
// <div> |
||||
// <h2>当前的n值是：{{n}}</h2> |
||||
// <button @click="add">n+1</button> |
||||
// </div> |
||||
// `, |
||||
data: { |
||||
n: 1, |
||||
}, |
||||
methods: { |
||||
add() { |
||||
console.log("add") |
||||
this.n++ |
||||
}, |
||||
bye() { |
||||
console.log("bye") |
||||
this.$destroy() |
||||
} |
||||
}, |
||||
watch: { |
||||
n() { |
||||
console.log("n变了") |
||||
} |
||||
}, |
||||
// 常用的生命周期包含 mounted和beforeDestroy |
||||
// mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作） |
||||
// beforeDestroy： 清除定时器、解绑自定义事件、取消订阅消息等（收尾工作） |
||||
// 初始化步骤1， 初始化了生命周期和事件，但是没有开始数据代理 |
||||
beforeCreate(){ |
||||
console.log("beforeCreate") |
||||
console.log(this) |
||||
// debugger |
||||
}, |
||||
// 初始化步骤2，完成数据监测，数据代理 |
||||
created() { |
||||
console.log("created") |
||||
console.log(this) |
||||
// debugger |
||||
}, |
||||
// Vue开始解析模板，在内存中生成虚拟DOM，但未渲染页面，此时对DOM的操作都会在渲染真实DOM时失效 |
||||
beforeMount() { |
||||
console.log("beforeMount") |
||||
console.log(this) |
||||
document.querySelector('h2').innerText = "Test" |
||||
// debugger |
||||
}, |
||||
// 将虚拟DOM渲染成真实DOM, 完成渲染后所有DOM操作都会生效，此时完成初始化操作 |
||||
mounted() { |
||||
console.log("mounted") |
||||
console.log(this) |
||||
// debugger |
||||
}, |
||||
// 当数据更新后触发更新流程，此时data数据已更新，并步骤之后会生成新的虚拟DOM并与老的虚拟DOM做对比，执行updated来将差异重新渲染 |
||||
beforeUpdate() { |
||||
console.log("beforeUpdate") |
||||
console.log(this.n) |
||||
console.log(this.$el) |
||||
// debugger |
||||
}, |
||||
// 完成重新渲染 |
||||
updated() { |
||||
console.log("updated") |
||||
console.log(this.n) |
||||
// debugger |
||||
}, |
||||
// 完全销毁一个vm实例，清理它与实例的连接，解绑全部指令和自定义监听事件 |
||||
beforeDestroy() { |
||||
console.log("beforeDestroy") |
||||
this.add() |
||||
debugger |
||||
}, |
||||
// 完成销毁 |
||||
destroyed() { |
||||
console.log("destroyed") |
||||
} |
||||
|
||||
}) |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,52 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>总结生命周期</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h2 v-if="isShowHello">你好</h2> |
||||
<h2 :style="{opacity}">欢迎学习Vue</h2> |
||||
<button @click="opacity = 1">透明度设置为1</button> |
||||
<button @click="stop">停止变换</button> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
isShowHello: true, |
||||
opacity: 1 |
||||
}, |
||||
methods: { |
||||
stop() { |
||||
this.$destroy() |
||||
} |
||||
}, |
||||
|
||||
// Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted |
||||
mounted() { |
||||
console.log('mounted') |
||||
this.timer = setInterval(() => { |
||||
console.log("setInterval") |
||||
this.opacity -= 0.01 |
||||
if (this.opacity <= 0) this.opacity = 1 |
||||
}, 16) |
||||
}, |
||||
beforeDestroy() { |
||||
console.log("beforeDestroy-清除定时器") |
||||
clearInterval(this.timer) |
||||
} |
||||
}) |
||||
// setInterval(()=>{ |
||||
// vm.opacity -= 0.01 |
||||
// if (vm.opacity <= 0) vm.opacity = 1 |
||||
// },16) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,79 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>基本使用</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>{{msg}}</h1> |
||||
<!-- 第三步：编写组件标签 --> |
||||
<xuexiao></xuexiao> |
||||
<hr/> |
||||
<!-- 第三步：编写组件标签 --> |
||||
<xuesheng></xuesheng> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 步骤一： 创建school组件 |
||||
const school = Vue.extend({ |
||||
// 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置 |
||||
// el: '#root', |
||||
template: ` |
||||
<div> |
||||
<h2>学校名称：{{schoolName}}</h2> |
||||
<h2>学校地址：{{address}}</h2> |
||||
<button @click="showName">点我提示学校名</button> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
schoolName: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
}, |
||||
methods: { |
||||
showName(){ |
||||
alert(this.schoolName) |
||||
} |
||||
} |
||||
}) |
||||
// 步骤一： 创建student组件 |
||||
const student = Vue.extend({ |
||||
template: ` |
||||
<div> |
||||
<h2>学生姓名：{{studentName}}</h2> |
||||
<h2>学生年龄：{{age}}</h2> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
studentName: '小强', |
||||
age: 18, |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 步骤二：注册组件（全局） |
||||
// Vue.component('xuexiao', school) |
||||
// Vue.component('xuesheng', student) |
||||
|
||||
|
||||
// 创建Vue实例 |
||||
const vmx = new Vue({ |
||||
el: '#root', |
||||
// 步骤二： 注册组件(局部注册) |
||||
components: { |
||||
xuexiao: school, |
||||
xuesheng: student |
||||
}, |
||||
data: { |
||||
'msg': 'Hello Every One!' |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,67 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>几个注意点</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>{{msg}}</h1> |
||||
<xin-school></xin-school> |
||||
<simple></simple> |
||||
<!-- <xin-school/> 脚手架环境下可用此格式--> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建school组件 |
||||
const school = Vue.extend({ |
||||
name: 'myschool', |
||||
template: ` |
||||
<div> |
||||
<h2>学校名称：{{ schoolName }}</h2> |
||||
<h2>学校地址：{{ address }}</h2> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
schoolName: '修仙学院', |
||||
address: '长白山' |
||||
} |
||||
} |
||||
}) |
||||
// 组件创建简写模式(常用方式，Vue通过组件绑定来识别下面代码未组件) |
||||
const simple = { |
||||
name: 'simple', |
||||
template: ` |
||||
<div> |
||||
<h2>{{ msg }}</h2> |
||||
</div>`, |
||||
data() { |
||||
return { |
||||
msg: "简写格式代码" |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 创建Vue实例 |
||||
// 组件命令规则 |
||||
// school |
||||
// School |
||||
// my-school |
||||
// MySchool (脚手架使用) |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
msg: '欢迎来到修仙世界！' |
||||
}, |
||||
components: { |
||||
XinSchool: school, |
||||
Simple: simple |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,94 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>组件的嵌套</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
|
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 创建student组件 |
||||
const student = Vue.extend({ |
||||
template: ` |
||||
<div> |
||||
<h2>学生姓名：{{ studentName }}</h2> |
||||
<h2>学生年龄：{{ age }}</h2> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
studentName: '小强', |
||||
age: 18, |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 创建school组件 |
||||
const school = Vue.extend({ |
||||
name: 'myschool', |
||||
template: ` |
||||
<div> |
||||
<h2>学校名称：{{ schoolName }}</h2> |
||||
<h2>学校地址：{{ address }}</h2> |
||||
<student></student> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
schoolName: '修仙学院', |
||||
address: '长白山' |
||||
} |
||||
}, |
||||
components: { |
||||
student, |
||||
} |
||||
}) |
||||
|
||||
// 创建Hello组件 |
||||
const hello = Vue.extend({ |
||||
template: ` |
||||
<div> |
||||
<h1> {{ hellomsg }} </h1> |
||||
</div>`, |
||||
data() { |
||||
return { |
||||
hellomsg: "Hello, 您好" |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// app组件 |
||||
const app = Vue.extend({ |
||||
template: ` |
||||
<div> |
||||
<hello></hello> |
||||
<school></school> |
||||
</div> |
||||
`, |
||||
components: { |
||||
school, |
||||
hello |
||||
} |
||||
}) |
||||
|
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
template: `<app></app>`, |
||||
data: { |
||||
msg: '欢迎来到修仙世界！' |
||||
}, |
||||
components: { |
||||
app |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,79 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>VueComponent</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<h1>{{msg}}</h1> |
||||
<!-- 第三步：编写组件标签 --> |
||||
<xuexiao></xuexiao> |
||||
<hr/> |
||||
<!-- 第三步：编写组件标签 --> |
||||
<xuesheng></xuesheng> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 步骤一： 创建school组件 |
||||
const school = Vue.extend({ |
||||
// 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置 |
||||
// el: '#root', |
||||
template: ` |
||||
<div> |
||||
<h2>学校名称：{{schoolName}}</h2> |
||||
<h2>学校地址：{{address}}</h2> |
||||
<button @click="showName">点我提示学校名</button> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
schoolName: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
}, |
||||
methods: { |
||||
showName(){ |
||||
alert(this.schoolName) |
||||
} |
||||
} |
||||
}) |
||||
// 步骤一： 创建student组件 |
||||
const student = Vue.extend({ |
||||
template: ` |
||||
<div> |
||||
<h2>学生姓名：{{studentName}}</h2> |
||||
<h2>学生年龄：{{age}}</h2> |
||||
</div> |
||||
`, |
||||
data() { |
||||
return { |
||||
studentName: '小强', |
||||
age: 18, |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 步骤二：注册组件（全局） |
||||
// Vue.component('xuexiao', school) |
||||
// Vue.component('xuesheng', student) |
||||
|
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
// 步骤二： 注册组件(局部注册) |
||||
components: { |
||||
xuexiao: school, |
||||
xuesheng: student |
||||
}, |
||||
data: { |
||||
'msg': 'Hello Every One!' |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,73 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>一个重要的内置关系</title> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
</head> |
||||
<body> |
||||
<div id="root"> |
||||
<!-- |
||||
1、 VueComponent.prototype.__proto__ === Vue.prototype |
||||
--> |
||||
<school></school> |
||||
</div> |
||||
<script type="text/javascript"> |
||||
Vue.config.productionTip = false // 组织开发环境提示 |
||||
|
||||
// 为Vue的原型添加属性x |
||||
Vue.prototype.x = 100 |
||||
|
||||
const school = Vue.extend({ |
||||
name: 'school', |
||||
template: ` |
||||
<div> |
||||
<h2>学校名称： {{ name }}</h2> |
||||
<h2>学校地址： {{ address }}</h2> |
||||
<button @click="showX">点击触发showX</button> |
||||
</div>`, |
||||
data() { |
||||
return { |
||||
name: "修仙学院", |
||||
address: "天山" |
||||
} |
||||
}, |
||||
methods: { |
||||
showX() { |
||||
console.log(this) |
||||
console.log(this.x) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 创建Vue实例 |
||||
const vm = new Vue({ |
||||
el: '#root', |
||||
data: { |
||||
msg: 'Hello', |
||||
}, |
||||
components: { |
||||
school:school |
||||
} |
||||
}) |
||||
|
||||
// 创建一个Demo构造方法 |
||||
function Demo() { |
||||
this.a = 1 |
||||
this.b = 2 |
||||
} |
||||
|
||||
// 创建一个Demo实例 |
||||
const d = new Demo() |
||||
|
||||
console.log(Demo.prototype) // 显示原型属性 |
||||
console.log(d.__proto__) // 隐式原型属性 |
||||
console.log(Demo.prototype === d.__proto__) |
||||
Demo.prototype.x = 99 |
||||
console.log(d.__proto__.x) |
||||
console.log(d.x) |
||||
|
||||
</script> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,19 @@ |
||||
<template> |
||||
<div> |
||||
<School/> |
||||
<Student/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// 引入模块 |
||||
import School from './School' |
||||
import Student from './Student' |
||||
export default { |
||||
name: "App", |
||||
components: { |
||||
School, |
||||
Student |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,49 @@ |
||||
<template> |
||||
<!-- 组件的模板标签 --> |
||||
<div class="demo"> |
||||
<h2>学校名称：{{ schoolName }}</h2> |
||||
<h2>学校地址：{{ address }}</h2> |
||||
<button @click="showName">点我提示学校名</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 组件的交互标签 --> |
||||
<script> |
||||
export default { |
||||
name: 'School', |
||||
data() { |
||||
return { |
||||
schoolName: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
}, |
||||
methods: { |
||||
showName() { |
||||
alert(this.schoolName) |
||||
} |
||||
} |
||||
} |
||||
|
||||
// const school = Vue.extend({ |
||||
// data() { |
||||
// return { |
||||
// schoolName: '尚硅谷', |
||||
// address: '北京' |
||||
// } |
||||
// }, |
||||
// methods: { |
||||
// showName(){ |
||||
// alert(this.schoolName) |
||||
// } |
||||
// } |
||||
// }) |
||||
// 默认暴露 |
||||
// export default school |
||||
</script> |
||||
|
||||
<!-- 组件的样式标签 --> |
||||
<style> |
||||
.demo { |
||||
background-color: orange; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<!-- 组件的模板标签 --> |
||||
<div> |
||||
<h2>学生名称：{{ name }}</h2> |
||||
<h2>学生年龄：{{ age }}</h2> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 组件的交互标签 --> |
||||
<script> |
||||
export default { |
||||
name: 'Student', |
||||
data() { |
||||
return { |
||||
name: '小强', |
||||
age: '18' |
||||
} |
||||
}, |
||||
} |
||||
|
||||
// const school = Vue.extend({ |
||||
// data() { |
||||
// return { |
||||
// schoolName: '尚硅谷', |
||||
// address: '北京' |
||||
// } |
||||
// }, |
||||
// methods: { |
||||
// showName(){ |
||||
// alert(this.schoolName) |
||||
// } |
||||
// } |
||||
// }) |
||||
// 默认暴露 |
||||
// export default school |
||||
</script> |
||||
@ -0,0 +1,12 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>单文件组件</title> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script type="text/javascript" src="../vue.js"></script> |
||||
<script type="text/javascript" src="./main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,9 @@ |
||||
import App from './App.vue' |
||||
|
||||
new Vue({ |
||||
el: "#root", |
||||
template: `<App/>`, |
||||
components: { |
||||
App |
||||
} |
||||
}) |
||||
@ -0,0 +1,23 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,24 @@ |
||||
# vue_demo |
||||
|
||||
## Project setup |
||||
``` |
||||
npm install |
||||
``` |
||||
|
||||
### Compiles and hot-reloads for development |
||||
``` |
||||
npm run serve |
||||
``` |
||||
|
||||
### Compiles and minifies for production |
||||
``` |
||||
npm run build |
||||
``` |
||||
|
||||
### Lints and fixes files |
||||
``` |
||||
npm run lint |
||||
``` |
||||
|
||||
### Customize configuration |
||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/cli-plugin-babel/preset' |
||||
] |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"compilerOptions": { |
||||
"target": "es5", |
||||
"module": "esnext", |
||||
"baseUrl": "./", |
||||
"moduleResolution": "node", |
||||
"paths": { |
||||
"@/*": [ |
||||
"src/*" |
||||
] |
||||
}, |
||||
"lib": [ |
||||
"esnext", |
||||
"dom", |
||||
"dom.iterable", |
||||
"scripthost" |
||||
] |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@ |
||||
{ |
||||
"name": "vue_demo", |
||||
"version": "0.1.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
||||
"lint": "vue-cli-service lint" |
||||
}, |
||||
"dependencies": { |
||||
"core-js": "^3.8.3", |
||||
"vue": "^2.6.14" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.12.16", |
||||
"@babel/eslint-parser": "^7.12.16", |
||||
"@vue/cli-plugin-babel": "~5.0.0", |
||||
"@vue/cli-plugin-eslint": "~5.0.0", |
||||
"@vue/cli-service": "~5.0.0", |
||||
"eslint": "^7.32.0", |
||||
"eslint-plugin-vue": "^8.0.3", |
||||
"vue-template-compiler": "^2.6.14" |
||||
}, |
||||
"eslintConfig": { |
||||
"root": true, |
||||
"env": { |
||||
"node": true |
||||
}, |
||||
"extends": [ |
||||
"plugin:vue/essential", |
||||
"eslint:recommended" |
||||
], |
||||
"parserOptions": { |
||||
"parser": "@babel/eslint-parser" |
||||
}, |
||||
"rules": {} |
||||
}, |
||||
"browserslist": [ |
||||
"> 1%", |
||||
"last 2 versions", |
||||
"not dead" |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,21 @@ |
||||
<!DOCTYPE html> |
||||
<html lang=""> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<!-- 针对IE浏览器的特殊设置 --> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<!-- 开启移动端的理想视口 --> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
<!-- 图标设置 --> |
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
<title><%= htmlWebpackPlugin.options.title %></title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. |
||||
Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,20 @@ |
||||
<template> |
||||
<div> |
||||
<img src="./assets/logo.png" alt="logo"> |
||||
<School/> |
||||
<Student/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// 引入模块 |
||||
import School from './components/School' |
||||
import Student from './components/Student' |
||||
export default { |
||||
name: "App", |
||||
components: { |
||||
School, |
||||
Student |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,49 @@ |
||||
<template> |
||||
<!-- 组件的模板标签 --> |
||||
<div class="demo"> |
||||
<h2>学校名称：{{ schoolName }}</h2> |
||||
<h2>学校地址：{{ address }}</h2> |
||||
<button @click="showName">点我提示学校名</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 组件的交互标签 --> |
||||
<script> |
||||
export default { |
||||
name: 'School', |
||||
data() { |
||||
return { |
||||
schoolName: '尚硅谷', |
||||
address: '北京' |
||||
} |
||||
}, |
||||
methods: { |
||||
showName() { |
||||
alert(this.schoolName) |
||||
} |
||||
} |
||||
} |
||||
|
||||
// const school = Vue.extend({ |
||||
// data() { |
||||
// return { |
||||
// schoolName: '尚硅谷', |
||||
// address: '北京' |
||||
// } |
||||
// }, |
||||
// methods: { |
||||
// showName(){ |
||||
// alert(this.schoolName) |
||||
// } |
||||
// } |
||||
// }) |
||||
// 默认暴露 |
||||
// export default school |
||||
</script> |
||||
|
||||
<!-- 组件的样式标签 --> |
||||
<style> |
||||
.demo { |
||||
background-color: orange; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<!-- 组件的模板标签 --> |
||||
<div> |
||||
<h2>学生名称：{{ name }}</h2> |
||||
<h2>学生年龄：{{ age }}</h2> |
||||
</div> |
||||
</template> |
||||
|
||||
<!-- 组件的交互标签 --> |
||||
<script> |
||||
export default { |
||||
name: 'Student', |
||||
data() { |
||||
return { |
||||
name: '小强', |
||||
age: '18' |
||||
} |
||||
}, |
||||
} |
||||
|
||||
// const school = Vue.extend({ |
||||
// data() { |
||||
// return { |
||||
// schoolName: '尚硅谷', |
||||
// address: '北京' |
||||
// } |
||||
// }, |
||||
// methods: { |
||||
// showName(){ |
||||
// alert(this.schoolName) |
||||
// } |
||||
// } |
||||
// }) |
||||
// 默认暴露 |
||||
// export default school |
||||
</script> |
||||
@ -0,0 +1,26 @@ |
||||
// 引入Vue
|
||||
import Vue from 'vue' |
||||
// 引入App
|
||||
import App from './App.vue' |
||||
|
||||
Vue.config.productionTip = false |
||||
|
||||
// 创建Vue实例
|
||||
new Vue({ |
||||
render: h => h(App), |
||||
}).$mount('#app') |
||||
|
||||
// el的写法
|
||||
// new Vue({
|
||||
// el: '#app',
|
||||
// render: h => h(App),
|
||||
// })
|
||||
|
||||
// rander的完整写法
|
||||
// new Vue({
|
||||
// el: '#app',
|
||||
// render(createElement) {
|
||||
// console.log("rander", typeof createElement)
|
||||
// return createElement('h1', 'Hello')
|
||||
// }
|
||||
// })
|
||||
@ -0,0 +1,5 @@ |
||||
const { defineConfig } = require('@vue/cli-service') |
||||
module.exports = defineConfig({ |
||||
transpileDependencies: true, |
||||
lintOnSave: false |
||||
}) |
||||
@ -0,0 +1,23 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
|
||||
|
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: { |
||||
HelloWorld |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
text-align: center; |
||||
color: #2c3e50; |
||||
margin-top: 60px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,58 @@ |
||||
<template> |
||||
<div class="hello"> |
||||
<h1>{{ msg }}</h1> |
||||
<p> |
||||
For a guide and recipes on how to configure / customize this project,<br> |
||||
check out the |
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
||||
</p> |
||||
<h3>Installed CLI Plugins</h3> |
||||
<ul> |
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
||||
</ul> |
||||
<h3>Essential Links</h3> |
||||
<ul> |
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
||||
</ul> |
||||
<h3>Ecosystem</h3> |
||||
<ul> |
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'HelloWorld', |
||||
props: { |
||||
msg: String |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
||||
<style scoped> |
||||
h3 { |
||||
margin: 40px 0 0; |
||||
} |
||||
ul { |
||||
list-style-type: none; |
||||
padding: 0; |
||||
} |
||||
li { |
||||
display: inline-block; |
||||
margin: 0 10px; |
||||
} |
||||
a { |
||||
color: #42b983; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,13 @@ |
||||
<template> |
||||
<Demo/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,54 @@ |
||||
<template> |
||||
<h2>当前求和为：{{ sum }}</h2> |
||||
<button @click="sum++">点击+1</button> |
||||
<hr> |
||||
<h2>当前信息为：{{ msg }}</h2> |
||||
<button @click="msg+='!'">修改信息</button> |
||||
<hr> |
||||
<h2>姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<h2>薪资：{{ person.job.j1.salary }}</h2> |
||||
<button @click="person.name+='~'">修改姓名</button> |
||||
<button @click="person.age++">修改年龄</button> |
||||
<button @click="person.job.j1.salary++">修改薪资</button> |
||||
<h2></h2> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive, ref, watch, watchEffect} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
let sum = ref(0) |
||||
let msg = ref('你好呀') |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
j1: { |
||||
salary: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 方法一： ref的对象监视，通过value实现 |
||||
// watch(person, (newValue, oldValue) => { |
||||
// console.log('person的值变了', newValue, oldValue) |
||||
// }) |
||||
|
||||
watchEffect(() => { |
||||
const x1 = sum.value |
||||
const x2 = person.job.j1.salary |
||||
console.log('watchEffect所指定的回调执行了') |
||||
}) |
||||
|
||||
return { |
||||
sum, |
||||
msg, |
||||
person |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,76 @@ |
||||
<template> |
||||
<h2>当前求和为：{{ sum }}</h2> |
||||
<button @click="sum++">点击+1</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref, onBeforeMount, onMounted, onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
console.log("___setup___") |
||||
let sum = ref(0) |
||||
|
||||
// 通过组合API的形式的生命周期钩子 |
||||
|
||||
onBeforeMount(()=>{ |
||||
console.log("___onBeforeMount___") |
||||
}) |
||||
onMounted(()=>{ |
||||
console.log("___onMounted___") |
||||
}) |
||||
onBeforeUpdate(()=>{ |
||||
console.log("___onBeforeUpdate___") |
||||
}) |
||||
onUpdated(()=>{ |
||||
console.log("___onUpdated___") |
||||
}) |
||||
onBeforeUnmount(()=>{ |
||||
console.log("___onBeforeUnmount___") |
||||
}) |
||||
onUnmounted(()=>{ |
||||
console.log("___onUnmounted___") |
||||
}) |
||||
|
||||
return { |
||||
sum |
||||
} |
||||
}, |
||||
|
||||
// // 通过配置项的形式使用生命周期 |
||||
// beforeCreate() { |
||||
// console.log('---beforeCreate---') |
||||
// }, |
||||
// |
||||
// created() { |
||||
// console.log("---created---") |
||||
// }, |
||||
// |
||||
// beforeMount() { |
||||
// console.log("---beforeMount---") |
||||
// }, |
||||
// |
||||
// mounted() { |
||||
// console.log("---mounted---") |
||||
// }, |
||||
// |
||||
// beforeUpdate() { |
||||
// console.log("---beforeUpdate---") |
||||
// }, |
||||
// |
||||
// updated() { |
||||
// console.log("---updated---") |
||||
// }, |
||||
// |
||||
// beforeUnmount() { |
||||
// console.log("---beforeUnmount---") |
||||
// }, |
||||
// |
||||
// unmounted() { |
||||
// console.log("---unmounted---") |
||||
// } |
||||
|
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<h2>当前求和为：{{ sum }}</h2> |
||||
<button @click="sum++">点击+1</button> |
||||
<hr> |
||||
<h2>当前点击时鼠标的坐标为：x:{{point.x}} y:{{point.y}}</h2> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import usePoint from "@/hooks/usePoint"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
console.log("___setup___") |
||||
let sum = ref(0) |
||||
let point = usePoint() |
||||
|
||||
return { |
||||
sum, |
||||
point |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,24 @@ |
||||
import {onBeforeUnmount, onMounted, reactive} from "vue"; |
||||
|
||||
export default function() { |
||||
let point = reactive({ |
||||
x: 0, |
||||
y: 0 |
||||
}) |
||||
|
||||
function savePoint() { |
||||
console.log(event.pageX, event.pageY) |
||||
point.x = event.pageX |
||||
point.y = event.pageY |
||||
} |
||||
|
||||
onMounted(() => { |
||||
window.addEventListener('click', savePoint) |
||||
}) |
||||
|
||||
onBeforeUnmount(() => { |
||||
window.removeEventListener('click', savePoint) |
||||
}) |
||||
|
||||
return point |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,37 @@ |
||||
<template> |
||||
<h2>{{ person }}</h2> |
||||
<h2>姓名：{{ name }}</h2> |
||||
<h2>年龄：{{ age }}</h2> |
||||
<h2>薪资：{{ job.j1.salary }}</h2> |
||||
<button @click="name+='~'">修改姓名</button> |
||||
<button @click="age++">修改年龄</button> |
||||
<button @click="job.j1.salary++">修改薪资</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive,toRef,toRefs} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
j1: { |
||||
salary: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
return { |
||||
person, |
||||
// name:toRef(person, 'name'), |
||||
// age: toRef(person, 'age'), |
||||
// salary: toRef(person.job.j1, 'salary') |
||||
...toRefs(person) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,39 @@ |
||||
<template> |
||||
<h4>当前的x值是： {{ x.y }}</h4> |
||||
<button @click="x++">点击+1</button> |
||||
<h2>{{ person }}</h2> |
||||
<h2>姓名：{{ name }}</h2> |
||||
<h2>年龄：{{ age }}</h2> |
||||
<h2>薪资：{{ job.j1.salary }}</h2> |
||||
<button @click="name+='~'">修改姓名</button> |
||||
<button @click="age++">修改年龄</button> |
||||
<button @click="job.j1.salary++">修改薪资</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive, ref, toRef, toRefs, shallowReactive, shallowRef} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
// let person = shallowReactive({ // 只考虑第一层的数据响应式 |
||||
let person = shallowReactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
j1: { |
||||
salary: 20 |
||||
} |
||||
} |
||||
}) |
||||
let x = shallowRef({y:0}) //shallow不处理对象类型的响应式 |
||||
|
||||
return { |
||||
person, |
||||
x, |
||||
...toRefs(person) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,41 @@ |
||||
<template> |
||||
<h4>当前求和为： {{ sum }}</h4> |
||||
<button @click="sum++">点击+1</button> |
||||
<h2>姓名：{{ name }}</h2> |
||||
<h2>年龄：{{ age }}</h2> |
||||
<h2>薪资：{{ job.j1.salary }}</h2> |
||||
<button @click="name+='~'">修改姓名</button> |
||||
<button @click="age++">修改年龄</button> |
||||
<button @click="job.j1.salary++">修改薪资</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive, ref, toRefs, readonly, shallowReadonly} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
let sum = ref(0) |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
j1: { |
||||
salary: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// person = readonly(person) |
||||
// person = shallowReadonly(person) |
||||
// sum = readonly(sum) |
||||
|
||||
|
||||
return { |
||||
sum, |
||||
...toRefs(person) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<button @click="isShowDemo=!isShowDemo">点击展示隐藏</button> |
||||
<Demo v-if="isShowDemo"/> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup() { |
||||
let isShowDemo = ref(true) |
||||
|
||||
return { |
||||
isShowDemo, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,62 @@ |
||||
<template> |
||||
<h4>当前求和为： {{ sum }}</h4> |
||||
<button @click="sum++">点击+1</button> |
||||
<h2>姓名：{{ name }}</h2> |
||||
<h2>年龄：{{ age }}</h2> |
||||
<h2>薪资：{{ job.j1.salary }}</h2> |
||||
<h3 v-show="person.car">车辆信息：{{ person.car }}</h3> |
||||
<button @click="name+='~'">修改姓名</button> |
||||
<button @click="age++">修改年龄</button> |
||||
<button @click="job.j1.salary++">修改薪资</button> |
||||
<button @click="showRawPerson">输出最原始的person</button> |
||||
<button @click="addCar">给人添加一台车</button> |
||||
<button v-show="person.car" @click="person.car.name += '!'">修改车名</button> |
||||
<button v-show="person.car" @click="changeCarPrice">修改价格</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive, ref, toRefs, toRaw, markRaw} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
|
||||
setup() { |
||||
let sum = ref(0) |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
j1: { |
||||
salary: 20 |
||||
} |
||||
} |
||||
}) |
||||
|
||||
function showRawPerson() { |
||||
console.log(person) |
||||
const p = toRaw(person) |
||||
console.log(p) |
||||
} |
||||
function addCar() { |
||||
let car = {name:'奔驰', price:40} |
||||
// person.car = car |
||||
person.car = markRaw(car) |
||||
console.log(person) |
||||
} |
||||
|
||||
function changeCarPrice() { |
||||
person.car.price++ |
||||
console.log(person.car.price) |
||||
} |
||||
|
||||
return { |
||||
sum, |
||||
person, |
||||
...toRefs(person), |
||||
showRawPerson, |
||||
addCar, |
||||
changeCarPrice |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,44 @@ |
||||
<template> |
||||
<input type="text" v-model="keyWord"> |
||||
<h3>{{keyWord}}</h3> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref, customRef} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 自定义ref |
||||
function myRef(value) { |
||||
let timer |
||||
// console.log('---myRef---', value) |
||||
return customRef((track,trigger)=>{ |
||||
return { |
||||
get() { |
||||
console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`) |
||||
track() // 通知vue追踪数据变化 |
||||
return value |
||||
}, |
||||
set(newValue) { |
||||
console.log(`有人从myRef这个容器中数据改为了：${newValue}`) |
||||
clearTimeout(timer) |
||||
timer = setTimeout(()=>{ |
||||
value = newValue |
||||
trigger() //通知vue去重新解析模板 |
||||
}, 500) |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// let keyWord = ref('hello') // 使用默认的ref |
||||
let keyWord = myRef('hello') |
||||
|
||||
return { |
||||
keyWord, |
||||
} |
||||
} |
||||
|
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,31 @@ |
||||
<template> |
||||
<div className="app"> |
||||
<h3>我是app组件（祖）{{ name }}-{{ price }}</h3> |
||||
<child/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import child from "@/components/Child.vue"; |
||||
import {reactive, toRefs, provide} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {child}, |
||||
setup() { |
||||
let car = reactive({ |
||||
name: '奔驰', |
||||
price: '40W' |
||||
}) |
||||
provide('car', car) //给自己的后代组件传递数据 |
||||
return {...toRefs(car)} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.app { |
||||
background-color: gray; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="child"> |
||||
<h3>我是child组件（子）</h3> |
||||
<son/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import son from "@/components/Son.vue"; |
||||
export default { |
||||
name: "Child", |
||||
components:{son} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.child{ |
||||
background-color: skyblue; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<div class="son"> |
||||
<h3>我是son组件（孙）{{car.name}}-{{car.price}}</h3> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {inject} from "vue"; |
||||
|
||||
export default { |
||||
name: "Son", |
||||
setup() { |
||||
let car = inject('car') |
||||
console.log('---son---', car) |
||||
|
||||
return {car} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.son{ |
||||
background-color: orange; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,35 @@ |
||||
<template> |
||||
<div class="app"> |
||||
<h3>我是app组件（祖）</h3> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive, ref, toRefs, provide, readonly, isReactive, isRef, isReadonly, isProxy} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
let car = reactive({ |
||||
name:'奔驰', |
||||
price: '40W' |
||||
}) |
||||
let car2 = readonly(car) |
||||
let sum = ref(0) |
||||
|
||||
console.log(isRef(sum)) |
||||
console.log(isReactive(car)) |
||||
console.log(isReadonly(car2)) |
||||
console.log(isProxy(car)) |
||||
|
||||
return {...toRefs(car)} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.app{ |
||||
background-color: gray; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,28 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{name}}</h2> |
||||
<h2>年龄：{{age}}</h2> |
||||
<button @click="sayHello">点击</button> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 数据 |
||||
let name = '张三' |
||||
let age = 19 |
||||
|
||||
// 方法 |
||||
function sayHello() { |
||||
alert(`名字：${name}，年龄：${age}`) |
||||
} |
||||
|
||||
return { |
||||
name, |
||||
age, |
||||
sayHello, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div className="app"> |
||||
<h3>我是app组件</h3> |
||||
<child/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import child from "@/components/Child"; |
||||
import {reactive, toRefs, provide} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {child}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.app { |
||||
background-color: gray; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,21 @@ |
||||
<template> |
||||
<div class="child"> |
||||
<h3>我是child组件</h3> |
||||
<son/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import son from "@/components/Son"; |
||||
export default { |
||||
name: "Child", |
||||
components:{son} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.child{ |
||||
background-color: skyblue; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,50 @@ |
||||
<template> |
||||
<div> |
||||
<button @click="isShow=true">点我弹个窗</button> |
||||
<teleport to="body"> |
||||
<div v-if="isShow" class="mask"> |
||||
<div class="dialog"> |
||||
<h3>这是一个弹窗</h3> |
||||
<h4>内容</h4> |
||||
<h4>内容</h4> |
||||
<h4>内容</h4> |
||||
<button @click="isShow=false">关闭弹窗</button> |
||||
</div> |
||||
</div> |
||||
</teleport> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
|
||||
export default { |
||||
name: "Dialog", |
||||
setup() { |
||||
let isShow = ref(false) |
||||
return {isShow} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.mask { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
} |
||||
|
||||
.dialog { |
||||
text-align: center; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 300px; |
||||
height: 300px; |
||||
background-color: green; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,22 @@ |
||||
<template> |
||||
<div class="son"> |
||||
<h3>我是son组件</h3> |
||||
<Dialog/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Dialog from "@/components/Dialog.vue"; |
||||
|
||||
export default { |
||||
name: "Son", |
||||
components:{Dialog} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.son{ |
||||
background-color: orange; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,31 @@ |
||||
<template> |
||||
<div className="app"> |
||||
<h3>我是app组件</h3> |
||||
<Suspense> |
||||
<template v-slot:default> |
||||
<Child/> |
||||
</template> |
||||
<template v-slot:fallback> |
||||
<h3>加载中</h3> |
||||
</template> |
||||
</Suspense> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// import child from "@/components/Child"; // 静态引入 |
||||
import {defineAsyncComponent} from 'vue'; |
||||
|
||||
const Child = defineAsyncComponent(() => import('./components/Child.vue')) // 动态引用 |
||||
export default { |
||||
name: 'App', |
||||
components: {Child}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.app { |
||||
background-color: gray; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,29 @@ |
||||
<template> |
||||
<div class="child"> |
||||
<h3>我是child组件</h3> |
||||
{{sum}} |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
|
||||
export default { |
||||
name: "Child", |
||||
setup() { |
||||
let sum = ref(0) |
||||
return new Promise((resolve,reject)=> { |
||||
setTimeout(()=>{ |
||||
resolve({sum}) |
||||
}, 1000) |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
.child{ |
||||
background-color: skyblue; |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,40 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{ name }}</h2> |
||||
<h2>年龄：{{ age }}</h2> |
||||
<h2>工作种类：{{ job.type }}</h2> |
||||
<h2>薪水：{{ job.salary }}</h2> |
||||
<button @click="changeInfo">修改信息</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 数据 |
||||
let name = ref('张三') |
||||
let age = ref(19) |
||||
let job = ref({ |
||||
type: '前端工程师', |
||||
salary: '30K' |
||||
}) |
||||
|
||||
function changeInfo() { |
||||
name.value = '李四' |
||||
age.value = 88 |
||||
job.value.type = '后端工程师' |
||||
job.value.salary = '31K' |
||||
console.log(name,age) |
||||
} |
||||
|
||||
return { |
||||
name, |
||||
age, |
||||
job, |
||||
changeInfo, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<h2>工作种类：{{ person.job.type }}</h2> |
||||
<h2>薪水：{{ person.job.salary }}</h2> |
||||
<h2>爱好：{{ person.hobby }}</h2> |
||||
<h2>c的值：{{ person.job.a.b.c }}</h2> |
||||
<button @click="changeInfo">修改信息</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref, reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 数据 |
||||
// let name = ref('张三') |
||||
// let age = ref(19) |
||||
// let job = reactive({ |
||||
// type: '前端工程师', |
||||
// salary: '30K', |
||||
// a: { |
||||
// b:{ |
||||
// c: 666 |
||||
// } |
||||
// } |
||||
// }) |
||||
// let hobby = reactive(['抽烟','喝酒','烫头']) |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job:{ |
||||
type: '前端工程师', |
||||
salary: '30K', |
||||
a: { |
||||
b:{ |
||||
c: 666 |
||||
} |
||||
} |
||||
}, |
||||
hobby: ['抽烟','喝酒','烫头'] |
||||
}) |
||||
function changeInfo() { |
||||
person.name = '李四' |
||||
person.age = 88 |
||||
person.job.type = '后端工程师' |
||||
person.job.salary = '31K' |
||||
person.hobby[0] = '测试' |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
changeInfo, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,73 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2 v-show="person.name">姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<h2 v-show="person.sex">性别：{{ person.sex }}</h2> |
||||
<h2>工作种类：{{ person.job.type }}</h2> |
||||
<h2>薪水：{{ person.job.salary }}</h2> |
||||
<h2>爱好：{{ person.hobby }}</h2> |
||||
<h2>c的值：{{ person.job.a.b.c }}</h2> |
||||
<button @click="changeInfo">修改信息</button> |
||||
<button @click="addSex">添加性别</button> |
||||
<button @click="deleteName">删除姓名</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {ref, reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
setup() { |
||||
// 数据 |
||||
// let name = ref('张三') |
||||
// let age = ref(19) |
||||
// let job = reactive({ |
||||
// type: '前端工程师', |
||||
// salary: '30K', |
||||
// a: { |
||||
// b:{ |
||||
// c: 666 |
||||
// } |
||||
// } |
||||
// }) |
||||
// let hobby = reactive(['抽烟','喝酒','烫头']) |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18, |
||||
job: { |
||||
type: '前端工程师', |
||||
salary: '30K', |
||||
a: { |
||||
b: { |
||||
c: 666 |
||||
} |
||||
} |
||||
}, |
||||
hobby: ['抽烟', '喝酒', '烫头'] |
||||
}) |
||||
|
||||
function changeInfo() { |
||||
person.name = '李四' |
||||
person.age = 88 |
||||
person.job.type = '后端工程师' |
||||
person.job.salary = '31K' |
||||
person.hobby[0] = '测试' |
||||
} |
||||
|
||||
function addSex() { |
||||
person.sex = '男' |
||||
} |
||||
|
||||
function deleteName() { |
||||
delete person.name |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
changeInfo, |
||||
addSex, |
||||
deleteName |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,10 @@ |
||||
// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
|
||||
import { createApp } from 'vue' |
||||
import App from './App.vue' |
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
// 创建应用实例对象
|
||||
const app = createApp(App) |
||||
console.log('@@@',app) |
||||
app.mount('#app') |
||||
@ -0,0 +1,26 @@ |
||||
<template> |
||||
<Demo @hello="showHelloMsg" msg="你好" user="Roger"> |
||||
<template v-slot:slot1> |
||||
<span>Roger</span> |
||||
</template> |
||||
</Demo> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
import Demo from "@/components/demo.vue"; |
||||
|
||||
export default { |
||||
name: 'App', |
||||
components: {Demo}, |
||||
setup(){ |
||||
function showHelloMsg(value) { |
||||
alert(`showHelloMsg:${value}`) |
||||
} |
||||
|
||||
return { |
||||
showHelloMsg |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<h1>个人信息：</h1> |
||||
<h2>姓名：{{ person.name }}</h2> |
||||
<h2>年龄：{{ person.age }}</h2> |
||||
<button @click="test">触发showHelloMsg</button> |
||||
</template> |
||||
|
||||
<script> |
||||
import {reactive} from "vue"; |
||||
|
||||
export default { |
||||
name: 'Demo', |
||||
beforeCreate() { |
||||
console.log('---beforeCreate---') |
||||
}, |
||||
props: ['msg', 'user'], |
||||
emits: ['hello'], |
||||
setup(props, context) { |
||||
console.log('---setup---', context) // $attrs $emits $slots |
||||
console.log('---setup---', context.slots) // $attrs $emits $slots |
||||
let person = reactive({ |
||||
name: '张三', |
||||
age: 18 |
||||
}) |
||||
|
||||
function test() { |
||||
context.emit('hello',666) |
||||
} |
||||
|
||||
return { |
||||
person, |
||||
test |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue