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
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>
钩子函数（可理解为回调函数）其中的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>
vue(三)的更多相关文章
- MVVM 和 VUE三要素：响应式、模板引擎、渲染
MVVM 和 VUE三要素:响应式.模板引擎.渲染:https://blog.csdn.net/weixin_37644989/article/details/94409430
- 一步一步学Vue(三)
接上篇,有同事看了我写的博客,觉得我这人不靠谱,文笔太白了,不够严肃,所以这次我一定要做一个严肃的人,写博客要有写博客的态度,第三篇开始我在考虑一个问题,会不会太着急了,要知道Vue的组件化时它的一个 ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- Vue(三) v-bind 及 class 与 style 绑定
DOM 元素经常会动态绑定一些 class 类名 或 style 样式,现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法. 了解 v-bind 指令 在之前已经介绍了指令 ...
- vue三要素及底层实现机制
深入解析Vue 我们首先来熟悉一下我们这个文档所学习内容的流程. 先对比一下jQuery和Vue的区别,再讲述Vue的MVVM模型,接着讲解Vue的实现流程. 当然,我是不相信没有对比哪来的伤害,没有 ...
- Vue三步完成跨域请求
三步完成跨域请求 ①main.js中: Vue.prototype.HOME = '/api'; ② config/index.js中: module.exports = { dev: { // Pa ...
- VUE三 vue-router（路由）详解
前端路由 根据不同的 url 地址展示不同的内容或页面,无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点 使用浏览器的前进,后退键的时 ...
- 从零开始学习Vue(三)
我们从一个例子来学习组件,vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar 这个例子用到其他组件,对于初学者来说,一下子要了解那么多组件的使用,会变得一头雾水.所以我把这个例子改写了 ...
随机推荐
- request中的那些方法到底是干什么的？
最近做Java Web项目,在.jsp页面和servlet之间request和response还是有些混淆,查阅了一些资料,总结如下,方便以后使用: 首先,servlet接口是最基本的,提供的五个方法 ...
- 阿里云Linux服务器，挂载硬盘并将系统盘数据迁移到数据盘
因为之前用宝塔上线,宝塔只挂载了系统盘50G,打开阿里云云盘列表发现系统盘无法直接升级,故另买一块数据盘挂载到Linux服务器下,下面根据网上教程再结合我实际情况讲解一下实际操作,其实非常easy l ...
- 深入理解yii2之RBAC(模块化系统)
一.前言 上一篇文章我们已经大致谈过RBAC到底是什么和yii2底层RBAC接口的分析. 下面我深入理解一下RBAC权限分配,深入理解下yii2底层RBAC扩展,以及它是如何针对模块化系统的开发的? ...
- Django+vue在腾讯云上搭建前后端分离项目
最近打算用Django+vue搭建一个个人主站,在此记录一下搭建项目的整个过程. 一 开发环境: 腾讯云Centos 7 Python 3.7 Django ...
- Skyscrapers Covered in Solar Pancels【太阳能电池板覆盖的摩天大楼】
Skyscrapers Covered in Solar Panels An office tower on Miller Stree in Manchester is completely cove ...
- B1086 就不告诉你 （15分）
B1086 就不告诉你 (15分) 做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地围笑着告诉他:"五十三."本题就要求你,对任何一对给定 ...
- POJ：2395-Out of Hay
Out of Hay Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 18780 Accepted: 7414 Descripti ...
- 基于HDP版本的YDB安装部署（转）
第三章 YDB依赖环境准备 一.硬件环境 硬件如何搭配,能做到比较高的性价比,不存在短板.合理的硬件搭配,对系统的稳定性也很关键. 1.CPU不是核数越高越好,性价比才是关键. 经常遇到很多的企业级客 ...
- SharpCompress的压缩文件解压和文件夹压缩
1.前言 最近做一个功能需要用到对压缩文件的解压,就找到了这个SharpCompress不错,还能解压rar的文件.但是网上的资料和我拿到的SharpCompress.dll的方法有些出入,所以我就自 ...
- css媒体类型
all 用于所有的媒体设备. aural 用于语音和音频合成器. braille 用于盲人用点字法触觉回馈设备. embossed 用于分页的盲人用点字法打印机. handheld 用于小的手持的设备 ...