正文
vue(三)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、vue的特点
1、响应式的数据绑定（一旦修改了数据，立马更新视图）
- 数据驱动思想 （数据到视图的映射、操作数据改变视图、简化对DOM的操作）
- 追踪依赖变化 （ Object.defineProperty 、watcher 实例对象）
把一个普通 JavaScript 对象传给 Vue 实例的
data
选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的
setter
被调用时，会通知
watcher
重新计算，从而致使它关联的组件得以更新。
2、可组合的视图组件
把视图按照功能，切分若干基本单元；组件可以一级一级组合成整个应用，形成了倒置的组件树。
使用组件的好处：可维护、可重用、可测试。
注意：一个组件中只能有一个顶层标签；
实例中的data是对象，组件中的data是函数。因为组件中的data如果以对象的形式存在，会被其它组件共用。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[v-cloak] {
display: none;
}
/*v-clock 隐藏未编译的mustach*/
</style>
<script src="./js/vue.js"></script>
</head> <body>
<!-- 模板 view-->
<div id="app" v-cloak>
<custom-com></custom-com>
<custom-com2></custom-com2>
<custom-coms></custom-coms>
</div>
<script>
//定义组件
Vue.component('custom-com',{
data(){
return {
test:"hello"
}
},
template:`
<div>我是组件{{test}}</div>
`
}) Vue.component('custom-com2',{
data(){
return {
test:"hello"
}
},
template:`
<div>
<div>我是组件-custom-com2{{test}}</div>
<input type="button" value="改变数据"
@click="test=123"
/>
</div>
`
})
// 数据 model
var data = {
message: 'hello,miaov.com'
};
// vm view-model
var vm = new Vue({
el: "#app",
data: data,
components:{
'custom-coms': {
template:`
<div>我是局部组件</div>
`
}
}
}); </script>
</body>
</html>
二、vue实例
每个vue.js应用都是通过构造函数vue创建一个vue的根实例启动的：
new Vue({
//选项
})
选项参数：el data methods computed watch template
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545}
span.s1 {font: 12.0px 'PingFang SC'}
methods 处理纯粹的逻辑 而不是处理dom操作细节 例如 keyup 等; model 用的oninput 进行监听的 而angular 用的脏值检查。
三、vue实例生命周期
vue实例从创建到销毁的过程，就是生命周期。
钩子函数：
beforeCreate：数据绑定前； created：数据绑定后；beforeMount：挂载之前；mounted：挂载之后；
beforeUpdate：更新之前； updated：更新之后； beforeDestroy：销毁前；destroyed: 销毁后;
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
<script src="./js/vue.js"></script>
</head> <body>
<!-- 模板 view-->
<div id="loading">loading....</div>
<div id="app" v-cloak>
{{message}}
<div>1111</div>
</div>
<script>
// 数据 model
var data = {
message: ''
};
// vm view-model
var vm = new Vue({
data: data,
beforeCreate(){
console.log("数据绑定前");
console.log(this.message );
console.log("-------------------");
},
created(){
console.log("数据绑定后");
console.log( this.message );
console.log( this.$el );
console.log("-------------------");
},
beforeMount(){
console.log("挂载之前");
console.log( this.$el );
console.log("-------------------");
},
mounted(){
console.log("挂载之后");
console.log( this.$el );
console.log("-------------------"); loading.style.display = 'none'; //获取数据 发送ajax请求
setTimeout( () => {
var obj = {message:"我是从服务端来得"}
this.message = obj.message;
},2000)
},
beforeUpdate(){
console.log("更新之前");
console.log( this.message );
console.log("-------------------");
},
updated (){
console.log("更新之后");
console.log( this.message );
console.log("-------------------");
},
beforeDestroy(){
console.log("销毁前");
console.log("-------------------");
},
destroyed(){
console.log("销毁后");
}
}); vm.$mount("#app"); /*setTimeout(function (){
vm.message = 'hello';
vm.$mount("#app");
},2000)*/ </script>
</body>
</html>
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'; color: #454545}
span.s1 {font: 12.0px Helvetica}
钩子函数（可理解为回调函数）其中的this 指向当前的实例对象;
$mount 推迟到未来的某个点挂载你的应用
mount的作用： 1推迟挂载点 2发送ajax请求
四、组件中的通信
1、使用prop传递数据
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
子组件要显式地用
props
选项声明它期待获得的数据。
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
然后我们可以这样向它传入一个普通字符串：
<child message="hello!"></child>
在模板中，要动态地绑定父组件的数据到子模板的props，与绑定到任何普通的HTML特性相类似，就是用
v-bind
。每当父组件的数据变化时，该变化也会传导给子组件：
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
<child :my-message="parentMsg"></child>
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。
2、组件间通信
- 父组件-->子组件 使用prop传递
- 子组件-->父组件 自定义事件
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
<script src="./js/vue.js"></script>
</head> <body>
<!-- 模板 view-->
<div id="app" v-cloak>
<custom-com :test="abc" @abc-change="abcHandle"></custom-com>
<custom-com test="miaov"></custom-com>
</div>
<script>
//定义组件
Vue.component('custom-com',{
props:["test"],
data(){
return {
value: this.test
}
},
template:`
<div>
<p>test:{{test}}</p>
<p>value:{{value}}</p>
<input type="button" @click="value=123" />
<input type="button" value="通知父组件" @click="changeAbc" />
</div>
`,
methods:{
changeAbc(){
// this.test = 10;
this.$emit("abc-change",10)
}
}
}) // 数据 model
var data = {
message: 'hello,miaov.com',
abc:"hello"
};
// vm view-model
var vm = new Vue({
el: "#app",
data: data,
methods:{
abcHandle(newValue){
console.log("子组件改数据了");
console.log(newValue);
this.abc = newValue
}
}
});
</script>
</body>
</html>
p.p1 {margin: 0.0px 0.0px 4.8px 0.0px; font: 20.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
span.s1 {font-kerning: none; font-variant-ligatures: no-common-ligatures}
li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
span.s1 {font: 12.0px Helvetica; color: #000000; -webkit-text-stroke: 0px #000000}
span.s2 {font-kerning: none; font-variant-ligatures: no-common-ligatures}
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
span.s1 {font-kerning: none; font-variant-ligatures: no-common-ligatures}
li.li1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
span.s1 {font: 12.0px Helvetica; color: #000000; -webkit-text-stroke: 0px #000000}
span.s2 {font-kerning: none; font-variant-ligatures: no-common-ligatures}
p.p1 {margin: 0.0px 0.0px 4.8px 0.0px; font: 20.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
p.p2 {margin: 0.0px 0.0px 6.7px 0.0px; font: 20.0px Helvetica; color: #3f3f3f; -webkit-text-stroke: #3f3f3f}
span.s1 {font-kerning: none; font-variant-ligatures: no-common-ligatures}
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545}
span.s1 {font: 12.0px 'PingFang SC'}
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545}
span.s1 {font: 12.0px 'PingFang SC'}
