Skip to content

Commit f5cb8bd

Browse files
xingwei07xingwei07
committed
初次提交
1 parent dda5309 commit f5cb8bd

File tree

286 files changed

+32086
-97
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

286 files changed

+32086
-97
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
node_modules
33
/dist
44

5-
65
# local env files
76
.env.local
87
.env.*.local

‎01_src_分析脚手架/App.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<School></School>
4+
<Student></Student>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import School from './components/School'
10+
import Student from './components/Student'
11+
12+
export default {
13+
name:'App',
14+
components:{
15+
School,
16+
Student
17+
}
18+
}
19+
</script>

‎src/assets/logo.png renamed to ‎01_src_分析脚手架/assets/logo.png

File renamed without changes.

‎01_src_分析脚手架/components/School.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="demo">
3+
<h2>学校名称：{{name}}</h2>
4+
<h2>学校地址：{{address}}</h2>
5+
<button @click="show">点我提示学校名</button>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name:'School',
12+
data(){
13+
return {
14+
name:'尚硅谷',
15+
address:'北京昌平'
16+
}
17+
},
18+
methods:{
19+
show(){
20+
alert(this.name)
21+
}
22+
}
23+
}
24+
</script>
25+
26+
<style>
27+
.demo{
28+
background-color: orange;
29+
}
30+
</style>

‎01_src_分析脚手架/components/Student.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<h2>学生姓名：{{name}}</h2>
4+
<h2>学生年龄：{{age}}</h2>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name:'Student',
11+
data(){
12+
return {
13+
name:'张三',
14+
age: 18
15+
}
16+
}
17+
}
18+
</script>

‎01_src_分析脚手架/main.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*
2+
该文件时整个项目的入口文件
3+
*/
4+
// 引入Vue
5+
import Vue from 'vue'
6+
// 引入App组件，它是所有组件的父组件
7+
import App from './App.vue'
8+
// 关闭Vue的生产提示
9+
Vue.config.productionTip = false
10+
11+
// 创建Vue实例对象vm
12+
new Vue({
13+
// 功能：将App组件放入容器中
14+
render: h => h(App),
15+
}).$mount('#app')

‎02_src_ref元素/App.vue

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<h1 v-text="msg" ref="title"></h1>
4+
<button ref="btn" @click="showDOM">点我输出上方DOM</button>
5+
<School ref="sch" />
6+
</div>
7+
</template>
8+
9+
<script>
10+
//引入School组件
11+
import School from './components/School.vue'
12+
13+
export default {
14+
name:'App',
15+
data() {
16+
return {
17+
msg:'欢迎学习Vue!'
18+
}
19+
},
20+
methods:{
21+
showDOM(){
22+
console.log(this.$refs.title) //真实DOM元素
23+
console.log(this.$refs.btn) //真实DOM元素
24+
console.log(this.$refs.sch) //School组件的实例对象(vc)
25+
}
26+
},
27+
components:{
28+
School
29+
}
30+
}
31+
</script>
32+
33+
<style>
34+
35+
</style>

‎02_src_ref元素/components/School.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="school">
3+
<h2>学校名称：{{name}}</h2>
4+
<h2>学校地址：{{address}}</h2>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name:'School',
11+
data(){
12+
return {
13+
name:'尚硅谷',
14+
address:'北京昌平'
15+
}
16+
}
17+
}
18+
</script>
19+
20+
<style>
21+
.school {
22+
background-color: gray;
23+
}
24+
</style>

‎02_src_ref元素/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
//引入Vue
2+
import Vue from 'vue'
3+
//引入app
4+
import App from './App'
5+
//关闭vue的生产提示
6+
Vue.config.productionTip = false
7+
8+
//创建vm
9+
new Vue({
10+
el:'#app',
11+
render: h => h(App)
12+
})

‎03_src_props配置/App.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
<Student name="张三" :age="20" sex="男" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Student from './components/Student.vue'
9+
10+
export default {
11+
name:'App',
12+
components:{
13+
Student
14+
}
15+
}
16+
</script>

‎03_src_props配置/components/Student.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div>
3+
<h1>{{msg}}</h1>
4+
<h2>学生姓名：{{name}}</h2>
5+
<h2>学生性别：{{sex}}</h2>
6+
<h2>学生年龄：{{age+1}}</h2>
7+
<button @click="updateAge">尝试修改年龄</button>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name:'Student',
14+
data(){
15+
return {
16+
msg:'我是一个尚硅谷的学生'
17+
}
18+
},
19+
methods: {
20+
updateAge(){
21+
this.age++
22+
}
23+
},
24+
// props:['name','age','sex'] //简单接收
25+
// props:{
26+
// name: String,
27+
// age: Number,
28+
// sex: String
29+
// }
30+
props:{
31+
name:{
32+
type:String, //类型是String
33+
required:true //name是必要的
34+
},
35+
age:{
36+
type:Number,
37+
default:99 //默认值
38+
},
39+
sex:{
40+
type:String,
41+
required:true,
42+
default:'男'
43+
}
44+
}
45+
}
46+
</script>

‎03_src_props配置/main.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
//引入Vue
2+
import Vue from 'vue'
3+
//引入app
4+
import App from './App'
5+
//关闭vue的生产提示
6+
Vue.config.productionTip = false
7+
8+
//创建vm
9+
new Vue({
10+
el:'#app',
11+
render: h => h(App)
12+
})

‎04_src_mixin混入(合)/App.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<Student />
4+
<hr>
5+
<School />
6+
</div>
7+
</template>
8+
9+
<script>
10+
import Student from './components/Student'
11+
import School from './components/School'
12+
13+
export default {
14+
name:'App',
15+
components:{
16+
Student,
17+
School
18+
}
19+
}
20+
</script>

‎04_src_mixin混入(合)/components/School.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<!-- <h2 @click="showName">学校名称：{{name}}</h2> -->
4+
<h2 @click="showName">学校名称：{{name}}</h2>
5+
<h2>学校地址：{{address}}</h2>
6+
</div>
7+
</template>
8+
9+
<script>
10+
//引入一个混合
11+
// import {mixin} from '../mixin'
12+
13+
export default {
14+
name:'School',
15+
data(){
16+
return {
17+
name:'尚硅谷',
18+
address:'北京昌平'
19+
}
20+
}
21+
}
22+
</script>

‎04_src_mixin混入(合)/components/Student.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h2 @click="showName">学生姓名：{{name}}</h2>
4+
<h2>学生年龄：{{age}}</h2>
5+
</div>
6+
</template>
7+
8+
<script>
9+
// import {mixin} from '../mixin'
10+
export default {
11+
name:'Student',
12+
data(){
13+
return {
14+
name:'张三',
15+
age:18
16+
}
17+
}
18+
}
19+
</script>

‎04_src_mixin混入(合)/main.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//引入Vue
2+
import Vue from 'vue'
3+
//引入app
4+
import App from './App'
5+
import {mixin} from './mixin'
6+
7+
//关闭vue的生产提示
8+
Vue.config.productionTip = false
9+
Vue.mixin(mixin)
10+
11+
//创建vm
12+
new Vue({
13+
el:'#app',
14+
render: h => h(App)
15+
})

‎04_src_mixin混入(合)/mixin.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export const mixin = {
2+
methods: {
3+
showName(){
4+
alert(this.name)
5+
}
6+
}
7+
}
8+
9+
export const mixin2 = {
10+
mounted(){
11+
console.log("加载完毕...")
12+
}
13+
}

‎05_src_插件/App.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<Student />
4+
<hr>
5+
<School />
6+
</div>
7+
</template>
8+
9+
<script>
10+
import Student from './components/Student'
11+
import School from './components/School'
12+
13+
export default {
14+
name:'App',
15+
components:{
16+
Student,
17+
School
18+
}
19+
}
20+
</script>

0 commit comments

Comments
 (0)