Vue2（二）

最新推荐文章于 2023-08-26 17:18:24 发布

擅长开发Bug的Mr.NaCl

最新推荐文章于 2023-08-26 17:18:24 发布

阅读量183

点赞数

分类专栏：笔记 Vue2 文章标签： vue.js javascript 前端 1024程序员节

本文链接：https://blog.csdn.net/lushixuan12345/article/details/120890814

版权

笔记同时被 2 个专栏收录

105 篇文章 10 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

Vue

一、Vue核心
- 点此处去查看·Vue核心
二、Vue组件化编程
三、Vue脚手架
四、Vue中的ajax
- 点此处去查看·Vue中的ajax
五、Vuex
- 点此处去查看·Vuex
六、Vue-router
- 点此处去查看·Vuex
七、Vue UI组件库
- 点此处去查看·Vuex
八、Vue2案例的全部代码
- 点此处去·下载代码

一、Vue核心

点此处去查看·Vue核心

二、Vue组件化编程

2.1 组件

理解:用来实现局部(特定)功能效果的代码集合(html/css/js/image…）
为什么:一个界面的功能很复杂
作用:复用编码，简化项目编码,提高运行效率

2.2 非单文件组件

一个文件中包含有n个组件。

2.2.1 基本使用

Vue中使用组件的三大步骤:
(1)定义组件(创建组件)
(2)注册组件
(3)使用组件(写组件标签)
如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，
但区别如下:
1.el不要写，为什么?—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2.data必须写成函数，为什么?
避免组件被复用时，数据存在引用关系。
备注:使用template可以配置组件结构。
如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(‘组件名’,组件)
编写组件标签:

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!--第三步:编写组件标签-->
        <us1></us1>
        <br>
        <us2></us2>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。
        
        //第一步：创建用户1组件
        const user1=Vue.extend({
            // el: '#root',//组件定义时 ，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
            template:`
                <div>
                    <h2>用户名：{{name1}}</h2>
                    <h2>性别：{{sex1}}</h2> 
                    <button @click="showName">点我提示名字 </button>   
                </div>           
            `,
            data(){
                return{
                    name1:'YoRHa',
                    sex1:"男",
                }
            },
            methods: {
                showName(){
                    alert(this.name1)
                }
            },
        })
        //第一步：创建用户2组件
        const user2=Vue.extend({
            template:`
                <div>
                    <h2>用户名：{{name2}}</h2>
                    <h2>性别：{{sex2}}</h2>    
                </div>     
            `,
            data(){
                return{
                    name2:'Lushixuan',
                    sex2:"男"
                }
            }
        })
      
        //创建Vue实例
        new Vue({
            el:'#root',  
            //第二步：注册组件（局部注册）
            components:{
                //key:value
                us1:user1,
                us2:user2
            }
        })
         //全局注册红件
         Vue.component('us3' ,user1)

    </script>
        
</body>

2.2.2 注意项

关于组件名:
一个单词组成:
第一种写法(首字母小写): school第二种写法(首字母大写):School多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool（需要Vue脚手架支持)备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签;
第一种写法:第二种写法:
备注:不用使用脚手架时，会导致后续组件不能渲染。
一个简写方式:
const school = Vue.extend(options）可简写为: const school = options

2.2.3 组件的嵌套

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue在启动时生成生产提示。   

         //创建student组件
         const student=Vue.extend({
            template:`
                <div>
                    <h2>学生：{{student}}</h2>
                    <h2>年龄：{{age}}</h2> 
                </div>           
            `,
            data(){
                return{
                    student:'YoRHa',
                    age:18,
                }
            },
        })
        //创建用户1组件
        const user1=Vue.extend({
            template:`
                <div>
                    <h2>用户名：{{name1}}</h2>
                    <h2>性别：{{sex1}}</h2> 
                    <student></student>
                </div>           
            `,
            data(){
                return{
                    name1:'YoRHa',
                    sex1:"男",
                }
            },
            components:{
                student,
            }
        })
         //创建hello组件
         const hello=Vue.extend({
            template:`
                <div>
                    <h2>hello</h2>
                </div>           
            `,
        })
        //创建app组件
        const app=Vue.extend({
            template:`
                <div>
                    <hello></hello>
                    <us1></us1>
                </div>           
            `,
            components:{
                hello,
                us1:user1
            }
        })
        
      
        //创建Vue实例
        new Vue({
            template:`<app></app>`,
            el:'#root',  
            //注册组件（局部注册）
            components:{
                app
            }
        })
    </script>  
</body>

2.2.4 Vuecomponent构造函数

组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)。
特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent! !!!
关于this指向:
(1).组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象(vm)】。
VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象）。 Vue的实例对象，以后简称vm。

2.2.5 一个重要的内置关系

VueComponent.prototype. _ proto _ === Vue. prototype

2.3 单文件组件

一个文件中只包含一个组件。（a.vue、b.vue）

<template>
    <!-- 组件的结构 -->
    <div class="c1">
        <h2>用户名：{{name1}}</h2>
        <h2>性别：{{sex1}}</h2> 
        <button @click="showName">点我提示名字 </button>   
    </div>     
</template>

<script>
    //组件交互相关的代码（数据、方法等等)
    //export ES6的暴露 类似于接口
    //此处 Vue.extend省略写法
     export default {
        name:'User',
        data(){
            return{
                name1:'YoRHa',
                sex1:"男",
            }
        },
        methods: {
            showName(){
            alert(this.name1)
            }
        },
     }
    
</script>

<style>
    /* 组件的样式 */
    .c1{
        background-color: aqua;
    }
</style>

三、Vue脚手架

3.1 安装

安装node.js
node.js官网
切换npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

第一步：安装 @vue/cli （仅第一次执行）

npm install  -g @vue/cli

第二步:切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx

第三步:启动项目

npm run serve

3.2 目录

在这里插入图片描述

3.2.1

vue.js 与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue，包含:核心功能+模板解析器。
(2) .vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用 render函数接收到的createElement函数去指定具体内容。

3.2.3 修改默认配置

脚手架隐藏了webpack的相关配置，输入下面指令显示

vue inspect > output.js

vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的(和package.json同级的)根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的 vue字段，但是注意这种写法需要你严格遵照JSON的格式来写。
具体定制内容

3.3 ref

被用来给元素或子组件注册引用信息（id的替代者)
应用在html标签上获取的是真实DOM元素。应用在组件标签上是组件实例对象(vc)
使用方式:
打标识:
…

或< user ref=“xxx”>获取: this.$refs.xxx

<template>
  <div>
    <h1 v-text="msg" ref="msg"></h1>
    <button @click="show">点我输出上方的DOM元素</button>
    <User></User>
  </div>
</template>

<script>
import User from './components/User.vue'
export default {
    name:'App',
    data() {
        return {
            msg:'欢迎'
        }
    },
    methods: {
        show(){
            console.log(this.$refs.msg)
        }
    },
  components: { User },

}
</script>

<style>

</style>

3.3 props

功能:让组件接收外部传过来的数据

功能:让组件接收外部传过来的数据
(1).传递数据:
	<Demo name="xxx" />
(2).接收数据:
	第一种方式（只接收）:
		props: [ "name ']
	第二种方式（限制类型）:
		props:{
			name : Number
		}
	第三种方式(限制类型、限制必要性、指定默认值)∶
		props:{
			name:{
			type:String，//类型
			required:true，//必要性
			default:'老王’//默认值
		}
备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告,
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

Student.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>性别{{sex}}</h2>
    <h2>年龄{{age+1}}</h2>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
           
        }
    },
   // props:['name','sex','age'] //简单接收

   //接收的同时对数据进行类型限制
  //  props:{
  //    name:String,
  //    sex:String,
  //    age:Number
  //  }

  //接收的同时对数据进行类型限制+默认值的指定+必要性的限制
  props:{
    name:{
      type:String,//name的类型是字符串
      required:true //name是必要的
    },
    age:{
      type :Number,
      default:99 //没有接收值，默认
    },
    sex:{
      type:String,
      required:true 
    }
  }
}
</script>

<style>
</style>

App.vue

<template>
  <div>
    <Student name="李四" sex="女" :age="18"/>
  </div>
</template>

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

}
</script>

<style>

</style>

3.3 mixin

功能:可以把说个组件共用的配置提取成一个混入对象使用方式:
第一步定义混合,例如:
	{
		data(){....},
		methods:{....}
	}
第二步使用混入，例如:
(1).全局混入:Vue.mixin(xxx)
(2).局部混入:mixins: [ " xxx ']

mixin.js

export const a={
    methods:{
        show(){
          alert(this.name)
        }
      }
}

Student.vue

<template>
  <div >
    <h2 @click="show">姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
  </div>
</template>

<script>
import {a} from '../mixin'
export default {
    name:'Student',
    data() {
        return {
           name:"YoRHa",
           age:18
        }
    },
    mixins:[a]
}
</script>

<style>
</style>

3.3 插件

功能:用于增强Vue
本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件:
	对象.install = function (Vue,options) {
		// 1.添加全局过滤器
			Vue.filter(....)
		// 2。添加全局指令
			Vue.directive( ....)
		// 3．配置全局混入
			Vue.mixin(....)
		//4。添加实例方法
			Vue.prototype.$myMethod = function () {...}
			Vue.prototype.$myProperty = xxxX
使用插件:Vue.use()

插件代码

export default{
    install(Vue){
        //全局过滤器
        Vue.filter( "myslice" ,function(value){
            return value.slice(0,2)
        })

    }
}

使用插件

import Vue from "vue";
import App from './App.vue';
Vue.config.productionTip = false;

import plugins from './pugins'
Vue.use(plugins)

new Vue({
    render: h => h(App),
  }).$mount('#app')

3.4 scoped

scoped样式
作用:让样式在局部生效，防止冲突。
写法:

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

3.5 待办案例

3.5.1 案例

3.5.2 总结

组件化编码流程:
(1).拆分静态组件:组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件:考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用:
1). 一个组件在用:放在组件自身即可。
2).一些组件在用:放在他们共同的父组件上(状态提升)
(3).实现交互:从绑定事件开始。
props适用于:
(1).父组件==>子组件通信
(2).子组件==>父组件通信(要求父先给子一个函数)
使用v-model时要切记
: v-model绑定的值不能是props传过来的值，因为props是不可以修改的!
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

3.6 浏览器的本地存储

存储内容大小一般支5MB左右(不同浏览器可能还不一样)
浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
相关API:
1）. xxxxxStorage.setItem( ’ key’, 'value ’ ) ;
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2）. xxxxxStorage.getItem( " person ’ );
该方法接受一个键名作为参数，返回键名对应的值。
3）. xxxxxStorage.removeItem( ’ key ’ );
该方法接受一个键名作为参数，并把该键名从存储中删除。
4）. xxxxxStorage.clear()
该方法会清空存储中的所有数据。
备注:
1）.SessionStorage存储的内容会随着浏览器窗口关闭而消失。
2）.LocalStorage存储的内容，需要手动清除才会消失。
3）. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getltem的返回值是null。
4）. 3SON. parse(nul1)的结果依然是null。

3.7 组件自定义事件

一种组件间通信的方式，适用于:子组件===>父组件
使用场景:A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中)。
绑定自定义事件:
1）.第一种方式，在父组件中:<Demo @xxxx=“test”/>或
2）.第二种方式，在父组件中:

<Demo ref="demo" />
.....
mounted(){
	this.$refs.xxxx.$on( "xxxx' ,this.test)
}

3）.若想让自定义事件只能触发一次，可以使用once修饰符，或 $ once方法。
4. 触发自定义事件:this.$ emit( ‘atguigu’ ,数据)
5. 解绑自定义事件this.$ off( ’ atguigu ')
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
7.注意:通过 this.$.refs.xx. son(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

Strudent.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
    <button @click="sendStudentName">把姓名给App</button>
    <button @click="unbind">解绑fun事件</button>

  </div>
</template>

<script>
export default {
    name:'Student',
    props:['getStudentName'],
    data() {
        return {
           name:"lushixuan",
           age:18
        }
    },
    methods: {
      sendStudentName(){
        //触发Student1组件实例身上的fun事件
        this.$emit('fun',this.name)
      },
      unbind(){
        this.$off("fun")
        //this.$off([ "fun " , " fun1"])//解绑多个自定义事件

      },
    }
}
</script>

<style>
</style>

App.vue

<template>
  <div>
    <h2>{{msg}}</h2>
    <!--通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
    <Student :getStudentName="getStudentName"/>
    <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传通教据 v-on/@-->
    <!-- <Student1 v-on:fun="demo"/>-->
     <!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传通教据 tef-->
    <Student1 ref="student" />
  </div>
</template>

<script>
import Student from './components/Student.vue'
import Student1 from './components/Student1.vue'
export default {
  name:'App',
  data() {
    return {
      msg:'你好',
    }
  },
  components: { Student,Student1  },
  methods: {
        getStudentName(name){
     console.log( "App收到了学生名: ",name);
    },
        demo(name){
         console.log( "demo被调用了");
         console.log( "App收到了学生名: ",name);
    },
  },
  mounted() {
    this.$refs.student.$on('fun',this.demo)
  },

}
</script>

<style>

</style>

3.8 全局事件总线

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去解绑当前组件所用到的事件。

main.js

import Vue from "vue";
import App from './App.vue';
Vue.config.productionTip = false;




new Vue({
    render: h => h(App),
    beforeCreate(){
      Vue.prototype.x=this //安装全局事件总线
    }
  }).$mount('#app')

StudentA.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
    <button @click="sendName">把姓名给StudentB组件</button>

  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
           name:"YoRHa",
           age:18
        }
    },
    methods:{
      sendName(){
        this.x.$emit('demo',this.name)
      }
    },
}
</script>

<style>
</style>

StudentB.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
  </div>
</template>

<script>
export default {
    name:'Student',
    data() {
        return {
           name:"lushixuan",
           age:18
        }
    },
    mounted() {
      this.x.$on('demo',(data)=>{
          console.log('我是StudentB组件,收到了数据',data)
      })
    },
}
</script>

<style>
</style>

3.9 消息信息与订阅

1.一种组件间通信的方式，适用于任意组件间通信。
2.使用步骤:
1.安装pubsub: npm i pubsub-js
2.引入: import pubsub from 'pubsub-js'
3.接收数据:A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
	demo(data){......}
......
mounted() {
	this.pid = pubsub.subscribe('demo' ,this.demo)//订阅消息
}

4.提供数据:pubsub. publish( 'xxx’,数据)
5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅
StudentA.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
    <button @click="sendName">把姓名给StudentB组件</button>

  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:'Student',
    data() {
        return {
           name:"YoRHa",
           age:18
        }
    },
    methods:{
      sendName(){
        pubsub.publish('demo',this.name)
      }
    },
   
}
</script>

<style>
</style>

StudentB.vue

<template>
  <div >
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
  </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:'Student',
    data() {
        return {
           name:"lushixuan",
           age:18
        }
    },
    mounted() {
     this.pubid=pubsub.subscribe('demo',(msg,data)=>{
       console.log('有人订阅了demo事件  值：'+data )
     })
    },
     beforeDestroy() {
      pubsub.unsubscribe(this.pubid)
    },
}
</script>

<style>
</style>

3.10 nextTick

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

3.11 过渡与动画

3.11.1 动画

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="demo" :appear="true">
        <h1 v-show="isShow">你好啊!</h1>
    </transition>
</div>

</template>

<script>
export default {
    name:'Test',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h1{
        background-color: orange;
    }
    .demo-enter-active{
        animation: dh 1s;
    }
    .demo-leave-active{
        animation: dh 1s reverse;
    }
    @keyframes dh {
        from{
            transform: translatex(-100%);
        }
        to{
            transform: translatex(0px);
        }
}

</style>

3.11.2 过渡

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group name="demo" :appear="true">
        <h1 v-show="!isShow" key="1">你好啊!</h1>
        <h1 v-show="isShow" key="2">YoRHa!</h1>
    </transition-group>
</div>

</template>

<script>
export default {
    name:'Test',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h1{
        background-color: orange;
        transition: 1s linear;

    }
    /*进入的起点*/
    .demo-enter{
        transform: translateX(-100%);
    }
    /*进入的终点*/
    .demo-enter-to{
        transform: translatex(0);
    }
    /*离开的起点*/
    .demo-leave{
        transform: translatex( 0);
    }
    /*离开的终点*/
    .demo-leave-to{
        transform: translatex(-100%); 
    }

</style>

3.11.3 第三方

npm install animate.css

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group 
        appear
        name="animate__animated animate__bounce" 
        enter-active-class="animate__swing"
        leave-active-class="animate__backInUp"
    >
        <h1 v-show="isShow" key="1">你好啊!</h1>
        <h1 v-show="isShow" key="2">lushixuan</h1>
    </transition-group>
</div>

</template>

<script>
import 'animate.css'
export default {
    name:'Test',
    data() {
        return {
            isShow:true
        }
    },
}
</script>

<style scoped>
    h1{
        background-color: orange;
        transition: 1s linear;

    }
   

</style>

3.11.4 总结

一、准备好样式:
1）元素进入的样式:

v-enter:进入的起点
v-enter-active:进入过程中
v-enter-to:进入的终点

2）元素离开的样式:

v-leave:离开的起点
v-leave-active:离开过程中
3.v-leave-to:离开的终点

二、使用包裹要过度的元素，并配置name属性:

<transition name="hello">
<h1 v-show="isShow">你好啊!</h1>
</transition>

三、备注:若有多个元素需要过度，则需要使用:<transition-group>，且每个元愫都要指定 key值。

四、Vue中的ajax

点此处去查看·Vue中的ajax

五、Vuex

点此处去查看·Vuex

六、Vue-router

点此处去查看·Vuex

七、Vue UI组件库

点此处去查看·Vuex

八、Vue2案例的全部代码

点此处去·下载代码

擅长开发Bug的Mr.NaCl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2（二）

Vue一、Vue核心二、Vue组件化编程三、Vue脚手架四、Vue中的ajax五、Vuex六、Vue-router七、Vue UI组件库一、Vue核心Vue核心二、Vue组件化编程三、Vue脚手架四、Vue中的ajax五、Vuex六、Vue-router七、Vue UI组件库...
复制链接

扫一扫