Vue入门--第一天

最新推荐文章于 2022-08-30 10:30:30 发布

王大锤_code

最新推荐文章于 2022-08-30 10:30:30 发布

阅读量1.3k

点赞数 7

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44809439/article/details/109567682

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

构造选项搞清楚Vue实例

const vm = new Vue(options)
这个实例更具你的选项（options）得出一个对象vm
这个vm就是封装了这个DOM对象，以及对这个DOM对象的所有操作（和jQuery类似）操作有（事件绑定，数据绑定，DOM更新）

对象.__proto__ = 其构造函数.prototype

任何一个对象的原型 = 其构造函数.prototype

所以vm.__proto__ = Vue.prototype

Vue.__proto__ = Function.prototype(任何函数.proto = Function.prototype)

这里就有一些问题

options(能写什么对象)
vm
vm.__proto__
Vue.__proto__(还有没有什么属性和方法)
里面分别有什么属性和方法（可以想象一下在内存中的样子）

只要把这些问题搞懂了，就差不多懂得vue的构造选项了

options里面有什么

vue.js里面搜选项的五个值就是options

数据
DOM
生命周期钩子
资源
组合

数据

data
props (属性)
propsData
computed (计算的)
methods
watch (观察，监听)

DOM

el (用你的模板替换的地方，挂载点)
template (html内容，完整版使用)
render (渲染，非完整版用)
renderError

生命周期钩子

beforeCreate
created
beforeMount
mounted (挂载)
beforeUpdated
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

资源

directives (指令)
filters (过滤)
components (组件)

组合

parent
mixins (混合)
extends (拓展)
provide (提供)
inject (注入)

生命周期的几个关键点

created
mounted
updated
destroyed

el
挂载点

new Vue({
  el: '#app',
  render(h) {
    return h(Demo)
  }
})

挂载到id="app"的组件上
也有另一种写法

new Vue({
  render(h) {
    return h(Demo)
  }
}).$mount('#app')

注意：挂载上去是把<div id="app">内容</app>全部替换，内容不会展示，全部被替换了。

data
内部数据
data是一个对象

new Vue({
  data: {
    n: 0
  },
  template: `
  <div class="red">
    {{n}}
    <button @click='add'>+1</button>
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    }
  }
}).$mount('#app')

data也可以写成函数，函数返回给data对象

  data: function(){
    return { n: 0}
  }

这样的话，data还是一个对象。
优先使用函数的写法
注意：如果data是写在Demo.vue文件中的(.vue文件结尾)，那么data必须写成函数的形式，因为Demo.vue文件导出的也是一个对象，就会变成new Vew(Demo),如果两次new这个对象，那么data是同一个data,那么两个组件用的就是同一个data(是引用地址)
然而函数返回的对象就不一样了，每次new操作，就执行函数，两次返回的地址是不一样的，所以不会冲突。
所以优先使用函数。

methods
上面的add方法就是写到methods里面的
methods可以代替filter
例如

new Vue({
  data: {
    n: 0,
    array: [1,2,3,4,5,6,7,8]
  },
  template: `
  <div class="red">
    {{n}}
    <button @click='add'>+1</button>
    <hr>
    {{filter()}}
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    },
    filter() {
      return this.array.filter(i=> i%2===0)
    }
  }
}).$mount('#app')

就代替了filter,参数不用传，this上有array,只是方法名叫filter,并不是使用了filter。
只要有东西变化了，template就会重新调用，重新渲染到页面上，里面的函数也会执行。

components

import Vue from 'vue';
import Demo from '路径(一个vue组件的地址)';

new Vue({
  components: {
    Frank: Demo//可以Demo: Demo-->Demo(es6新写法)
  },
  
  template: `
  <Frank/>
  `,
  
}).$mount('#app')

就像上面一样使用components，使用的vue文件的方式，下面用js的方式使用components

import Vue from 'vue';

Vue.components('Demo2',{
  template: `
    <div>内容</div>
  `
})

new Vue({
 
  template: `
  <Demo2/>
  `,
  
}).$mount('#app')

components

import Vue from 'vue';


new Vue({
  components: {
  Frank: {
    data(){
      return {n:0}
    },
    template: `
      <div>{{n}}</div>
    `
  } //这里面就相当于一个小的文件了
    //里面也包含vue的构造选项。
},  //data必须是函数返回的对象。
  
  template: `
  <Frank/>
  `,
  
}).$mount('#app')

优先使用第一种。后面的感觉写起来有点鸡肋。一般文件名小写，组件名大写，不然容易和html标签冲突。
可以认为给Vue实例取了一个名字

created
这个出现在内存中，没有出现在页面中的时候。

created() {
  debugger
  console.log('***')
}

用debugger来调试，页面中没有出现该出现的内容。证明了还没有出现在页面中。

mounted
已经出现在页面中

mounted() {
  debugger
  console.log('***')
}

也用debugger就可以证明.

updated
数据更新了就会执行，并且这时候，数据是最新的。

destroyed
从页面中消失。
Demo.vue中

<template>
  <div>
    {{n}}
  <button @click="add">+1</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        n: 0;
      }
    },
  methods:{
    add() {
      this.n+=1;
    }
  },
  destroyed() {
    console.log("消失了")
  }
}
</script>

然后在main.js中

import Vue from 'vue';
import Demo from './Demo.vue';
new Vue({
  components: {Demo},
  data:{
    visible: true
  },
  template: `
    <div>
      <button @click="toggle">toggle</button>
      <hr>
      <Demo v-if="visible" === true/>
    </div>
`,
  methods: {
    toggle.visible = !this.visible//点击就隐藏
  }
}).$mount('#app')

点击隐藏，就会消失，然后打印出“消失了”
这里我做了一个按钮，点击按钮，数字+1，先把他加到4，再隐藏，再点击显示，就会发现，按钮变成0，不是4，所以按钮不是原来的那个按钮了。

证明的思路很重要。

props外部属性

data是内部属性
下面是子组件的写法

<template>
  <div>
    {{this.message}}//也可以写成message,this可以省掉
    <button @click="fn">call fn</button>//调用父组件传递过来的方法
  </div>
</template>

<script>
  export default {
    props: ['message','fn']//fn是父组件传递过来的方法
}
</script>

父组件中

import Vue from 'vue';
import Demo from './Demo.vue';
new Vue({
  components: {Demo},
  data: {
    n: 0
  }
  template: `
    <div>
      <Demo :message="n"/> //前面加了冒号，后面双引号里的就是js代码，这个n优先从data中找
      <Demo message="0"/> //等价于下面的写法
      <Demo :message=" '0' " //js中的字符串0
      <Demo :fn="add"/> //传递方法
    </div>
`,
methods: {
  add() {}
}
}).$mount('#app')