(四)脚手架编程

(四)脚手架编程

render函数

  1. vue.js与vue.runtime.xxx.js的区别:

  • vue.js是完整版的Vue,包含:核心功能+模板解析器
  • vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器

  1. 音乐Vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容

修改默认配置

Vue脚手架隐藏了所有webpack相关的配置,若想查看具体的webpack配置,请执行:vue inspect >output.js

会生成一个output.js文件,里面保存了所有的相关配置,只是输出配置选项,但是在文档当中修改,不会影响webpack的配置

  • 如果要修改配置,则需要在与package.json同级的目录中,新建一个vue.config.js配置文件,配置详细,请查看官网文档配置参考ref特殊标签属性
  • 被用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签伤感获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  • 应用方式:

  1. 打标识:<h1 ref = "xxx"></h1><School ref = "xxx"></School>
  2. 获取:this.$refs.xxx

props配置项

  • 功能:让组件接收外部传过来的数据
  • 传递数据:<Demo name = "xxx"/> 
  • 接收数据:

  1. 第一种方式(只接收):props:['name']
  2. 第二种方式(限制类型)

props:{
    name:Number
}

  1. 第三种方式(限制类型、限制必要性、指定默认值)

props:{
    name:{
        type:String     //类型
        required:true   //必要性
        default:'老王'    //默认值
    }
}

  • 备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请赋值props的内容到data中一份,然后去修改data中的数据

#文件名:Student.vue
<template>
    <div>
        <h2>学生的姓名:{{name}}</h2>
        <h2>学生的年龄:{{age}}</h2>
    </div>
</template>
​
<script>
export default {
    props:['name','age'],
}
</script>
​
<style>
​
</style>

#文件:App.vue
<template>
    <div>
        <Student name="张三" :age = "18"/>
    </div>
</template>
​
<script>
import Student from './components/Student.vue'
​
    export default {
        name:"App",
        components:{
            Student
        }
    }
</script>
​
<style>
​
</style>

mixin混入配置项

  • 功能:可以把多个组件公用的配置提取成一个混入对象
  • 使用方式:

  1. 第一步定义混合,例如:

export const name = {
    data(){...},
    methods:{...}
    ....
}

  1. 第二步使用混入,例如:

//全局混入:Vue.mixin(xxx)
//局部混入:mixins:['xxx']
//引入方式:import {name} from './minxin.js'

Vue中的插件

  • 功能:用于增强Vue
  • 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
  • 定义插件

对象.install = function (Vue,options){
    //添加全局过滤器
    Vue.filter(...)
               
    //添加全局指令
    Vue.directive(...)
    //配置全局混入
    Vue.directive(...)
    //添加实例方法
    Vue.prototype.$myMethod = function(){}
    Vue.prototype.$myProperty = xxxx
}

定义案例

//文件名称:plugins.js
//定义插件
export default{
    install(Vue){
        //给Vue原型上添加一个方法,(vm和vc就都能够用了)
        Vue.prototype.hello = () =>{alert("你好啊")}
​
        //可以在这里定义全局的相关功能,作为Vue的增强工具
    }
}

  • 使用插件

//插件导入
import plugins from "./plugins"

//使用插件
Vue.use(plugins)

scoped样式

  • 作用:让样式在局部生效,防止冲突
  • 写法:<style scoped>

<style scoped>
    .demo{
        background-color: skyblue;
    }
</style>

TodoList案例

image-20210814193645871

  • 组件化编码流程

  1. 拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
  2. 实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用
    1. 一个组件在用:放在组件自身即可
    2. 一些组件在用:可以放在他们共同的父组件上(状态提升)

  • props适用于:

  1. 父组件 ==> 子组件 通信
  2. 子组件 ==> 父组件 通信(要求父先给子一个函数)

  • 使用v-mode时要切记:v-mode绑定的值不能是props传过来的值,因为props是不可以修改的
  • props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做

浏览器本地存储

  • localStorage

利用localStorage将数据存储在浏览器的本地,以键值对的方式进行存储

在浏览器控制台中的application => localStorage 进行查看

当浏览器关闭后重新启动,数据不会丢失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="saveData()">点我保存一个数据</button>
    <button onclick="readData()">点我读取一个数据</button>
    <button onclick="removeData()">删除一个数据</button>
    <button onclick="removeALL()">清空</button>
    <script>
        function saveData(){
            //添加一个数据
            localStorage.setItem("msg","hello");

            //保存一个对象
            let p = {name:"张三",age:18}
            localStorage.setItem("obj",JSON.stringify(p))
        }

        function readData(){
            //读取对象
            console.log(localStorage.getItem("obj"))
        }

        function removeData(){
            //删除key为obj的键值对
            localStorage.removeItem("obj")
        }

        //清空所有
        function removeALL(){
            localStorage.clear()
        }
        
    </script>
</body>
</html>

  • sessionStorage

利用localStorage将数据存储在浏览器的本地,以键值对的方式进行存储

在浏览器控制台中的application => sessionStorage进行查看

当浏览器关闭后重新启动,数据会丢失

使用的API与localStorage一致

  • 备注

如果xxxxStorage.getItem(xxx)如果xxx对应的value获取不到,那么getitem的返回值是null

JSON.parse(null)的结果怡然是null

自定义事件

  1. 一种组件间通信的方式,适用于:子组件 ===> 父组件
  2. 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
  3. 绑定自定义事件:
    1. 第一种方式,在父组件中:<Demo @atguigu="test"/><Demo v-on:atguigu="test"/>
    2. 第二种方式,在父组件中:<Demo ref=”demo”/>
      ……
      mounted(){
      this.$refs.xxx.$on(‘atguigu’,this.test)
      }
    3. 若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。
  4. 触发自定义事件:this.$emit('atguigu',数据)
  5. 解绑自定义事件this.$off('atguigu')
  6. 组件上也可以绑定原生DOM事件,需要使用native修饰符。
  7. 注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!

全局事件总线

  1. 一种组件间通信的方式,适用于任意组件间通信。
  2. 安装全局事件总线:new Vue({
    ……
    beforeCreate() {
    Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
    },
    ……
    })
  3. 使用事件总线:
    1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。methods(){
      demo(data){……}
      }
      ……
      mounted() {
      this.$bus.$on(‘xxxx’,this.demo)
      }
    2. 提供数据:this.$bus.$emit('xxxx',数据)
  4. 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

消息订阅与发布

  1. 一种组件间通信的方式,适用于任意组件间通信。
  2. 使用步骤:
    1. 安装pubsub:npm i pubsub-js
    2. 引入: import pubsub from 'pubsub-js'
    3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。需要在接收数据的一方引入pubsub-jsmethods:{
      //收到的data有两个,第一个参数为消息名称,第二个参数才是数据
      demo(msgName,data){……}
      //可以使用_来占位
      //demo(_,data){…..}
      }
      ……
      mounted() {
      //最好把ID放在this身上,取消订阅才能访问的到
      this.pid = pubsub.subscribe(‘xxx’,this.demo) //订阅消息
      }
    4. 提供数据:pubsub.publish('xxx',数据),需要在提供数据的一方引入pubub-js
    5. 最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)去取消订阅。在括号当中填入消息ID才行

nextTick

  1. 语法:this.$nextTick(回调函数)
  2. 作用:在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画

  1. 作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
  2. 图示:
  3. 写法:
    1. 准备好样式:
      • 元素进入的样式:
        1. v-enter:进入的起点
        2. v-enter-active:进入过程中
        3. v-enter-to:进入的终点
      • 元素离开的样式:
        1. v-leave:离开的起点
        2. v-leave-active:离开过程中
        3. v-leave-to:离开的终点
      • 动画效果,需要使用类选择器

      .siqu-enter-active{
      animation: siqu 1s;
      }

      .siqu-leave-active{
      animation: siqu 1s reverse;
      }

      @keyframes siqu{
      from{
      transform: translateX(-200px);
      }

      to{
      transform: translateX(0px);
      }
      }

    2. 使用<transition>包裹要过度的元素,并配置name属性:<transition name=”hello”>
      <h1 v-show=”isShow”>你好啊!</h1>
      </transition>
    3. 备注:若有多个元素需要过度,则需要使用:<transition-group>,且每个元素都要指定key值。
    4. 如果给动画加了name = "hello",则进入和离开的样式名称要进行修改hello-enter-active
    5. 如果想要让页面一刷新就显示进入的动画,则需要给transition配置属性::appear = "true"或者使用简写形式appear

  • 案例

//Amaiton.vue
<template>
    <div>
    <button @click ="isShow = !isShow">显示/隐藏</button>
    <transition  name ="siqu" :appear="true">
        <h2 v-show="isShow" >过渡动画</h2>
    </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShow:true
        }
    },
}
</script>
<style>

h2{
    background-color: skyblue;
    width: 200px;
}
.siqu-enter-active{
    animation: siqu 1s;
}
.siqu-leave-active{
    animation: siqu 1s reverse;
}
@keyframes siqu{
    from{
        transform: translateX(-200px);
    }
    to{
        transform: translateX(0px);
    }
}
</style>

  • 集成第三方动画库

  1. 在npm中进行安装npm install animate.css或者yarn add animate.css
  2. 在JS中进行引入,引入样式import animate.css
  3. <transition>中进行使用

<transition 
appear
name = "animate_animated animate_bounce"
enter-active-class = "animate_swing"	
leave-active-class = "animate_backOutup"	
	<h2>
        你好啊
    </h2>
</transition>

  1. enter-active-class表示进入动画,leave-active-class表示退出动画

vue脚手架配置代理

方法一

在vue.config.js中添加如下配置:

module.exports ={
    devServer:{
  	proxy:"http://localhost:5000"
}
}

说明:

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可。
  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)

方法二

编写vue.config.js配置具体代理规则:

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
   changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
   changeOrigin默认值为true
*/

说明:

  1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
  2. 缺点:配置略微繁琐,请求资源时必须加前缀。

利用Axios来提交请求

//导入axios,需要进行安装yarn add axios
import axios from 'axios'
getStudents(){
    axios.get("http://localhost:8080/students").then(
    	//请求成功做的事情
        //请求成功的数据:response.data
        response =>(
        	console.log("请求成功了")
            
        )
        //请求失败做的事情
        error =>(
        	//失败信息:error.message
    		console.log("请求失败了")
    	)
    )
}

Vue-resource

对Ajax的封装,用于发送请求,官方已经不再维护了,推荐使用Axios

  • 使用vueResource插件

//main.js
//使用插件,在全局当中就可以使用了
Vue.use(vueResource)

  • 进行get请求

getStudents(){
    this.$http.get("http://localhost:8080/students").then(
    	//请求成功做的事情
        //请求成功的数据:response.data
        response =>(
        	console.log("请求成功了")
            
        )
        //请求失败做的事情
        error =>(
        	//失败信息:error.message
    		console.log("请求失败了")
    	)
    )
}

插槽

  1. 作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件
  2. 分类:默认插槽、具名插槽、作用域插槽
  3. 使用方式:
    1. 默认插槽:父组件中:
      <Category>
      <!–可以把里面的元素插入到插槽当中–>
      <div>html结构1</div>
      </Category>
      子组件中:
      <template>
      <div>
      <!– 定义插槽 –>
      <slot>插槽默认内容…</slot>
      </div>
      </template>
    2. 具名插槽:父组件中:
      <Category>
      <!–template不会被解析,会被脱掉–>
      <template slot=”center”>
      <div>html结构1</div>
      </template>

      <!–v-slot:foote只能在template标签当中使用–>
      <template v-slot:footer>
      <div>html结构2</div>
      </template>
      </Category>
      子组件中:
      <template>
      <div>
      <!– 定义插槽,可以在一个插槽当中放多个标签内容 –>
      <slot name=”center”>插槽默认内容…</slot>
      <slot name=”footer”>插槽默认内容…</slot>
      </div>
      </template>

    3. 作用域插槽:
      1. 理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定),使用者可以改变数据展示的结构
      2. 具体编码:父组件中:
        <Category>
        <template scope=”scopeData”>
        <!– 生成的是ul列表,使用者使用的是ul结构–>
        <ul>
        <li v-for=”g in scopeData.games” :key=”g”>{{g}}</li>
        </ul>
        </template>
        </Category>

        <Category>
        <!–要使用作用域插槽,必须使用template进行包裹–>
        <template slot-scope=”scopeData”>
        <!– 生成的是h4标题,使用者使用的h4结构–>
        <h4 v-for=”g in scopeData.games” :key=”g”>{{g}}</h4>
        </template>
        </Category>
        子组件中:
        <template>
        <div>
        <slot :games=”games”></slot>
        </div>
        </template>

        <script>
        export default {
        name:’Category’,
        props:[‘title’],
        //数据在子组件自身
        data() {
        return {
        games:[‘红色警戒’,’穿越火线’,’劲舞团’,’超级玛丽’]
        }
        },
        }
        </script>

  • 如果是video标签,则可以在标签上添加一个controls属性,即可出现页面当中的控制按钮

© 版权声明
THE END
喜欢就支持以下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容