Vue基础知识

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>
  `
})