博客

第一星期笔记

  • Post author:
  • Post category:其他




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()
})


版权声明：本文为weixin_52998553原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。