资讯详情

Vue学习进度二

目录标题写在这里

  • 1.分析脚手架
  • 2.ref属性(id类似)
  • 3.props配置
  • 4.mixin混入
    • 混合钩函数，加载问题
      • 局部引入
      • 全局引入
  • 5.plugin插件
  • 6.scoped样式
  • 7.TodoList案例
  • 8.浏览器本地存储
    • 在TodoList的应用
  • 9.组件自定义事件(子到父)|emit,on,off)
  • 10.全局事件总线【student传数据给school】
  • 11.订阅和发布消息
  • 12.动画，过渡略
  • 13.配置代理（axios请求数据）
    • 13.1方法1
    • 13.2方法2
  • 14.gitHub搜索案例[请求数据]
    • main.js
    • App.vue
    • List.vue
    • Search.vue
  • 15.vue-resource(与axios相同用法)
  • 16.插槽slot
    • 16.1默认插槽
    • 16.2具名插槽
    • 16.3作用域插槽
  • 17.求和案例_Vuex
      • vuex工作流程
  • 18.求和案例_getters配置
  • 19.求和案例_四个map的使用方法
  • 22.求和案例_多组件共享数据(连23)
  • 23.求和案例_Vuex模块化编码
      • components/Count.vue
      • components/Person.vue
      • store/index.js
      • store/Count.js
      • store/Person.js
      • App.vue
      • main.js
  • 24.路由的基本使用
      • 24.总结！[在此插入图片描述](https://img-blog.csdnimg.cn/0d517b071b164527952a1b64cc10dc90.png)
      • 24.2代码
  • 25.路由使用的几个注意点
  • 26.路由嵌套
      • 26.1总结
      • 26.2代码
  • 27.路由的query传递参数
      • 27.1总结
      • 27.2代码
  • 28.命名路由
  • 29.路由的params传递参数
      • 29.1总结
      • 29.2代码
  • 30.路由中的props配置
      • 30.1总结
      • 30.2代码
  • 31.路由_操作记录的浏览器_replace
      • 31.1总结
      • 31.2代码
  • 编程路由导航【push,replace,back...】
      • 32.1总结
      • 32.2代码
  • 33.路由_缓存路由组件【keep-alive】
      • 33.1总结
      • 33.2代码
  • 34.路由_钩子(activate,deactivate)
  • 35.路由_全局路由守卫&&独家路由守卫
      • 31.1总结
      • 35.2代码
  • 36.路由_组件内路由守卫
  • 37.路由_hash,history

1.分析脚手架

npm install -g @vue/cli vue craete XXX npm run serve

在这里插入图片描述

2.ref属性(id类似)

App.vue文件

<template>     <div>         <h1 v-text="msg" ref="title"></h1>         <button ref="btn" @click="showDOM">获取上方DOM</button>
        <School ref="zj"></School>
    </div>
</template>

<script>
import School from './components/School.vue'
export default { 
        
    name : "App",
    data()
    { 
        
       return { 
         
           msg:"学习Vue",
       }
    },
    components:{ 
        
        School
    },
    methods:{ 
        
        showDOM(){ 
        
            // console.log(document.getElementById("title").innerHTML)
            console.log(this.$refs.title)
            console.log(this.$refs.btn)
            console.log(this.$refs.zj)
        }
    }   

}
</script>

3.props配置

App.vue

<template>
    <div>
        <School name="张三" sex="男" :age="18"></School>
        <hr>
        <School name="李四" sex="女" :age="19"></School>
        <hr>
        <School name="王五" sex="男"></School>
    </div>
</template>

<script>
import School from './components/Student.vue'
export default { 
        
    name : "App",
    components:{ 
        
        School
    },
}
</script>

Student.vue

<template>
    <div>
        <h2>学生姓名：{ 
        { 
        name}}</h2>
        <h2>学生性别:{ 
        { 
        sex}}</h2>
        <h2>学生年龄：{ 
        { 
        myage}}</h2>
        <button @click="addAge">点击加一</button>
    </div>
</template>

<script>
export default { 
        
    name: 'Student',
    data(){ 
        
        return { 
        
            myage:this.age,
        }
    },
    //接受
    //方法1：
    props:["name","sex","age"],//先加载props,后加载data
    methods:{ 
        
        // props传入的属性值不要改动
        addAge()
        { 
        
            this.myage++;
        }
    },

    //方法2：
    // props:{ 
        
    // name:String,
    // sex:String,
    // age:Number,
    // }

    // 方法3：
    // props:{ 
        
    // name:{ 
        
    // type:String,
    // required:true,
    // },
    // sex:{ 
        
    // type:String,
    // required:true,
    // },
    // age:{ 
        
    // type:Number,
    // default:99,
    // }
    // }
}
</script>

4.mixin混入

Student.vue

<template>
    <div>
        <h2>学生姓名：{ 
        { 
        name}}</h2>
        <h2>学生性别:{ 
        { 
        sex}}</h2>
        <h2>学生年龄：{ 
        { 
        age}}</h2>
        <button @click="show">点击提示姓名信息</button>
    </div>
</template>

<script>
// import {hunhe,hunhe2} from "../mixin"
export default { 
        
    name: 'Student',
    // mixins:[hunhe,hunhe2],
    data(){ 
        
        return{ 
        
            name: '张三',
            sex: '男',
        }
    },
    mounted(){ 
        
        console.log("mounted")
    }
}
</script>

School.vue

<template>
    <div class="school">
        <h1>学校名称{ 
        { 
        name}}</h1>
        <h1>学校地址{ 
        { 
        address}}</h1>
        <button @click="show">点击提示学校名称信息</button>
    </div>
</template>

<script>
// import {hunhe,hunhe2} from "../mixin"

export default { 
        
    name: 'School',
    // mixins: [hunhe,hunhe2],
    data(){ 
        
        return { 
        
            name: '河南中医药大学',
            address:"郑州",
        }
    }
}
</script>

<style>
    .school{ 
        
        background-color:orange
    }    
</style>

App.vue

<template>
    <div>
        <School></School>
        <hr>
        <Student></Student>
    </div>
</template>

<script>
import School from './components/Student.vue'
import Student from './components/School.vue'

export default { 
        
    name : "App",
    components:{ 
        
        School,
        Student,
    },
}
</script>

mixin.js

//data数据重复：组件中data和mixin中data取交集，且以组件中data为主
const hunhe = { 
        
    data(){ 
        
        return { 
        
        name: 'hunhe_name',
        sex:"女",
        age:18,
        }
    }
}

//同名钩子函数会叠加 
//函数叠加
const hunhe2 = { 
        
    methods:{ 
        
        show()
        { 
        
            alert(this.name)
        }
    },
    mounted() { 
        
       console.log('hunhe2_mounted')
    }
}


export { 
        hunhe, hunhe2}

main.js

//引入Vue
import Vue from 'vue';
//引入App组件
import App from './App.vue'

//关闭提示信息
Vue.config.productionTip = false
import { 
        hunhe,hunhe2} from './mixin'

Vue.mixin(hunhe)
Vue.mixin(hunhe2)

new Vue({ 
        
    el:"#app",
    render: h =>  h(App),  
})

混入中的钩子函数，加载问题

局部引入

Student组件 School组件

全局引入

Student组件 School组件 App组件 VM实例

5.plugin插件

plugins.js

export default { 
        
  install(Vue,x,y,z){ 
        
    console.log(x,y,z)
    //全局过滤器
    Vue.filter('mySlice', function(value){ 
        return value.slice(0,4)})

    //定义全局指令
    Vue.directive('fbind',{ 
        
      //指令与元素成功绑定时（一上来）
      bind(element,binding){ 
        element.value = binding.value},
      //指令所在元素被插入页面时
      inserted(element,binding){ 
        element.focus()},
      //指令所在的模板被重新解析时
      update(element,binding){ 
        element.value = binding.value}
    })

    //定义混入
    Vue.mixin({ 
        
      data() { 
        return { 
        x:100,y:200}},
    })

    //给Vue原型上添加一个方法（vm和vc就都能用了）
    Vue.prototype.hello = ()=>{ 
        alert('你好啊')}
  }
}

School.vue

<template>
  <div>
    <h2>学校名称：{ 
        { 
         name | mySlice }}</h2>
    <h2>学校地址：{ 
        { 
         address }}</h2>
    <button @click="test">点我测试一个hello方法</button>
  </div>
</template>

<script>
  export default { 
        
    name:'School',
    data() { 
        
      return { 
        
        name:'尚硅谷atguigu',
        address:'北京',
      }
    },
    methods: { 
        
      test(){ 
        
        this.hello()
      }
    },
  }
</script>

Student.vue

<template>
  <div>
    <h2>学生姓名：{ 
        { 
         name }}</h2>
    <h2>学生性别：{ 
        { 
         sex }}</h2>
    <input type="text" v-fbind:value="name">
  </div>
</template>

<script>
  export default { 
        
    name:'Student',
    data() { 
        
      return { 
        
        name:'张三',
        sex:'男'
      }
    },
  }
</script>

6.scoped样式

一般在App组件中，控制所有子组件的样式[不用写sxoped] App.vue

<template>
    <div>
        <h2>App组件中</h2>
        <hr>
        <School></School>
        <hr>
        <Student></Student>
    </div>
</template>

<script>
import School from './components/Student.vue'
import Student from './components/School.vue'

export default { 
        
    name : "App",
    components:{ 
        
        School,
        Student,
    },
}
</script>

<style scoped>
    h2{ 
        
        color: red;
    }
</style>

Student.vue

<template>
    <div class="student">
        <h2>学生姓名：{ 
        { 
        name}}</h2>
        <h2>学生性别:{ 
        { 
        sex}}</h2>
        <h2>学生年龄：{ 
        { 
        age}}</h2>
    </div>
</template>

<script>
export default { 
        
    name: 'Student',
    data(){ 
        
        return{ 
        
            name: '张三',
            sex: '男',
            age:18,
        }
    },
}
</script>

<style scoped>
    .student{ 
        
        background-color:yellow;
    }
</style>

School.vue

<template>
    <div class="school">
        <h2>学校名称:{ 
        { 
        name}}</h2>
        <h2>学校地址:{ 
        { 
        address}}</h2>
    </div>
</template>

<script>

export default { 
        
    name: 'School',
    data(){ 
        
        return { 
        
            name: '河南中医药大学',
            address:"郑州",
        }
    },
}
</script>

<style>
    .school{ 
        
        background-color:grey;
    }    
</style>

7.TodoList案例

1.父–>子【传入参数即可】 2.子–>父【子组件传数据给父组件做法:1.父组件定义函数 2.传给子组件 3.合适的时机调用函数】 3.子–>子【子–>父，父–>子】

代码略

8.浏览器本地存储

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>LocalStroage</title>
</head>

<br>
    <h1>LocalStorage</h1>
    <button onclick="saveData()">点击我保存一个数据</button><br>
    <button onclick="readData()">点击我读取一个数据</button><br>
    <button onclick="deleteData()">点击我删除一个数据</button><br>
    <button onclick="clearData()">点击我删除ALL数据</button><br>
    <script type="text/javascript">

        //1.存入
        function saveData() { 
        
            let p = { 
         name: "dyh", age: 18 }
            // console.log(JSON.stringify(p))
            //key[string类型] value[string类型]
            
            //@@@@@@@@@@@@@@@@@@存入@@@@@@@@@@@@@@@@@@
            localStorage.setItem("mgs", "hello!!")
            localStorage.setItem("mgs2",666)
            localStorage.setItem("mgs3",JSON.stringify(p))

        }
        // 2.取出
        function readData() { 
        
            console.log(localStorage.getItem("mgs"))
            console.log(localStorage.getItem("mgs2") 

        标签： mgs203磁性接近传感器
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台