RogerWorkPC
/
Vue_Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

VueComponent1

Browse Source
new_branch1
roger 2 years ago
parent 2bcd05f8a7
commit 80fa552902
6 changed files with 330 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      01_初识Vue/基础模板.html
  2. 79
      18_非单文件组件/1.基本使用.html
  3. 67
      18_非单文件组件/2.几个注意点.html
  4. 94
      18_非单文件组件/3.组件的嵌套.html
  5. 79
      18_非单文件组件/4.VueComponent.html
  6. 10
      18_非单文件组件/5.一个重要的内置关系.html

2
01_初识Vue/基础模板.html
Unescape View File

@ -13,7 +13,7 @@
Vue.config.productionTip = false // 组织开发环境提示 Vue.config.productionTip = false // 组织开发环境提示
// 创建Vue实例 // 创建Vue实例
const vmx = new Vue({ const vm = new Vue({
el: '#root', el: '#root',
data: { data: {
name: '尚硅谷', name: '尚硅谷',

79
18_非单文件组件/1.基本使用.html
Unescape View File

@ -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>

67
18_非单文件组件/2.几个注意点.html
Unescape View File

@ -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>

94
18_非单文件组件/3.组件的嵌套.html
Unescape View File

@ -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>

79
18_非单文件组件/4.VueComponent.html
Unescape View File

@ -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>

10
18_非单文件组件/5.一个重要的内置关系.html
Unescape View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
Write Preview
Loading…
Cancel
Save