VUE的简单介绍与学习

一、VUE的核心是“组件系统”以及“数据驱动”：

个人认为数据驱动主要是代替原生js中的dom操作，如document.getElementById()，这样可以让我们更快速的开发；组件系统在使用中主要的作用是可以“复用”，即一个组件多次使用，在实际开发中，你使用组件后，你会发现，你的代码也会变得清晰，更易读。

二、vue的全家桶：vue  vuex(状态管理)  vue-router(路由)  axios  vue-cli(脚手架)

基本介绍一下：

vuex：即状态管理，我们可以理解为“全局变量”，使用vuex后，其state里的可以在整个项目中使用，但是尽量能不用就不用

vue-router：路由，在spa（单页面）中显得尤为重要，主要进行页面指定位置的切换，与component（组件）配合使用

axios：通俗来讲，你可以理解为ajax异步，与后台进行数据交互是用到

vue-clic：脚手架没有什么好说的，用来快捷开发vue项目的

三、vue项目的搭建：

安装：
1、npm install -g @vue/cli    //脚手架
2、vue --version        //安装后可以查看版本
3、npm install -g @vue/cli-service-global    //vue脚手架的依赖

创建项目：
控制台创建项目：
    vue create 项目名
    接下来选择默认即可
图形化界面创建项目：
    vue ui   将图形界面调出
    创建项目即可，同样也是使用默认

运行项目：
    npm run serve

提示：如果想要改变指令，可以在package.json中“script”中修改

四、接下来就讲一些经常使用的知识：

1、组件component：

注意：组件中的data必须使用通过方法返回的对象

全局定义组件:

Vue.component('',{

//该对象与vue实例中的基本一致

//注意：

data:function(){

              return  {}

        }

})

局部定义组件：

在vue实例中定义components属性，该属性与data、methods同级

new Vue({

data:{}

components:{

"组件名":组件对象

}

})

2、watch侦听器：

作用：主要是用来监听data中定义的属性，或者说侦听已有的“值”的变化

什么时候使用？

一般来讲，当该值影响了多个值的时候使用watch

data:{

mess:'这是watch侦听的属性'

},

watch:{

"mess":function(newValue,oldValue){

     //当mess发生变化就会调用该方法

}

}

3、既然讲了watch就少不了computed(计算属性)：

watch与computed基本相同，一般来说更推荐使用计算属性，因为计算属性可以缓存，二侦听器不行，注意特殊情况特殊对待

watch与computed也有不同点，computed计算属性是自己新建的，计算属性可以有两个方法，即get、set，默认是get

computed:{

"newMess":function(){

//默认get

},

"newInfo":{

get:function(){},

set:function(newVal){}

}

}

4、路由router：

const router = new VueRouter({

//路由配置项

routes:[{

    path:"路径"，

    name:"别名"，

    component:"组件"，//该路径跳转后显示的组件

    children:[{   //主要在路由嵌套时使用  --- 子路由

    //子路由的配置项与routes相同，值得注意的是，子路由的path中开头不要有  ‘/’

    }]

}]

}）

5、动态路由：

作用：可以用来传值

动态路由的定义：在path路径中加上   :data    data是自己命名的属性名

path:'/login/:data'

data的获取：

----可以在组件中可以通过  this.$route.params  来得到这个“键值对”

----可以通过props:['data']获取，但是要在对应的路由配置项中定义  props:true，才能获取

另一种传值方法：url，/login?name=zs     获取值：this.$route.query  得到"键值对"

6、自定义指令directive：

作用

Vue.directive('指令名',{

//可以定义bind，inserted钩子函数   里面有一个参数el（当前对象）

})

//也可以定义局部：

directives:{

"dir":{}

}

7、父组件给子组件传值：

主要是通过在子组件中定义prop:[]  数组中放属性，在子组件中使用

如何传值：

<子组件 :prop中的属性='父组件的值，如data'></子组件>

8、子组件使用父组件的方法：

主要通过在子组件中定义的methods中使用this.$emit('用来接收父组件方法的属性',参数...) 

$emit中从第二个值开始，便是父组件方法的参数

如何使用：

<子组件 @接收父组件的方法的属性="父组件方法"></子组件>

在子组件中便可以使用定义了this.$emit方法的method了

9、兄弟组件传值：

一般使用bus传值，即定义一个bus.js文件，里面写两条代码：

import Vue from 'vue'

export default new Vue()

在子组件中引入bus，然后通过：

bus.$emit("方法",值)   ----传递值

bus.$on('方法',function(参数))  ----接收值

另一种方法：子组件---->父组件----->子组件

10、vuex状态管理：

五种状态：

state:  存储状态

getter:  获取状态，可以理解为vue实例中的计算属性

mutation:  提交状态更新的唯一方法，由于在该方法中无法使用this关键字，所以通过自带参数state，调用“状态”

action：与mutation一致，但是action是通过mutation提交状态更新，一般在action中写异步

model：分割

在组件中如何使用状态：

获取 {{$store.getters.getCount}}   this.$store.getters.getCount

提交：（在方法中调用）

注意：commit只有两个参数，如想要传递多个参数，可以通过对象或数组
重要：commit只会调用mutations中的方法
this.$store.commit('mutations方法', '方法的参数')

注意：dispatch只有两个参数，如想要传递多个参数，可以通过对象或数组
重要：dispatch只会调用actions中的方法
this.$store.dispatch('actions方法','方法的参数')

11、一些常用的指令：

v-model：数据双向绑定

v-if：判断

v-for：循环

v-on：绑定方法   简写 --- @

v-bind：绑定属性   简写 --- :

v-show：判断

v-if 和 v-show的区别：v-if 是否渲染元素，v-show是通过css属性display控制是否显示

 

VUE使开发变得更快捷、更方便，目前来说前端的三大框架

 

angular、react、vue，

企业最普遍使用的是vue和react，angular比较适用于大型项目，

大多数前端开发者都会掌握其中两个框架。

以上就是vue的简单介绍，第一次发文，欢迎指点

 

 

 

 

 

 

本文地址：https://blog.csdn.net/weixin_44066182/article/details/107295734