const vm = new Vue({})这就是一个vue的实例 参数写在大括号里，下面就讲一讲括号里的内容，本章讲解的主要知识点是
- el和mount挂载点
- data数据
- methods方法
- 组件components和component
- 四个钩子和生命周期
- props组件传参
el和mount 两种挂载点的用法
挂载点：要替换容器上的哪一块，通常在html上用id标识
el的使用方法
直接写在参数里,oldCode就是id名
const vm = new Vue({
el:'#oldCode',
})
mount的使用方法
//可以使用链式方法
const vm = new Vue({
el:'#oldCode',
}).$mount('#oldCode')
//也可以在实例名后面
vm.$mount('#oldCode')
data 数据的两种写法
data是内部数据，建议使用函数写法
对象
const vm = new Vue({
el:'#oldCode',
data:{
n:0
},
})
另一种方式是函数（推荐使用）
函数写法需要将数据写在return返回值里面
const vm = new Vue({
el:'#oldCode',
data(){
return{
n:0
}
},
})
methods方法
add是方法名
const vm = new Vue({
el:'#oldCode',
data(){
return{
n:0
}
},
methods:{
add(){
this.n+=1
}
}
})
组件的三种写法
方法一：新建一个文件，再将其引入（推荐使用）
- 新写一个.vue文件，文件名建议全小写
文件的内容有三大部分
用来写视图的<template></template>,
除了视图外的其他选项<script>export default { }</script>,
写样式的<style scoped> </style>
<template>
<!-- 写视图 -->
<div class="red">
demo
</div>
</template>
<script>
// 除了视图外的其他选项
export default {
data(){
return {
n:0
}
},
methods:{
add(){
this.n+=1
}
}
};
</script>
<style scoped>
.red{
color:red;
}
</style>
- 在main.js中引入
导入文件
import 名字 from '文件路径'
import Demo from './demo.vue'
const vm = new Vue({
//告诉程序我要使用的组件是谁，和它对应的值
components:{
Demo:Demo
},
el:'#oldCode',
data(){
return{
n:0
}
},
})
方法二：直接在main.js中创建并引用
使用component,第一个参数是组件名，第二个是模板
//新建的组件
+ Vue.component('Demo',{
+ template:`
+ <div>demo方式二</div>
+ `
+ })
const vm = new Vue({
el:"#oldCode"
data:{
n:0
},
template:`
<div class="red">
{{n}}
<button @click="add">+1</button>
<Frank/>
//引入组件
+ <Demo />
</div>
`,
methods:{
add(){
this.n+=1
},
})
方法三就是将上面两种方法结合起来使用
components:{
Demo3:{
data(){
return {n:0}
}
}，
template:`
<div>demo3方式三 {{n}}</div>
`
},
四个钩子，生命周期
使用debugger调试方法， 验证这几个周期需要配合这组件一起使用
- created-实例出现在内存中
- mounted-实例出现在页面中
- updated-实例更新了
- destroyed-实例消亡了
created(){
console.log('出现在内存中，没有出现在页面中')
},
mounted() {
debugger
console.log('我已经出现在页面中')
},
updated(){
console.log('数据更新时会出现')
}，
destroyed(){
console.log('实例消失时就出现')
}
props组件传参
在组件中传参，需要先创建一个组件，这里创建一个文件
- 使用{{}}在模板里占位，在props里声明传入的参数
<template>
<div class="red">
+ {{message}}
</div>
</template>
<script>
export default {
+ props:['message']
}
</script>
<style scoped>
.red{
color: red;
border: 1px solid blue;
}
</style>
- 在实例中引入并传参，此时传入的只是一个字符串
//引入组件
components:{Demo},
data:{
visible:true
n:0
},
template:`
<div>
//传入参数，参数名要和组件里的参数名一致
+ <Demo message="你好222" />
</div>
`,
3.要想将实例中的数据变量传如组件中需要在参数名前面加：,此时传入的才是变量值
<Demo :message="n" />
传入函数
- 函数需要先在实例中定义好，在组件标签里写入 参数="函数名"，这里也要使用:fn就是传入的参数，add则是函数名
<Demo :message="n" :fn="add" />
- 在组件中定义和声明
<template>
<div class="red">
{{message}}
//函数的参数名
<button @click="fn">+1</button>
</div>
</template>
<script>
export default {
//声明参数
props:['message','fn']
}
</script>
