Vue 인스턴스 분석

이 글의 내용은 Vue 인스턴스 생성, Vue 데이터 응답, Vue 인스턴스 속성 및 라이프사이클 기능을 포함하여 Vue 인스턴스 분석을 여러분과 공유하는 것입니다.

vueInstance

목표#🎜 🎜 #：

1,

생성 방법 배우기 vueInstance

2 # 🎜🎜#, 마스터

vuedata는 이 에 응답하는 방식입니다. 3, vue#🎜🎜의 속성을 이해하세요 # 인스턴스 및 메소드

4. vue 인스턴스의

lifecycle

에서 다양한 Hook의 사용법을 이해하고 라이프사이클을 염두에 두세요. 다이어그램 # 🎜🎜#전제조건:

소개됨

vue.js#🎜🎜 ##🎜 🎜#VueInstance

1. 1.1 인스턴스 만들기#🎜🎜 #

   Html:<p id=”app”>{{msg}}</p>Script:
   
   var vm = new Vue({
   
   el: ‘#app’,      // 绑定元素
   
   data: {
   
       //数据
   
   msg: ‘Hello’
   
   },
   
   components: {
   
       //组件声明
   
   }
   
   // ...还有其他例如计算属性,侦听器,周期钩子等
   
   })

   #🎜 🎜#1.2 구성 요소는 vue
   인스턴스

Vue입니다. 데이터 응답

1. MVVM: 모델(modellayer#🎜🎜 #,#🎜 🎜#즉, data

), view(

View 레이어), ViewModel(#🎜 🎜##🎜🎜 #ViewModelLayer)여기는 VM#🎜 🎜 #layer# 🎜🎜#,은 MVC 패턴을 대체합니다.

C# 🎜🎜# layer,은 상호 응답을 가리키는 뷰와 데이터 사이의 브리지를 구현합니다, vue 가장 중요한 것은 vm 레이어. Vue# 🎜🎜#의 데이터와 뷰는 서로 반응합니다. , 즉, data#🎜 🎜# 변경 ,페이지 보기(view)

해당 값도 변경# 🎜🎜#(Update view), 이 값이 배열 또는 객체를 결정하는 경우,# 🎜🎜##🎜 🎜# 또는 스타일 렌더링 , 도 결국 보기 응답 #🎜🎜을 변경합니다. # 마찬가지로 해당 (bound to the view's )data#이 변경되었습니다. 따라서 🎜🎜#,data도 변경 사항에 응답합니다 (update data).# ㅋㅋㅋ data# 🎜🎜#은 또한 각 속성에 setter 및 setter)#이 있음을 확인합니다. 🎜🎜#

Object.defineProperty 是 ES5 中一个无法 shim (模拟)的特性，所以Vue 不支持 IE8 以及更低版本浏览器。

1. Vue实例的属性(option)

3.1 Data

主要存放数据的地方, 一般也就是会在这里定义数据(这里面的数据都是响应的),很少会在vue实例外面定义(全局)数据.

示例:

...

data: {

msg: ‘hello’,

msgList: [‘h’,’e’,’l’,’l’,’o’]

}

...

使用data:

(在实例内) 直接使用this.dataname 或 this.$data.dataname

实例外: 实例对象名代替this

在模版中使用就用模板语法

3.2 method(方法)

Vue中所有的(普通)方法都放在这里

3.3 其他常用属性

components: { } //组件

computed: { xx: function( ...; return ..;)} //计算属性, 每个计算属性都是一个funciton, 这些function是有返回的.

watch: { dataname: function(){...} } //侦听器, 当watch指定的data发生变化,响应会触发执行相应的function

1. 生命周期钩子函数

Vue实例的生命周期: vue实例整个生命周期包括了实例的,初始化,编译,变化,销毁等

在每个生命周期都会有相应的钩子函数,当生命周期到达的时候就会执行.

生命周期图示:

(图侵删)

...// 生命周期钩子函数beforeCreate() {

console.log('组件准备创建')

},

created() {

console.log('组件已经创建')

},

beforeMount() {

console.log('组件准备安装')

},

mounted() {

console.log('组件已经安装')

},

beforeUpdate() {

console.log('组件准备更新')

},

updated() {

console.log('组件已经更新')

},

beforeDestroy() {

console.log('组件准备销毁')

},

destroyed() {

console.log('组件已经销毁')

}

...

 相关推荐：

 简单理解vue中实例属性vm.$els

vue生命周期、vue实例、模板语法

위 내용은 Vue 인스턴스 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!