Vue基础知识
Vue单文件组件：以任意方式组成一个对象，最后用loader还原成对象
单页面：是指没有路由跳转的页面（这里的路由指的是后端路由），整个页面是一个编译后是一个整体，包括通过router切换的页面，router切换说白了就是将要显示部分显示，其余部分不显示，类似于a标签点击显示某一部分，vue写的页面都是单页面
组件的定义：文件使用其他的.Vue文件，这个.Vue文件就是组件
Vue实例
const vm = new Vue(options)
new Vue会构造一个实例，这个Vue实例会根据options得出一个对象，命名为vm（沿用尤雨溪命名习惯）。这个vm对象封装了对视图的所有操作，包括数据读写，事件绑定，Dom更新。
options是new Vue的参数，一般称之为选项或构造选项。
options其中五类属性：数据、DOM、生命周期钩子、资源、组合
1、方法和函数的区别
方法：面向对象的概念，依附于一个对象
obj.sayHi()
函数：数学概念
sayHi()
2、data
内部属性，由内部传值
注意：data如果写在.Vue(组件)文件中，data必须使用函数，防止两个组件共用一个data（其中一个data改了另一个也会改变），使用自己的组件（Vue实例）也可写成对象的形式
data() {return}
data: {}
3、methods方法，处理函数和普通函数
<div class="red">
{{ n }}
<button @click="add">+1</button> //add方法、@click点击事件
</div>
<script>
export default {
methods: {
add() { //事件处理函数
this.n += 1;
},
filter() { //普通函数
console.log("执行了filter");
// return array.filter((item) => item % 2 === 0)
return this.array.filter((item) => item % 2 === 0)
}
}
}
</script>
注意：改变n的值filter也会执行，原因：methods每次渲染都会执行，即使只改变其中一个方法，其他方法依然会执行
4、定义一个组件
注意：命名规则，文件名最好小写，组件名首字母最好大写
Vue.component('Demo', { //定义组件，组件名Demo
el: '#app',
template: `
<div>
</div>
`
})
const vm = new Vue({
components: { Demo }, //引用这个组件
template: `
<div>
<Demo :message='b' :fn='add'/> //使用这个组件
//加:号传变量，不加传字符串b
</div>
`
}）
5、引用一个组件
import Demo from './demo' //引用
new Vue({
components:{Demo} //{Demo:Demo}组件命名使用
template: `
<div> <Demo/> </div>
`
})
6、生命周期钩子
生命周期钩子：生命周期以人的生老病死类比，钩子：切入点
created() {
console.log("实例出现在内存中");
},
mounted() {
console.log("实例出现在页面中");
},
updated() {
console.log("实例更新了");
},
destroyed() {
console.log(this.n);
console.log("实例消失（亡）了");
}
destroyed()消亡之后，新创建的是全新的实例
7、props
外部属性，由外部传值。可传变量、方法、常量
Vue.component('Demo', {
el: '#app',
template: `
<div>
{{message}}
<button @click='fn'>click1</button>
</div>
`,
props: ['message', 'fn']
})
const vm = new Vue({
components: { Demo },
data: {
visible: true,
b: 1
},
el: '#app',
template: `
<div>
<Demo :message='b' :fn='add'/> //加:号传变量，不加传字符串b
</div>
`
})
