Vue2.5开发去哪儿网App 第四章笔记 上
一 . 组件细节知识点
1. 解决组件在h5中编码规范
例如 ： table , ul , ol 等等
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
使用 is 属性解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用细节点</title>
<script src="../../vue.js"></script> </head>
<body>
<div id="app">
<!--1.vue提供的is属性-->
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
var vm = new Vue({
el:"#app"
})
</script>
</body>
</html>
2. 非根组件定义data
在子组件里面定义data时，data必须是一个函数，不能是一个对象。这是为了保证每个子组件都有独立的data数据
写法：
data:function(){
return {
content:'this is a content'
}
}3.代码里面操作dom
HandleClick:function () {
//可根据ref 获取dom节点
var hello = this.$refs.hello.innerHTML;
alert('获取到的值是:'+hello)
}4. counter 求和 了解ref的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用细节点</title>
<script src="../../vue.js"></script> </head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
<div @click="HandleClick" ref="hello">获取hello</div> <!--#计数器-->
<counter @change="GetTotal" ref="one"></counter>
<counter @change="GetTotal" ref="two"></counter>
<!--#连个counter求和-->
<!--发布订阅模式--> <div>总数是：{{total}}</div>
</div>
<script>
Vue.component('row',{
data:function(){
return {
content:'this is a content'
}
},
template:'<tr><td>{{content}}</td></tr>'
}); // #计数器
var counter = Vue.extend({
template:'<div><button @click="CounterClick">click me</button>{{number}}</div>',
data:function () {
return {
number:0
}
},
methods:{
CounterClick:function () {
this.number++;
//向父组件传值
this.$emit('change')
}, }
})
Vue.component('counter',counter); var vm = new Vue({
el:"#app",
data:{
total:0
},
methods:{
HandleClick:function () {
//可根据ref 获取dom节点
var hello = this.$refs.hello.innerHTML;
alert('获取到的值是:'+hello)
},
GetTotal:function () {
var refs = this.$refs;
this.total = refs.one.number + refs.two.number
}
}
})
</script>
</body>
</html>
二 . 父子组件传值
父组件向子组件传值都是通过属性的形式传递的：
<div id="app">
<counter :count="9"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props:['count'],
template:'<div>{{count}}</div>'
} var vm = new Vue({
el:"#app",
components:{
counter:counter
}
})
counter 求和：
vue 会对子组件 直接对父组件传递值得操作 给予警告
子组件不能修改父组件的值，只能使用，单向数据流的作用
修改方法： 对父组件的值克隆一个副本：对子组件自己值进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子间更多传值方式</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="2" @change="GetToal"></counter>
<counter :count="3" @change="GetToal"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props:['count'],
template:'<div @click="HandleClick">{{number}}</div>',
data:function(){
return {
number:this.count
}
},
methods:{
HandleClick:function () {
this.number = this.number + 1;
this.$emit('change',1)
}
}
} var vm = new Vue({
el:"#app",
data:{
total:5
},
components:{
counter:counter
},
methods:{
GetToal:function (number) {
this.total += number
}
}
})
</script>
</body>
</html>
三 . 组件参数校验与非props特性
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
非props特性: 1.当子组件 未接收并且使用 2.会显示在子组件的html属性上
props特性:不会显示在子组件的html属性上 props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script src="../../vue.js"></script>
</head>
<body> <!--props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。-->
<!--非props特性: 1.当子组件 未接收并且使用 2.会显示在子组件的html属性上-->
<!--props特性:不会显示在子组件的html属性上--> <div id="app">
<child :content="{id:123,name:'Dell'}" newd="newd"></child>
</div>
<script>
Vue.component('child',{
// props:{
// content:{
// type:[Number,String,Object],
// default:{id:1,name:'dong'},
// required: true,
// // validator: function (value) {
// // console.log(value)
// // if(value.name!=='dong'){
// // alert('姓名错误')
// // }
// // }
// }
// },
template:"<div>{{ content }}{{newd}}</div>"
})
var vm = new Vue({
el:"#app"
})
</script>
</body>
</html>
四 . 给组件绑定原生事件
原始步骤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<!--此处 @click="HancleClick" 监听自定义的事件-->
<child @click="HancleClick"></child>
</div>
<script>
Vue.component('child',{
//此处 @click="HancleClick" 监听原生的事件
template:'<div @click="HancleClick">Child</div>',
methods:{
HancleClick:function () {
// alert('Child click')
this.$emit('click')
}
}
})
var vm = new Vue({
el:"#app",
methods:{
HancleClick:function () {
alert('Father click')
}
}
})
</script>
</body>
</html>
添加 native 修饰符 .native - 监听组件根元素的原生事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给组件绑定原生事件</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<child @click.native="HancleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>',
})
var vm = new Vue({
el:"#app",
methods:{
HancleClick:function () {
alert('Father click')
}
}
})
</script>
</body>
</html>
Vue2.5开发去哪儿网App 第四章笔记 上的更多相关文章
- Vue2.5开发去哪儿网App 第五章笔记 上
1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...
- Vue2.5开发去哪儿网App 第四章笔记 下
1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...
- Vue2.5开发去哪儿网App 第三章笔记 上
1. vue 生命周期函数 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 ...
- Vue2.5开发去哪儿网App 第五章笔记 下
1. 多个元素或组件的过渡 多个元素的过渡: <style> .v-enter,.v-leace-to{ opacity: 0; } .v-enter-active,.v-leave-ac ...
- Vue2.5开发去哪儿网App 第三章笔记 下
1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法 ...
- Vue2.5 开发去哪儿网App
Vue2.5开发去哪儿网App 技术栈和主要框架
- Vue2.5开发去哪儿网App 首页开发
主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --s ...
- Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用
一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下 新建state文件夹,新建index.js文件 3. 创建一个 store import Vue f ...
- Vue2.5开发去哪儿网App 从零基础入门到实战项目
第1章 课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介 试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基 ...
随机推荐
- ES6通过使用babel兼容到ie9
1.打开这个地址: https://unpkg.com/babel-standalone@6/babel.min.js 新建babel.min.js,把代码复制进去,然后在jq项目里引用. 2.在下面 ...
- Cannot read property 'protocol' of undefined的原因和解决办法
Cannot read property 'protocol' of undefined 原因:axios请求中的错误 1.请求地址写错了 2.没有引入http.js 3.引入http.js的时候,单 ...
- Codeforces Round #510 (Div. 2) D. Petya and Array(离散化+反向树状数组）
http://codeforces.com/contest/1042/problem/D 题意 给一个数组n个元素,求有多少个连续的子序列的和<t (1<=n<=200000,abs ...
- 解决maltab的中文和英文字体问题，中文乱码
用比较好看的编程字体,偏偏不显示中文,用支持中文的字体,英文不是等宽的,非常难看. 最近在网上找这方面的解决方法,发现解决问题的方法还是有的. 其实这个问题的原因就是系统自带的等宽字体,不支持中文,解 ...
- Ubuntu 16.04 安装 postgresql 9.3
1.Ctrl+Alt+t 打开终端 2.输入:wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo a ...
- UVa 10870 Recurrences (矩阵快速幂)
题意:给定 d , n , m (1<=d<=15,1<=n<=2^31-1,1<=m<=46340).a1 , a2 ..... ad.f(1), f(2) .. ...
- DOS的几个常用命令
1.rem:注释 DOS中的注释,其后面的内容会被自动忽略.双冒号(::)也有相同的效果 相当于R语言和Python中的# 2.set:设置变量 set var = 1 将1赋值给变量var 打印出来 ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记四之铭文升级版
铭文一级: 需求二:Agent选型:exec source + memory channel + logger sink# Name the components on this agenta1.so ...
- WEB上传大文件解决方案
众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路.下面贴出简易 ...
- 【设计模式】Javascript设计模式——状态模式（行为型）
注:这个模式是非常聪明的,很有点数学中组合的意思,现在,来看下这个模式是怎么个思想. 问题提出:假如某个操作有三种可能,分别为1,2,3,还可能是组合,比如先执行1,再执行2或者先执行2再执行3或者1 ...