Vue基础——Vue实例、计算属性和侦听器

Vue实例

vue的每一个组件都是一个实例,该实例对应很多属性和方法。
所接受的数据类型:number/string/boolean/array/json/undefined/null

	<div id="root">
		<div @click="fn">
			{{message}}
		</div>
	</div>
 
	<script>
		var vm = new Vue({
			el: '#root',
			data: {
			    message: 'hello world'
			},
			methods: {
                fn: function () {
					alert("hello")
                }
			}
		})
	</script>

数据绑定

插值表达式

{{数据名}} mustache语法 声明式渲染

指令

v-text=“数据名”`

v-html="数据" 非转义输出

属性
v-bind:html属性="数据" 属性值动态化
:html属性="数据" 简写
v-bind:[属性名]="数据" 属性名动态化

Vue实例的生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会

生命周期
生命周期钩子的 this 上下文指向调用它的 Vue 实例。

查看官网介绍

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

计算属性

官网教程
是一个函数,所依赖的元数据变化时,会再次执行,平时会缓存,是响应式的,需要在模板中渲染才可调用

语法

//定义
computed:{
  计算属性: function(){return 返回值}		
}
//使用
使用:	{{计算属性}} |  v-指令="计算属性"

computed    VS    method

method computed
方法会每次调用 基于它们的响应式依赖进行缓存的
一般 性能高
{{methodname()}} {{computedname}}
适合强制执行和渲染 适合做筛选

属性检测

官网教程
需要在数据变化时执行异步或开销较大的操作时,而计算属性是同步的,这个时候需要属性检测watch

定义一个选项

watch:{
  数据名:'method函数名'    //数据名==data的key
  数据名:函数体(new,old){}
  数据名:{
    handler:fn(new,old){},
    deep: true //深度检测
    immediate: true //首次运行
  }
}

计算属性 VS 函数 VS 属性检测

计算属性 函数 属性检测
依赖模板调用 - ×
是否缓存 ×
异步 ×

模板表达式

在dom里面插入数据,数据周围可以出现表达式,但不是语句,如{{数据+表达式}} v-指令="数据+表达式"

表达式:

1. title + 'abc'
2. `${title}123` 
3. bl ? 'true' : 'false'
4. 'i love you'.split(' ').reverse().join(' ')
发布了3 篇原创文章 · 获赞 5 · 访问量 209

猜你喜欢

转载自blog.csdn.net/qq_44905636/article/details/105122032