1. The standard development method of Vue
[1] The development method recommended by Vue is ------------- SPA (Single Page (Web) Application) single-page Web application
【2】What is SPA (Single Page Application)?
Single-page application: there is only one page in the project in the future =========== 》》》index.html
[3] Why does Vue recommend the development method of SPA (Single Page Application)?
a. Import Vue js file
b. Create a Vue instance object in the existing page
Only one Vue instance can exist in a page
Vue recommended development method: Only one Vue instance can exist in an application
【4】Is there a problem in strictly following the SPA with the existing means?
a. The existing development method will lead to more and more codes in the only page in the project, which is not conducive to maintenance
b. The existing development method leads to the completion of all business functions in the only page in the project, resulting in a very slow loading speed of the current page each time
[5] In order to strictly follow the SPA development method, the Vue component (component) is provided in Vue
Component role:
1. Reduce the amount of code in the Vue root instance
2. A component is responsible for completing a function or a group of functions in the project to achieve business function isolation
3. Components can also be reused in Vue
【6】How to use the components?
a. Global components: components directly registered to the Vue root instance
Vue.component( ' ' ) // Register this is the global component
b. Partial components: components that can only be used in registered components
const app = new Vue({
el：" ";
data:{ },
methods:{ },
computed:{ },
created(){ },
components:{ } , // Register local components
})
The biggest difference : The scope is different, if it is global, it can be used anywhere; if it is local, the current component can be used
【7】Basic use of components
a. The use of global components
1) Define components
Vue.component('login', { //Two parameters: parameter one: component name parameter two: component configuration object template: , // <h2>用户登录</h2>used to write the html code of the component });
2) Using components
< login> < /login>
<body>
<div id="app">
<h1>{
{msg}}</h1>
<!-- 登录 -->
<login></login>
<!-- 注册 -->
<register></register>
</div>
</body>
</html>
<script src="../../js/vue.js"></script>
<script>
//1、定义一个登录的全局组件
Vue.component('login', { //两个参数：参数一：组件名 参数二：组件的配置对象
template: `<h2>用户登录</h2>`, //用来书写该组件的html代码
});
//1、定义一个注册的全局组件
Vue.component('register', { //两个参数：参数一：组件名 参数二：组件的配置对象
template: `<h2>用户注册</h2>`, //用来书写该组件的html代码
});
</script>b. Use of local components
1) Define components
//定义一个局部组件
components: {
add: { // 语法： 组件名：{ template:` `}
template: `<h2>用户添加</h2>`
}
}2) Using components
<!-- 添加 -->
<add></add><body>
<div id="app">
<!-- 添加 -->
<add></add>
</div>
</body>
</html>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "Vue中组件使用"
},
methods: {
},
computed: {
},
created() {
},
//定义一个局部组件
components: {
add: { // 语法： 组件名：{ template:` `}
template: `<h2>用户添加</h2>`
}
}
})
</script>[8] Define component data data, methods, computed, components in Vue components
The life cycle of a component is divided into four phases:
-
create
-
mount
-
update (update)
-
destroy (destroy)
Components can define their own data, methods, computed, components, lifecycle functions, and their own subcomponents.
<body>
<div id="app">
<h1>{
{msg}}</h1>
<!-- 使用登录组件 -->
<login></login>
<register></register>
</div>
</body>
</html>
<script src="../../js/vue.js"></script>
<script>
// 定义一个全局组件
Vue.component('register', {
template: `<h1>我是全局组件</h1>`
})
//定义一个局部组件
const login = {
template: `<div><h1>用户登录</h1><h2>{
{count}}--------------{
{countSqrt}}</h2><h2>{
{msg}}</h2><aa></aa><register></register><button @click="add">点我count++</button></div>`,
data() { //用来给当前组件定义属于组自己的数据 组件中定义的data必须是一个函数
return { //在return中可以定义数据
count: 0,
msg: "我是组件的msg",
}
},
methods: {
add() {
this.count++;
}
},
computed: {
countSqrt() {
return this.count * this.count;
}
},
components: {
aa: {
template: `<h1>我是aa子组件</h1>`
}
}
};
const app = new Vue({
el: "#app",
data: {
msg: "Vue组件中定义组件的data、methods、components等"
},
// 定义一个局部组件
components: { //用来定义局部组件
login,
}
})
</script>[9] Parent components in Vue pass data props to child components
Future Vue development: everything is a component
(1) props mechanism:
1. Definition: Vue provides a unique data transfer mechanism
2. Function: When using Vue components, if you need to pass data to the component through the parent component, you can implement it through props
(2) Use of props:
Role: props is used to pass corresponding static data or dynamic data to components
a. Pass static data : Declare static data key = value on the label used by the component Use props inside the component definition to receive data
Note: Using the props mechanism to receive data is equivalent to declaring such data in your own component data
<body>
<div id="app">
<h1>{
{msg}}</h1>
<login title="我是标题" count="0"></login>
</div>
</body><script src="../../js/vue.js"></script>
<script>
//定义组件对象
const login = {
props: ['title', 'count'],
template: `<div><h1>{
{title}} ----------- {
{loginTitle}} ----------- {
{count}}</h1></div>`,
data() {
return {
loginTitle: this.title,
}
},
};
const app = new Vue({
el: "#app",
data: {
msg: "组件之间的数据传递",
},
components: {
login,
}
})
</script>b. Transfer dynamic data
Implemented according to property binding
single stream
<body>
<div id="app">
<h1>{
{msg}}</h1>
<input type="text" v-model="name">
<!-- 向子组件传递一个动态数据 -->
<login :name="name" :msg="msg"></login>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
//定义组件对象
const login = {
props: ['name', 'msg'],
template: `<div><h1>{
{name}} ----------- {
{msg}}</h1></div>`,
data() {
return {
}
},
};
const app = new Vue({
el: "#app",
data: {
msg: "组件之间的传递",
name: "我是vue实例管理数据"
},
components: {
login,
}
})
</script>[10] Parent components in Vue pass events to child components and pass data to parent components through event child components
(1) Parent components in Vue pass events to child components
When using components, pass events to components
1. Just define the passed event directly on the corresponding component tag @key = value
<body>
<div id="app">
<h1>{
{msg}}</h1>
<login @aa="testParent"></login>
</div>
</body><script src="../../js/vue.js"></script>
<script>
const login = {
template: `<div><h3>用户登录</h3> <button @click="testChild">点我去掉父组件中某个事件</button></div>`,
methods: {
testChild() {
alert("我是子组件中定义的事件");
//调用父组件中的testParent
this.$emit('aa'); //用来调用父组件传递过来的事件
}
}
};
const app = new Vue({
el: "#app",
data: {
msg: "组件之间的事件传递",
},
methods: {
testParent() {
alert("我是父组件上的事件")
}
},
components: {
login,
}
})
</script>(2) Pass data to the parent component through the event subcomponent
1. @aa = "parent event" in the tag, get aa and parent events through this.$emit('aa', this.count) in the child component, and pass in the data this.count in the child component to the parent event received as a parameter.
<body>
<div id="app">
<h1>{
{msg}}{
{count}}</h1>
<login @aa="testParent"></login>
</div>
</body><script src="../../js/vue.js"></script>
<script>
//子组件
const login = {
template: `<div><h3>用户登录</h3> <button @click="testChild">点我去掉父组件中某个事件</button></div>`,
data() {
return {
count: 19,
}
},
methods: {
testChild() {
alert("我是子组件中定义的事件");
//调用父组件中的testParent
this.$emit('aa', this.count); //用来调用父组件传递过来的事件
}
}
};
//父组件
const app = new Vue({
el: "#app",
data: {
msg: "组件之间的事件传递",
count: 0,
},
methods: {
testParent(count) {
alert("我是父组件上的事件");
console.log(count);
this.count = count;
}
},
components: {
login,
}
})
</script>[11] The slot of the component uses slot
slot: slot
Function: used to extend existing components and make components more flexible
slot: placeholder
named slot: a slot with a name
Default slot: Insert in all slots by default
<body>
<div id="app">
<h1>{
{msg}}</h1>
<!--
插槽：占位
具名插槽 ：带有名字的插槽
默认插槽 ：默认插入全部插槽中
-->
<login></login>
<login><span slot="bb">欢迎进入我们的网站{
{msg}}</span></login>
<hr>
<login><span slot="aa">Welcome come to aa</span></login>
</div>
</body><script src="../../js/vue.js"></script>
<script>
const login = {
template: `<div><slot name="aa"></slot><h3>用户登录</h3><slot name="bb"></slot></div>`,
}
const app = new Vue({
el: "#app",
data: {
msg: "组件的slot(插槽)使用"
},
components: {
login,
}
})
</script>