vue实例对象中的属性、⽅法
el
1. 是根实例的特有属性，代表根元素
2. 提供⼀个页⾯上的DOM对象作为Vue实例的挂载⽬标.可以是选择器或者或DOM元素实例
data
1. data对象中的属性是响应式的，直接向vm实例设置属性不是响应式的
2. data的响应性可以被Object.freeze()打断
3. data属性的使⽤：
Vue实例的函数中：使⽤this.prop调⽤(methods,computed的this⾃动绑定为vue实例)
标签内：通过表达式{{porp}}访问
标签上：通过绑定调⽤:[prop]=“prop”
methods
1. ⼀般⽤于设置事件回调函数
2. 在表达式中可以通过调⽤⽅法，可以达到和调⽤computed中属性⼀样的显⽰效果
3. 与computed不同的是,methods不存在缓存，每次调⽤都编译执⾏函数代码
computed
1. 计算属性在引⽤时⼀定不要加()去调⽤，直接把它当作普通属性去使⽤就⾏
2. 当data中的数据发⽣变化时，就会重新进⾏计算，计算的结果将保存到⼀个新的属性中
3. 计算属性的结果会被缓存，⽅便下⼀次直接使⽤；只有计算属性⽅法中的数据没有发⽣变化，就不会重新计算
4. 计算属性⽅法中必须有⼀个return值
<div id="app">
firstname：<input type="text" v-model="firstname"/>
lastname：<input type="text" v-model="lastname"/>
fullname：<input type="text" v-model="FullName"/>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
firstname:'',
lastname:''
},
computed:{
FullName(){//FullName就是新⽣成的属性
return this.firstname +'-'+this.lastname
}
}
})
</script>
template
1. ⼀个字符串模板，可以是选择器或包含html内容的字符串
watch
1. 主要⽤于监听vue实例已有属性的变化，对于不存在的属性⽆法起到监听作⽤
2. watch可以在参数列表拿到变化的前⼀个对象和变化之后的新对象
3. watch可以检测对象深层次属性的变化以及设置回调函数是否⽴即触发
<div id="app">
firstname：<input type="text" v-model="firstname"/>
lastname：<input type="text" v-model="lastname"/>
fullname：<input type="text" v-model="FullName"/>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
firstname:'',
lastname:'',
FullName:''
},
watch:{
firstname(newVal, oldVal){
this.FullName = newVal +'-'+this.lastname
},
lastname(newVal, oldVal){
this.FullName =this.firstname +'-'+ newVal
}
}
})
</script>
vue实例的属性对象
Vue实例对外提供了⼀些有⽤的实例属性与⽅法,⽤前缀$+属性名/⽅法名表⽰，以便于和⽤户定义属性区分开属性:
vm.$el：根实例的挂载DOM结点
vm.$parent：当前实例的⽗实例
vm.$children：当前实例的⼦实例
vm.$root：组件树的根实例，如果没有⽗实例,vm.$root指向⾃⼰
vm.$refs：注册过 ref 特性的所有 DOM 元素和组件实例
vm.$data：指向实例的data属性
vm.$props：指向当前组件的props对象属性
vm.$watch：指向实例的watch⽅法
vm.$set：这个⽅法给实例设置的属性是响应式的.直接设置vm.prop不是响应式的
el表达式和jquery的区别vm.$mount：这个⽅法等同于el属性，都是给vue实例挂载DOM结点，底层实现⼀样
vm.$nextTick:DOM完成更新后，⾃动执⾏，调⽤nextTick中的回调函数
实例：获取DOM元素
<div id="app">
<h1 @click="showMessage" ref="h1">哈哈哈</h1>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
methods:{
showMessage(){
console.log(this.$refs.h1.innerHTML)
}
}
})
</script>
beforeCreate
触发：在实例创建之前执⾏
作⽤：这个阶段主要做的事情是初始化事件和⽣命周期
范围：不能拿到data数据，不能拿到dom节点
created
触发：在实例创建完执⾏，常⽤于操作vue
作⽤: 主要做的事情就是数据观测，可以通过this拿到data数据，此处最早可发Ajax请求，通过修改属性做渲染
范围：可以获取data数据，⽆法获取挂载的dom节点，在此处修改数据不会触发beforeUpdate和updated钩⼦函数
beforeMount
触发：数据渲染之前触发，此时dom节点已经挂载，但是数据尚未渲染到html模板
作⽤：结束模板编译，准备数据渲染
范围：此时编译模板已经结束，可以拿到dom节点，可以修改data属性，但数据还没最终渲染到页⾯，不能拿到html最终渲染的结果
mounted
触发：dom节点挂载，且数据已经渲染到html模板上去，就是针对需要操作dom的⽅法，⽐如加载jQuery插件时，在这⾥⾯加载对应的函数
作⽤：将数据渲染到DOM节点
范围：可以访问和修改data属性，数据已经渲染到DOM节点，可以操作渲染后的DOM，可以触发beforeUpdate、updated钩⼦函数
new Vue({
el:'#app',
data:{
name:'onion'
},
created(){
console.log(this.name)
}
})
components
意思为引⼊组件，组件可以写在别的⽂件中，也可以写在本⽂件中，需要赋值给变量

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。