个人认为数据驱动主要是代替原生js中的dom操作，如document.getElementById()，这样可以让我们更快速的开发；组件系统在使用中主要的作用是可以“复用”，即一个组件多次使用，在实际开发中，你使用组件后，你会发现，你的代码也会变得清晰，更易读。
基本介绍一下：
vuex：即状态管理，我们可以理解为“全局变量”，使用vuex后，其state里的可以在整个项目中使用，但是尽量能不用就不用
vue-router：路由，在spa（单页面）中显得尤为重要，主要进行页面指定位置的切换，与component（组件）配合使用
axios：通俗来讲，你可以理解为ajax异步，与后台进行数据交互是用到
vue-clic：脚手架没有什么好说的，用来快捷开发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使开发变得更快捷、更方便，目前来说前端的三大框架
本文地址：https://blog.csdn.net/weixin_44066182/article/details/107295734
如对本文有疑问， 点击进行留言回复！！
150Vue-Router路由概述+基本使用router-view占位符+重定向redirect
我要评论
网友评论