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 } } })
组件的三种写法
方法一：新建一个文件，再将其引入（推荐使用）
1.新写一个.vue文件，文件名建议全小写
文件的内容有三大部分
用来写视图的,
除了视图外的其他选项export default { },
写样式的
<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>
2.在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组件传参
在组件中传参，需要先创建一个组件，这里创建一个文件
1.使用{{}}在模板里占位，在props里声明传入的参数
<template> <div class="red"> + {{message}} </div> </template> <script> export default { + props:['message'] } </script> <style scoped> .red{ color: red; border: 1px solid blue; } </style>
2.在实例中引入并传参，此时传入的只是一个字符串
//引入组件 components:{Demo}, data:{ visible:true n:0 }, template:` <div> //传入参数，参数名要和组件里的参数名一致 + <Demo message="你好222" /> </div> `,
3.要想将实例中的数据变量传如组件中需要在参数名前面加：,此时传入的才是变量值
<Demo :message="n" />
传入函数
1.函数需要先在实例中定义好，在组件标签里写入 参数="函数名"，这里也要使用:fn就是传入的参数，add则是函数名
<Demo :message="n" :fn="add" />
2.在组件中定义和声明
<template> <div class="red"> {{message}} //函数的参数名 <button @click="fn">+1</button> </div> </template> <script> export default { //声明参数 props:['message','fn'] } </script>
