이 글의 내용은 Vue 인스턴스 생성, Vue 데이터 응답, Vue 인스턴스 속성 및 라이프사이클 기능을 포함하여 Vue 인스턴스 분석을 여러분과 공유하는 것입니다.
vueInstance
목표#🎜 🎜 #：
1,생성 방법 배우기 vueInstance
2 # 🎜🎜#, 마스터vuedata는 이 에 응답하는 방식입니다. 3, vue#🎜🎜의 속성을 이해하세요 # 인스턴스 및 메소드
4. vue 인스턴스의
lifecycle에서 다양한 Hook의 사용법을 이해하고 라이프사이클을 염두에 두세요. 다이어그램 # 🎜🎜#전제조건:
소개됨vue.js#🎜🎜 ##🎜 🎜#VueInstance
1.1 인스턴스 만들기#🎜🎜 #Html:<p id=”app”>{{msg}}</p>Script:
var vm = new Vue({
el: ‘#app’, // 绑定元素
data: {
//数据
msg: ‘Hello’
},
components: {
//组件声明
}
// ...还有其他例如计算属性,侦听器,周期钩子等
})
Vue입니다. 데이터 응답
MVVM: 모델(modellayer#🎜🎜 #,#🎜 🎜#즉, data
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 以及更低版本浏览器。 Vue实例的属性(option) 3.1 Data 主要存放数据的地方, 一般也就是会在这里定义数据(这里面的数据都是响应的),很少会在vue实例外面定义(全局)数据. 示例: 使用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 生命周期钩子函数 Vue实例的生命周期: vue实例整个生命周期包括了实例的,初始化,编译,变化,销毁等 在每个生命周期都会有相应的钩子函数,当生命周期到达的时候就会执行. 生命周期图示: (图侵删) 相关推荐：...
data: {
msg: ‘hello’,
msgList: [‘h’,’e’,’l’,’l’,’o’]
}
...
...// 生命周期钩子函数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 인스턴스 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
