---组件 (Component) 是 Vue.js 最强大的功能之一
---组件可以扩展 HTML 元素，封装可重用的代
<!-- computed 计算属性 -->
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
计算属性是基于它们的响应式依赖进行缓存的,节省性能, 而方法不缓存, 每次都要计算
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
computed里面存放的值和data存放的值作用类似,reverseString名称可以直接渲染在页面,当计算属性的值变化页面也跟着变化
<div id="app">
<div>{{reverseString}}</div>
<!-- 调用methods中的方法的时候 他每次会重新调用 函数可以直接在页面调用-->
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript">
// 计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
var vm = new Vue({
el: '#app',
data: { num: 100 },
methods: {
reverseMessage: function () {
console.log('methods')
return this.msg.split('').reverse().join('');
}
}, //computed 属性 定义 和 data 已经 methods 平级
computed: {
reverseString: function () { // reverseString 这个是我们自己定义的名字
var total = 0;
// 当data 中的 num 的值改变的时候 reverseString 会自动发生计算
for (var i = 0; i <= this.num; i++) {
total += i;
}
return total; // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果
}
}
});
</script>
<!-- 2.侦听器 watch -->
一般用于异步或者开销较大的操作
watch 中的属性 一定是data 中 已经存在的数据 //动态的监听data数据变化
使用watch来响应数据的变化
deep深度侦听
<div id="app">
<div><span>名：</span> <span> <input type="text" v-model='firstName'> </span></div>
<div> <span>姓：</span><span><input type="text" v-model='lastName'></span></div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript"> // 侦听器
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jim Green', //当fullName改变的时候页面渲染也跟着变化
obj:{a:123} //侦听obj.a需要用到deep: true
},
watch: { //watch 属性 定义 和 data 已经 methods 平级
// 注意： 这里firstName 对应着data 中的 firstName 就是要侦听的值
firstName: function (val) { // 当 firstName 值 改变的时候 会自动触发 watch
this.fullName = val + ' ' + this.lastName;
}, // 注意： 这里 lastName 对应着data 中的 lastName
lastName: function (val) { //val 对应value值
this.fullName = this.firstName + ' ' + val;
},
obj:{
function(){
console.log(obj.a)
},
deep: true
}
}
});
</script>
<!-- 3.过滤器 filter-->
Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
全局注册filter 而局部过滤器是filters
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div> <!-- upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中 -->
<div>{{msg | upper | lower}}</div> //支持级联操作
<div :abc='msg | upper'>测试数据</div>
</div>
<script type="text/javascript">
Vue.filter('lower', function (val) { // lower 为全局过滤器
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: { msg: '' }, //filters 属性 定义 和 data 已经 methods 平级
filters: { // 定义filters 中的过滤器为局部过滤器
// upper 自定义的过滤器名字
// upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中
upper: function (val) { // 过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
<!-- 过滤器中传递参数 -->
{{ message | filterA('arg1', 'arg2') }}
<div id="box">
<!--filterA 被定义为接收三个参数的过滤器函数。 其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。-->
{{ message | filterA('arg1', 'arg2') }}
</div>
<script>
// 在过滤器中 第一个参数 对应的是 管道符前面的数据 n 此时对应 message
// 第2个参数 a 对应 实参 arg1 字符串
// 第3个参数 b 对应 实参 arg2 字符串
Vue.filter('filterA', function (n, a, b) {
if (n < 10) {
return n + a;
} else {
return n + b;
}
});
new Vue({
el: "#box",
data: { message: "哈哈哈" }
})
</script>
<!-- 4.组件 -->
Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象 //**全局组件**注册后，任何vue实例都可以用
//组件模板必须是单个根元素 //组件模板的内容可以是模板字符串
<div id="example">
<my-component></my-component> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 -->
</div>
<script> // 注册组件
Vue.component('my-component', { // 1、 my-component 就是组件中自定义的标签名
template: '<div>A custom component!</div>' //template模板
})
// 创建根实例
new Vue({
el: '#example'
})
</script>
局部注册components
<div id="app">
<my-component></my-component>
</div>
<script>
var Child = { // 定义组件的模板
template: '<div>A custom component!</div>'
}
new Vue({
//局部注册组件
components: {
// <my-component> 将只在父模板可用 一定要在实例上注册了才能在html文件中使用;
'my-component': Child
}
})
</script>
<!-- vue生命周期 -->
Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上
在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用
<div id="app">
<div>{{msg}}</div>
<button @click='update'>更新</button>
<button @click='destroy'>销毁</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
Vue实例的生命周期
*/
var vm = new Vue({
el: '#app',
data: {
msg: '生命周期'
},
methods: {
update: function () { //点击更新时触发页面局部重新渲染
this.msg = 'hello';
},
destroy: function () {
this.$destroy();
}
},
beforeCreate: function () {
console.log('beforeCreate');
},
created: function () {
console.log('created');
},
beforeMount: function () {
console.log('beforeMount');
},
mounted: function () {
console.log('mounted');
},
beforeUpdate: function () {
console.log('beforeUpdate');
},
updated: function () {
console.log('updated');
},
beforeDestroy: function () {
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
}
});
</script>