day01
vue介绍
1.官网 :https://cn.vuejs.org/
2.api
1.vue特点:
易用,灵活,高效
2.渐进式
根据需求的不同加载不同模块
库和框架的区别:
库:jq …js 功能单一
框架:vue react angular
3.vue核心:
数据驱动
组件化
4.vue安装
a.cdn方式 需要引入的开发版本
b.npm install vue
c.直接下载vue.js
一:指令
v-text/v-html v-if,v-show v-if:直接移除元素 v-show:通过display:none老设置元素 应用场景:如果频繁切换元素需要用v-show
v-if/v-show v-else-if v-else 注意:v-if v-else 中间不允许有内容
v-bind 绑定属性
<!-- v-bind简写: -->
<div :abc='abc'>我是div</div>
v-on 绑定方法
<!-- v-on:的简写方式:@ -->
<button @click='fn'>点击弹出内容</button>
v-model:
数据的双向绑定 只能应用于表单元素
<div >{{content}}</div>
<input type="text" v-model='content'>
二、绑定样式
:class 方式绑定:
<div class="box div3">我是div</div>
<!-- 通过绑定属性的方式 -->
<div :class='box'>我是div2</div>
<!-- 通过三元方式添加样式 -->
<div :class='[1==2?box:div3]'>我是div3</div>
<!-- 复合样式-->
<div :class='box+" div3"'>我是div4</div>
:style 方式绑定:
<div style='width: 100px;height: 100px;background-color: red;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>
知识点: :key的作用; 绑定一个唯一值,避免勾选不正确的问题 与v-for的固定搭配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for='(item,index) in list' :key='item.id'>
<input type="checkbox">
{{index+1}}---- {{item.name}}---{{item.age}}
</div>
<div>
姓名: <input type="text" v-model='user.name'>
</div>
<div>
年龄: <input type="text" v-model='user.age'>
</div>
<div>
<button @click = 'add'>添加</button>
<button @click = 'reset'>重置</button>
</div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{
name:'张三',
age:20
},
list:[
{id:1,name:'李四',age:15},
{id:2,name:'王五',age:25},
{id:3,name:'赵六',age:35},
]
},
methods: {
// 重置数据 this 指的就是vue的实例
reset(){
this.user={
name:'',
age:''
}
},
// 增加
add(){
// this.list.push({id:4,name:'王麻子',age:18})
let obj = {id:4,name:'王麻子',age:18}
this.list.splice(2,0,obj)
}
},
})
</script>
</html>
day02
vue-day02
1.表单
姓名 name eg:"张三"
性别 sex eg:"0" 说明:男-0 女-1
电话 tel eg:"15747474747"
密码 pass eg:"123"
爱好 hobby eg:["codding","playing"] 说明:唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding
专业 job eg:"web" 说明:java工程师-java web工程师-web php工程师-php
证书 cert eg:["erji","siji"] eg:计算机二级-erji 英语四级-siji 英语6级-liuji
备注 des eg:"他是一个党员"
是否同意 isAgree eg:true 同意-true 不同意-false
单选框:
<!-- 单选框的使用 绑定的属性一定要与value的值保持一致,提交还是会提交value的值-->
<div>
性别: <input type="radio" name="sex" value="0" v-model='sex'>男
<input type="radio" name="sex" value="1" v-model='sex'>女
</div>
多选框:
<!-- 多选框 1.如果初始值为数组:会把value的值赋值给数组 2.如果初始值是对象,则会把数据类型转为布尔值,那么最终的结果就会以true/false展示-->
<div>
<input type="checkbox" checked value="sing" v-model='hobby'>唱歌
<input type="checkbox" value="dance" v-model='hobby'>跳舞
<input type="checkbox" value="coding" v-model='hobby'>敲代码
{{hobby}}
</div>
<!-- 初始值为对象 -->
<div>
<input type="checkbox" checked value="sing" v-model='hobby2'>唱歌2
<input type="checkbox" value="dance" v-model='hobby2'>跳舞2
<input type="checkbox" value="coding" v-model='hobby2'>敲代码2
{{hobby2}}
</div>
下拉框:
<!-- 下拉框 把初始值需要绑定到select上,还是根据value的值对select进行赋值-->
<div>
<select v-model='edu'>
<option value="小学">小学</option>
<option value="中学">中学</option>
<option value="大学">大学</option>
</select>
</div>
文本域
文本域:
<div>
<textarea cols="30" rows="10" v-model='text'></textarea>
</div>
PS:VUE单页应用
SPA:signal page application(单页应用)
多页面:1个url->1个html文件 多个url->多个url
单页面:1个url->多个组件 他们之间的切换是通过路由
2.修饰符
事件修饰符
stop :阻止事件冒泡
prevent:阻止默认行为
capture:事件捕获 给谁添加谁先出来
once:只执行一次
self:只有自己才可以触发自己
鼠标修饰符
left:左键触发
right:右键触发
middle:中间滚轮
注意:对于修饰符自多只能写两个
键盘修饰符
up,down,left,right,enter
表单修饰符
lazy:失去焦点后获取最新数据
number:只判断第一个值是否是number类型 是number返回number 不是返回string
trim:去除用户输入内容的首位空格
3.vue生命周期
钩子函数:8个
beforeCreate : el data name 都是undefined
created:el :undefined data:可以拿到数据
beforeMount:el:有节点了,data:有数据 此时el中的数据没有渲染
mounted:页面渲染完成
beforeUpdate:更新数据
updated:更新完成 注意:更新前后数据是一致的
beforeDestory:销毁之前
destory:销毁完成
4.动画
一,基础使用
第一步:给需要添加动画的元素用包裹起来
第二步:设置6个样式
<transition>
<div class="box" v-show='isShow'></div>
</transition>
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 2s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 2s;
transform: rotate(360deg);
}
注意:如果需要添加多个动画,只能修改样式中的v 把v换成自己定义的类名即可
.aa-enter{
opacity: 0;
}
.aa-enter-to{
opacity: 1;
}
.aa-enter-active{
transition: all 2s;
}
.aa-leave{
opacity: 1;
}
.aa-leave-to{
opacity: 0;
}
.aa-leave-active{
transition: all 2s;
}
<transition name='aa'>
<div class="box" v-show='isShow'></div>
</transition>
二、动画库的使用
引入animate.css这个库
地址;https://animate.style/
<transition enter-active-class='animate__animated animate__rubberBand'
leave-active-class="animate__animated animate__bounceOutUp">
<div class="box" v-show='isShow'></div>
</transition>
day 03
1.watch
案例:百度搜索框
接口:百度:http://suggestion.baidu.com/su?cb=callback&wd=123
1.深浅监听
watch:{
//浅监听
msg(newVal,oldVal){
console.log(newVal,oldVal)
},
//深监听
json:{
//这个名字不能更改
handler(a){
console.log(a)
},
//主要通过deep属性
deep:true
},
注意:不建议使用深监听,通常转换为浅监听方式
}
2.百度案例
a.跨域的解决 jsonp
b.通过监听用户输入,发送请求,渲染页面
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
.select{
background-color: red;
}
</style>
</head>
<body>
<div id='app'>
<input type="text" v-model='search' @keydown.up.prevent='up' @keydown.down = 'down' @keydown.enter = 'enter'>
<ul>
<li v-for='(item,index) in arr' :key='item' :class='[index==n?"select":""]'>{{item}}</li>
</ul>
</div>
</body>
<script src='./vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
search:'',
arr:[],//请求回来的数据
n:-1,//自己定义的标识
},
methods: {
down(){
console.log(111)
this.n++;
if(this.n>this.arr.length-1){
this.n = 0
}
},
up(){
this.n--;
if(this.n<0){
this.n=this.arr.length-1
}
},
enter(){
// https://www.baidu.com/s?wd=123
//在下拉列表的范围内点击跳转到对应的搜索页面
if(this.n>=0&&this.n<=this.arr.length-1){
window.open('https://www.baidu.com/s?wd='+this.arr[this.n])
}else{
window.open('https://www.baidu.com/s?wd='+this.search)
}
}
},
watch: {
search(){
if(this.search==''){
return
}
// 发送数据请求 jsonp方式
var os = document.createElement('script');
os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.search;
document.body.appendChild(os)
}
},
})
function aa(res){
console.log(res)
// 找到与vm中data的关系,并且赋值
vm.arr = res.s
}
</script>
</html>
2.过滤器
全局: Vue.fliter(‘过滤器名字’,回调函数) 回调函数中做的是业务逻辑
局部:在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }
案例:
1.电话号码过滤
<div id='app'>
<!-- | 管道符 -->
{{tel | filterTel}}
</div>
Vue.filter('filterTel',(tel)=>{
return tel.slice(0,3)+'****'+tel.slice(7)
})
2.过滤价格
<div id='app'>
<!-- | 管道符 -->
{{price | filterPrice}}
</div>
Vue.filter('filterPrice',(price)=>{
return price.toFixed(2)
})
3.过滤时间
<div id='app'>
<div>当前时间{{ time | filterTime}}</div>
</div>
Vue.filter('filterTime',(time)=>{
// padStart 首位补零方法 padEnd 末尾补零
let date = new Date(time)
console.log(date)
// 年
let year = date.getFullYear()
// 月
let month = ((date.getMonth()+1)+'').padStart(2,'0')
// 日
let day = (date.getDate()+'').padStart(2,'0')
// 时
let hours = (date.getHours()+'').padStart(2,'0')
// 分
let minutes = (date.getMinutes()+'').padStart(2,'0')
// 秒
let seconds = (date.getSeconds()+'').padStart(2,'0')
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})
3.计算属性
1.通过计算得出来的,所以就没有初始值
computed
4.购物车案例
流程:
1.先画静态页面 利用bs
<div id='app' class="container">
<h2>购物车</h2>
<table class="table table-bordered table-hover">
<tr>
<th>
<input type="checkbox" v-model='allChecked' @change='checkAll'>全选
</th>
<th>商品名称</th>
<th>商品单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for='(item,index) in list' :key='item.id'>
<td>
<input type="checkbox" v-model='item.checked' @change='changeOne(index)'>
</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button type="button" class="btn btn-primary" @click= 'cut(index)'>-</button>
<span>{{item.num}}</span>
<button type="button" class="btn btn-danger" @click= 'add(index)'>+</button>
</td>
<td>小计:{{item.price*item.num}}</td>
<td><button type="button" class="btn btn-primary" @click = 'del(index)'>删除</button></td>
</tr>
<tr>
<td colspan="6">总价:{{total}}</td>
</tr>
</table>
</div>
2.实现点击添加,点击减少数量,点击删除功能
let vm = new Vue({
el:'#app',
data:{
allChecked:false,
list:[
{
id:1,
name:'手机',
price:1999.9,
num:1,
checked:false
},
{
id:2,
name:'电脑',
price:4999.9,
num:1,
checked:true
},
{
id:3,
name:'平板',
price:2999.9,
num:1,
checked:false
},
{
id:4,
name:'相机',
price:999,
num:1,
checked:false
},
]
},
methods: {
// 添加
add(index){
this.list[index].num++
},
cut(index){
this.list[index].num--
if( this.list[index].num<0){
this.list[index].num=0
}
},
del(index){
this.list.splice(index,1)
},
// 全选
checkAll(){
this.list.forEach(item=>{
item.checked = this.allChecked
})
},
//改变一个的状态
changeOne(index){
this.allChecked = this.list.every(item=>item.checked)
}
},
})
3.判断选中状态完成总价的计算
<tr>
<td colspan="6">总价:{{total}}</td>
</tr>
computed: {
total(){
var sum=0;
this.list.forEach(item=>{
if(item.checked){
sum+=item.price*item.num
}
})
return sum
}
},
bootstrap
day04
1.组件
特点:一组可复用的vue实例
组件化和模块化的区别?
组件化:组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程,有多种属性、状态反映其内部特性
特点:一个具有html+css+js的页面
模块化:侧重的功能的封装,主要是针对Javascript代码,隔离、组织复制的javascript代码,将它封装成一个个具有特定功能的的模块。
2.命名规则
1.不能以标签起名,包含大写
2.建议用驼峰起名
3.首字母大写,后面直接写名字。如果后面有大写需要转换为驼峰
3.template模板
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<v-one></v-one>
<v-two></v-two>
<v-three></v-three>
</div>
</body>
<!-- 开发环境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 组件:一组可复用的vue实例
// 用法:全局定义,局部定义
// Vue.component('组件名',模板对象)
// components:{组件名:{模板对象}}
//必须要写在实例对象之前
Vue.component('vOne',{
// template:要往页面上渲染的模板
template:'<div>我是第一个组件</div>'
})
let vm = new Vue({
el: '#app',
data: {},
methods: {
},
components:{
vTwo:{
template:'<div>我是第二个模板对象<div>abc</div></div>'
},
vThree:{
template:`<div>我是第二个模板对象
<h2>我是标题2</h2>
</div>`
}
}
})
// 特点:template 有且只能有一个根元素 通常是div
</script>
</html>
4.data使用
重点:组件中定义data为函数,原因是:为了共享数据但是又互相不干扰.
<body>
<div id='app'>
<div>{{msg}}</div>
<p>{{msg}}</p>
<button @click = 'change'>点击修改msg</button>
<hr>
<v-one></v-one>
<v-one></v-one>
</div>
<template id="temp1">
<div>
<p>{{content}}</p>
<button @click='changeOne'>修改内容</button>
</div>
</template>
</body>
let vm = new Vue({
el: '#app',
data: {
msg:'abc'
},
methods: {
change(){
this.msg='123'
}
},
components:{
vOne:{
template:'#temp1',
data(){
return {
content:'我要被修改了'
}
},
methods: {
changeOne(){
this.content = '我被修改了'
}
},
}
}
})
// 总结:data定义为函数的原因:由于需要共享数据,但是又要互不干扰,所以定义为函数
5.组件嵌套
注意:子组件只能在父组件中使用 子组件中的数据目前仅能供自己使用
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
{{msg}}
<v-one></v-one>
</div>
<template id="temp1">
<div>
<h2>我是模板一</h2>
{{name}}
<!-- {{msg}} -->
<!-- <v-inner></v-inner> -->
</div>
</template>
<template id="temp2">
<div>
<h2>我是模板二</h2>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 组件:一个可复用的vue实例
let vm = new Vue({
el: '#app',
data: {
msg:'hello '
},
methods: {
},
components:{
vOne:{
template:'#temp1',
components:{
vInner:{
template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
components:{
vThree:{
template:'#temp2'
}
}
},
vOuter:{
}
},
data(){
return {
name:'张三'
}
}
}
}
})
// 总结:组件中关系:只有父子和非父子关系
// 嵌套:子组件只能在父组件中使用
// 组件中的data :定义为方法,必须有返回值,同时返回值的类型为对象
// data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如:data,methods,filter,cmpputed,watch...
</script>
</html>
6.后台管理页面实现
注意:1.外层嵌套大盒子(container) 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式
7.生命周期 --8个钩子函数 mounted 是最常用的
v-if 会引起生命周期的改变
v-show 不会引起
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<div v-html='msg' v-if='isShow'></div>
<button @click='change'>点击</button>
<hr>
<v-one v-show='isShow'></v-one>
</div>
<template id="temp1">
<div>
<div v-if='show'>{{con}}</div>
<button @click='changeC'>点击切换内容</button>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello world!',
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
},
components: {
vOne: {
template: '#temp1',
data() {
return {
con: '我是组件模板',
show: true
}
},
methods: {
changeC() {
this.con = '我被修改了!!!!!!!'
}
},
mounted() {
console.log('组件内容挂载完成')
},
destroyed() {
console.log('销毁执行了')
},
}
},
mounted() {
console.log('vm内容挂载完成')
},
destroyed() {
console.log('vm销毁执行了')
},
})
</script>
</html>
上述案例生命周期的执行过程为:
首先是vm实例的生命周期执行beforeCreate,created,beforeMount,之后是到组件走生命周期beforeCreate,created,beforeMount,mounted,最后是走vm的mounted。
7.脚手架
步骤:
//全局安装webpack
npm i webpack -g
//查看版本
webpack -v
//全局安装vue脚手架 2.x
npm i vue-cli -g
//查看版本
vue -V
以上操作只需要操作一次
//创建项目
vue init webpack demo
//进入项目
cd demo
//启动
npm run dev //localhost:8080
注意: 安装cnpm方法 淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org
注意:
1.名字:不能带大写
2.全选n
3.在当前文件夹中不能有vue.js这个文件
1.index.html ->页面的入口文件
2.main.js->程序的入口文件
3.App.vue ->组件-->类似上午的containter
总结:
后台项目:
1.划分组件
App.vue->container 整个容器
header,footer,main,left,right 都是单独的组件 需要用谁直接 import导入就行
//点击弹框
局部定义弹框 首先要有弹框组件 alertbtn.vue 哪用在哪里引入
<template>
<div class="left">
left
<v-alert></v-alert>
</div>
</template>
<script>
import vAlert from './aletrBtn'
export default {
components: {
vAlert
},
data() {
return {};
},
methods: {},
mounted() {},
};
</script>
<style>
.left{
width: 200px;
background: orange;
}
</style>
//全局引入弹框 需要在main.js中定义
// 引入弹框的组件
import vAlert from './components/aletrBtn.vue'
Vue.component('vAlert',vAlert)
在其他页面只需要调用组件名即可 (v-alert)
<template>
<div class="header">
header
<v-alert></v-alert>
</div>
</template>
<script>
export default {
}
</script>
<style>
.header{
width: 100vw;
height: 100px;
background: red;
}
</style>
day 05
1.组件通信
a.父传子:
// 总结:1.父传子:传递的是基础数据类型 给父组件中的子组件绑定属性,此时属性的值在父组件中已经定义,子组件需要通过porps接收,要用数组接收 在子组件中直接渲染接收到的值即可
// 2.父传子:子修改父组件传递的值报错,如果解决,把父组件传递过来的值变为自己的属性,直接修改自己属性即可。后果:父组件修改不会影响自己的数据
// 3.父传子:父变,子变,子变,父变,需要在父组件中定义对象,传递给子组件的就是对象的方式,子组件正常接收即可
parent.vue 父组件
<template>
<div>
parent
<div>这是给儿子的礼物----{{ msg }}</div>
<input type="text" v-model="msg" />
<div>{{info}}</div>
<input type="text" v-model='info.name'>
<v-child :gift="msg" :money="money" :info='info'></v-child>
</div>
</template>
<script>
import vChild from "./child";
export default {
components: {
vChild,
},
data() {
return {
msg: "大奔",
money: 2000,
info:{
name:'张三'
},
};
},
methods: {},
mounted() {},
};
</script>
<style>
</style>
child.vue 子组件
props: ["gift", "money",'info'],
parentCase
case.vue
<template>
<div>
<v-java></v-java>
<v-ui></v-ui>
<v-web></v-web>
</div>
</template>
<script>
import vJava from './java'
import vUi from './ui'
import vWeb from './web'
export default {
components:{
vJava,
vUi,
vWeb
},
data () {
return {
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>
java.vue
<template>
<div>
<h2>java讲师</h2>
//这是循环添加的 key必须要绑定 由于card里面渲染的是具体的数据,所以传递过去对象即可
<v-card v-for='item in arr' :key='item.id' :teachers='item'></v-card>
<!-- <v-card></v-card> -->
</div>
</template>
<script>
import vCard from './card'
export default {
components:{
vCard
},
data () {
return {
arr:[
{
id:1,
img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109071725808.jpg',
name:'李老师',
job:'院长'
},
{
id:2,
img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423094745162.jpg',
name:'张老师',
job:'副院长'
},
{
id:3,
img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423105110779.jpg',
name:'伍老师',
job:'高级讲师'
},
]
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>
card.vue
props:['teachers']
b.子传父:
子组件通过this.$emit触发方法
child.vue
<template>
<div>
child
<button @click="send">点击给父亲打钱</button>
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
money:'2万'
}
},
methods:{
send(){
// $emit 用来触发子传父的方法的
this.$emit('giveTo',this.money)
}
},
mounted(){
}
}
</script>
<style scoped>
</style>
parent.vue
<template>
<div>
parent
这是儿子给的钱----{{myMoney}}
<v-child @giveTo='own'></v-child>
</div>
</template>
<script>
import vChild from './child'
export default {
components:{
vChild
},
data () {
return {
myMoney:''
}
},
methods:{
own(e){
console.log(e)
this.myMoney = e
}
},
mounted(){
}
}
</script>
<style scoped>
</style>
c.非父子:
1.首先创造关系 main.js->Vue.prototype.Event=new Vue()
总结:发送数据用$emit 需要触发条件 接收数据用$on
a.vue
<template>
<div>
aaaaa
<button @click="sendB">把数据发送给B</button>
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
msgA:'我是a的数据'
}
},
methods:{
sendB(){
// 发送数据
this.Event.$emit('sendB',this.msgA)
}
},
mounted(){
console.log(this.Event) //Vue
}
}
</script>
<style scoped>
</style>
b.vue
<template>
<div>
bbbbb----fromA{{fromA}}
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
fromA:''
}
},
methods:{
},
mounted(){
// 接收数据 $on()
this.Event.$on('sendB',(e)=>{
console.log(e)
this.fromA = e
})
}
}
</script>
<style scoped>
</style>
b->c数据
b.vue
<template>
<div>
bbbbb----fromA{{fromA}}
<button @click="sendC">发送给C</button>
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
fromA:''
}
},
methods:{
sendC(){
this.Event.$emit('sendC',this.fromA)
}
},
mounted(){
// 接收数据 $on()
this.Event.$on('sendB',(e)=>{
console.log(e)
this.fromA = e
})
}
}
</script>
<style scoped>
</style>
c.vue
<template>
<div>
cccccc -----{{fromA}}
</div>
</template>
<script>
export default {
components:{
},
data () {
return {
fromA:''
}
},
methods:{
},
mounted(){
this.Event.$on('sendC',(e)=>{
this.fromA = e
})
}
}
</script>
<style scoped>
</style>
2.is
1.解决标签的固定搭配问题
2.动态组件
<template>
<div>
<!-- is 1.解决标签的固定搭配 ul>li
2.动态组件
-->
<ul>
<li is='vOne'>我是li的内容-------- <v-one></v-one></li>
</ul>
<hr>
<!-- one two 动态组件切换-->
<button @click="name='vOne'">one</button><button @click="name='vTwo'">two</button>
<div :is='name'></div>
</div>
</template>
<script>
import vOne from './one'
import vTwo from './two'
export default {
components:{
vOne,
vTwo
},
data () {
return {
name:'vOne'
}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>
3.slot
1.无名插槽
在子组件中添加<slot></slot>
在slot.vue
<v-one>
<div>我就是插入到one组件中的内容1111</div>
<div>我就是插入到one组件中的内容22222</div>
</v-one>
在one.vue
<!-- 无名插槽 -->
<slot></slot>
one
<slot></slot>
2.具名插槽
在slot.vue中
<v-two>
<div slot="aa">白日依山尽</div>
<div slot="bb">黄河入海流</div>
<div slot="cc">欲穷千里目</div>
<div slot="dd">更上一层楼</div>
<p>我是新增加的</p>
</v-two>
在two.vue中
<div>
<slot name='aa'></slot>
<slot name='bb'></slot>
two
<slot name='cc'></slot>
<slot name='dd'></slot>
<slot></slot>
</div>
4.ref(不建议使用)
1.ref 操作普通元素 就是获取到的dom元素
2.ref 操作的组件 获取的就是组件的数据和方法
3.使用ref 需要通过this.$refs来获取
在ref.vue中
<template>
<div>
<div class="box" ref='box'></div>
<v-one ref='one'></v-one>
这是从one组件拿回来的数据{{myMsg}}
</div>
</template>
<script>
import vOne from './one'
export default {
components:{
vOne
},
data () {
return {
myMsg:''
}
},
methods:{
},
mounted(){
// 总结:1.对于普通元 ref ->$refs来获取元素,获取之后就是普通的dom元素.
// console.log(this.$refs.box.offsetWidth)
console.log(this.$refs.one.fn())
console.log(this.$refs.one.msg)
this.myMsg = this.$refs.one.msg
}
}
</script>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
</style>
5.jquery
1.npm install jquery --save
2.哪个页面需要直接导入即可
import $ from 'jquery'
mounted(){
$('button').click(()=>{
$('.box').width()
})
}
3.全局导入
在main.js
import $ from 'jquery'
Vue.prototype.$ = $;
//此时这个$是vue实例中的一个属性,所以需要通过this调用
this.$('button').click(()=>{
this.$('.box').width()
})