vue的基础语法，基础英语
temeplate 是 模板 的意思 需要将html代码写到这个里面
options
options就是属性的意思
创建一个vue实例，所有的数据和操作都要写在这个实例里面，options就是这个实例的属性
const vm = new Vue(options)
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方法
const vm = new Vue({
el:'#oldCode',
data(){
return{
n:0
}
},
methods:{
add(){
this.n+=1
}
}
})
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>
2.要想将实例中的数据变量传如组件中需要在参数名前面加：,此时传入的才是变量值
<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>
生命周期钩子
<body>
<div id="app">
<h3 id="h3">{{msg}}</h3>
<input type="button" value="修改msg" @click="msg='No'">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'ok',
},
methods:{
show(){
console.log('执行了show方法')
}
},
/*
一、第一个生命周期函数，表示实例完全被创建之前，会执行这个函数
在beforeCreate生命周期函数执行的时候，data 和 methods 中的数据还没有被初始化
*/
beforeCreate() {
console.log(this.msg) //undefind
this.show() //is not defind
},
/*
二、第二个生命周期函数
在 created 中，data 和 methods 都已经被初始化好了！
如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
*/
created() {
console.log(this.msg) //ok
this.show() //执行了show方法
},
/*
三、第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中
在beforeMount执行的时候，页面中的元素没有被真正替换过来，知识之前写的一些模板字符串
*/
beforeMount() {
console.log(document.getElementById('h3').innerText) //{{msg}}
},
/*
四、第四个生命周期函数，表示内存中的模板已经真实的挂载到页面中，
用户已经可以看到渲染好的页面
这个mounted是实例创建期间的最后一个生命周期函数，
当执行完 mounted 就表示，实例已经被完
全创建好了，此时，如果没有其它操作的话，这个实例，就静静地在内存中不动
*/
mounted() {
console.log(document.getElementById('h3').innerText) //ok
},
/*
组件运行阶段的2个钩子函数
五、第五个生命周期函数，表示 界面还没有被更新，但是数据肯定被更新了
得出结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，
此时data 数据是最新的，页面尚未和 最新的数据保持同步
*/
beforeUpdate() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //没有执行，因为数据没改变
console.log('data 中的msg数据是：' + this.msg)
},
/*
六、第六个生命周期函数
updated事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
*/
updated() {
console.log('界面上元素的内容'+ document.getElementById('h3').innerText) //No
console.log('data 中的msg数据是：' + this.msg) //No
},
//第七个 和 第八个销毁阶段
})
</script>
</body>
- created-实例出现在内存中
- mounted-实例出现在页面中
- updated-实例更新了
- destroyed-实例消亡了