(四)脚手架编程

01370

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
VUE框架网页前端
喜欢就支持以下吧
点赞0 分享
四曲的头像-四曲博客
11.文件系统处理-四曲博客
11.文件系统处理
11.文件系统处理
3年前 821
Python游戏趣味编程（二）-四曲博客
Python游戏趣味编程（二）
Python游戏趣味编程（二）
1年前 550
蓝牙遥控小车-四曲博客
蓝牙遥控小车
蓝牙遥控小车
1年前 532
素数算法-四曲博客
素数算法
素数算法
3年前 457
1.PHP中的变量-四曲博客
1.PHP中的变量
1.PHP中的变量
3年前 455
1.复合类型—数组与字符串-四曲博客
1.复合类型—数组与字符串
1.复合类型—数组与字符串
3年前 394
相关推荐
Express基础知识-四曲博客
Express基础知识
Express基础知识
2年前 195
（一）VUE核心-四曲博客
（一）VUE核心
（一）VUE核心
2年前 152
（二）Vue核心-四曲博客
（二）Vue核心
（二）Vue核心
2年前 149
（三）组件化编程-四曲博客
（三）组件化编程
（三）组件化编程
2年前 144
ES6语法特性-四曲博客
ES6语法特性
ES6语法特性
2年前 140
(四)脚手架编程-四曲博客
(四)脚手架编程
(四)脚手架编程
2年前 137
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][se][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    暂无评论内容