Vue基础知识点

props 是子组件用来接收来自组件外部（父组件）传递进来的数据。
创建Vue应用：Vue.createApp( )

插值表达式

用 {{ }} 定义插值表达式
里面可以填入data中定义的变量，也可以填入JS表达式，但是不可以填JS语句。

template: `<div>{{message}}</div>`
template: `<div>{{Math.max(1,2)}}</div>`

模板 template

模板属性中可以写组件模板的内容

var app = Vue.createApp({
  data(){
  	return{
      value : 2,
  	}
  },
  template: `<div>{{value}}</div>`
	//可以单行写，也可以多行写。
})

组件元素样式绑定

1. 使用原生HTML语法

<style>
  .red {
  	color: red;
  }
</style>

const app = Vue.createApp{
	template: `<div class="red"> hello </div>`
}

2. 使用样式变量绑定的方法

在style中书写样式表，在data中注册样式名，在然后在template中通过v-bind:class="样式名"来进行绑定。
如果该元素使用一种样式，data中就用字符串类型注册；
如果该元素使用多种样式，data中用对象或数组类型注册，甚至可以在数组里用对象。

classString: 'red', //有引号
classObject: {'red': true, 'green': false},
classArray: ['red', 'green', {blue: true}]

例子：

<style>
  .red {
  	color : red;
  }
	.green {
  	color : green;
  }
</style>

<script>
  const app = Vue.createApp({
  	data(){
      return {
      	message: 'hello world',
        //绑定单个样式，用字符串类型写
        classString: 'red',
        //绑定多个样式，用对象类型写
        classObject: {red:true, green: false},
        //绑定多个样式，用数组类型写
        classArray: ['red', 'green', {blue: true}]
      }
    },
    template: `
			<div :class="classObject">{{message}}</div>
		`
  })
</script>

子组件样式绑定

子组件样式

可以写在定义子组件时的template上
也可以写在父组件调用子组件的标签上
如果子组件有多个根元素：那么不能直接写在父组件调用子组件时，
因为会不清楚应用在子组件的哪个根元素上。
- 只能直接写在子组件定义时，
- 或者父组件通过 $ 传值，往子组件里传。

<style>
  .red {
  	color: red
  }
</style>

//样式写在子组件上
const demo = {
      template:`<div class="red">one</div>`
    }

//样式写在父组件调用子组件的标签上
const app = Vue.createApp(){
	template : `
        <div>
          <demo class="red"></demo>
        </div>
      `
}
  
//如果子组件有多个根元素
  	//父组件
    app...{
			template: `<div><demo class="red" /></div>`
    }
  	//子组件
    const demo = {
      //父组件定义的样式，传给了子组件的第一个根元素，通过$attrs
      template:`
        <div :class="$attrs.class">one</div>
        <div>two</div>
      `
    }

行内样式

Vue中行内样式

可以在template中像写普通HTML文件一样写。

template:`
        <div style="color:blue">hello</div>
      `

可以用样式属性绑定的语法写.

在data中定义样式表，在元素标签上用　: style="样式名"进行绑定

const demo = {
  data(){
    return {
      style: {
        color: 'orange',
        background: 'lightgrey'
      }
    }
  },
  template:`
  	<div :style='style'>hello</div>
  `
}

数据 data

改变数据

vm.$data.变量 = xx
如果数据是根节点的数据
vm.变量 = xx 可以直接改变

方法 methods

this

编写方法函数时用到的this指的是当前的Vue实例。
如果用箭头函数编写方法，不要用this，因为这里的this不是指向当前的Vue实例，而是向外层找。

计算属性 computed

变量的计算不能直接写在template中，应该通过computed属性来计算。
computed属性中定义好的计算变量结果可以直接用在template中。
当计算表达式中的变量发生变化时，结果也会自动发生变化。

var app = Vue.createApp({
  data(){
  	return{
      count : 2,
      price : 5
  	}
  },
  computed: {
  	total(){
      return this.price * this.count;
    }
  },
  template: `<div>{{total}}</div>`
})

当price或者count发生变化时，total也会自动相应发生变化。

实际上将相同的计算过程写在methods函数中，也可以实现相同的效果。
那么computed和methods的区别是什么呢？

computed和methods的区别

computed：计算属性依赖的变量发生变化时，才会重新执行计算。
methods：只要页面重新渲染了，就会重新执行计算。

建议：

computed和methods都能实现的功能，建议用computed，因为有缓存，性能好。
computed和watch都能实现的功能，建议用computed，因为computed更加简洁。

侦听器 watch

监听变量的改变，可以实现异步操作。

data(){
  return {
  	price : 5
  }
},
watch: {
	price(current, previous){
    console.log(`previous`+'=>'+`current`);
  	setTimeout(() =>　{
      console.log('price changed');
    }, 1000)
  }
}

变量可以携带两个参数，分别是当前的值和前一个值。
实际上computed属性的底层实现就是通过watch属性监听到变量的变化然后进行计算。

MVVM

Vue这种面向数据的设计模式，是参考了MVVM的设计模式。

VM

const vm = app.mount('#root');
app.mount()返回的是Vue应用对应的根组件
可以去浏览器看一下这里的vm是什么

获取根节点的数据：
vm.$data.

生命周期

生命周期钩子函数

是用户选择在组件某个生命阶段自动执行的函数。
如 mounted、updated 和 unmounted。生命周期函数的 this 上下文指向调用它的当前活动实例。

注意：不要在选项 property 或回调上使用箭头函数。
比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

生命周期图示

生命周期大致分为：初始化阶段、模板编译阶段、挂载阶段、卸载阶段。
组件生命周期图

初始化阶段

从 new Vue() 到 created()，在实例上初始化了一些属性、事件以及响应式数据。
初始化流程：

首先初始化事件与属性，
然后触发生命周期钩子 beforeCreate，
随后初始化 inject、状态(props/methods/data/computed/watch)、provide
接着触发生命周期钩子created
最后判断用户在参数中是否提供el选项，是的话调用vm.$mount方法，进入后面的生命周期阶段。

模板编译阶段

在created()到beforeMount() 之间，这个阶段主要是将模板el/template 编译为渲染函数

挂载阶段

从beforeMount()到 mounted() 之间，Vue.js会将实例挂载到DOM元素上（渲染）。
在挂载的过程中以及挂载好以后，Vue.js会开启watcher持续追踪依赖的变化。
当数据发生变化时，watcher会通知虚拟DOM重新渲染视图，并且在渲染视图前触发 beforeUpdate钩子函数，渲染完毕后触发updated钩子函数。

卸载阶段

应用调用vm.$destory方法后，进入卸载阶段。Vue.js会将自身从父组件中删除，取消实例上所有依赖的追踪，并且移除所有的事件监听器。

posted @ 2021-11-20 16:07 Olebaba 阅读(77) 评论(0) 收藏举报

刷新页面返回顶部

Olebaba