版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/muzidigbig/article/details/81202588
1.vue实例中的计算属性选项
计算属性关键词: computed。
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
<body>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
<body>
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p >Methods reversed message: "{{ reversedMessage2() }}"</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
//通过方法来惭怍属性
methods:{
reversedMessage2:function () {
return this.message.split('').reverse().join('')
}
}
})
</script>vue.js提供了一个方法$watch,用于观察Vue实例上的数据变动。更好的办法是使用计算属性而不是一个命令式的$watch回调。
说白了$watch这货就是观察一个值的变化，观察的这个值一变化的话，那么就执行function里面的语句。
watch是在vue实例对象中观测数据的变化；$watch是通过实例对象调用观测数据。
<div id="example">
firstName:<input type="text" name="li" v-model="firstName">
<br>
lastName:<input type="text" name="fei" v-model="lastName">
<p>fullName: {{fullName}}</p>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#example',
data: {
firstName:'Foo',
lastName:'Bar',
fullName:''
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
},
//通过方法来惭怍属性
methods:{
reversedMessage2:function () {
return this.message.split('').reverse().join('')
}
},
// watch: {
// firstName: function (val) {
// this.fullName = val + ' ' + this.lastName
// },
// lastName: function (val) {
// this.fullName = this.firstName + ' ' + val
// }
// }
});
vm.$watch('lastName',function (val) {
this.fullName = val+' '+this.lastName;
});
vm.$watch('firstName',function (val) {
this.fullName = this.firstName+' '+val;
})
</script>2.Vue.js 组件
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名（标签名），options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
<div id="example">
<!--使用我们自定义的组件-->
<goheader></goheader>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script>
// 注册一个全局组件
Vue.component('goheader',{
template:'<h2>自定义全局组件！</h2>'
});
var vm = new Vue({
el: '#example',
data: {
// 这里不能将全局组件中的数组定义在data中
// meg:"自定义全局组件！"
}
})
</script>局部组件
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
<div id="example">
<!--使用我们自定义的组件-->
<go-child></go-child>
</div>
</body>
<!--将vue引入到本地-->
<script src="js/vue.js"></script>
<script>
// 注册一个局部模板
var divChild = {
template:'<h2>自定义局部组件！</h2>'
};
var vm = new Vue({
el: '#example',
//注册组件的选型
components:{
//<go-child>只在父模板中使用
'goChild':divChild
}
})
</script>若有不足请多多指教！希望给您带来帮助！