目录
1.Vue的作用:快速的构建前端页面(封装了html、css、js),以工程化的方式进行前端的开发
(5)v-bind:绑定指令(可以给属性绑定变量)。简写为::属性名
(2)在html页面中定义一个容器(如div),作为vue实例的挂载点
(3)在js中创建vue实例,通过实例的el属性与html页面中容器进行绑定
(2)编程式路由:this.$router.push('url')
(2)axios进行二次封装:对请求数据和响应数据进行拦截、对各种请求进行封装
4.Element-ui:ui组件库,快速的构建风格统一的页面
(1)在全局中定义一个state:state本质是一个对象,该对象的属性就是vue组件用到的变量(所有组件共享这些变量)
(2)在vue组件中若要更新state的值,必须通过mutation来进行(只能通过mutation去改变state的状态),只能同步修改(即mutation中的方法都是同步的)
4.工作流程:View ---> Actions ---> Mutations ---> State ---> View
(3)actions:通过actions去触发mutations中的方法,实现对state的异步修改
(4)getters:用于获取state的属性值。类似于state的计算属性
(5)modules:在大型项目中用于管理多个子模块的state
7.示例:通过vuex实现一个计数器(实现异步、同步的数据改变)
(1)在组件中通过commit直接向mutations提交修改state的请求,或者通过dispatch向actions派发请求
(2)mutations通过接收到的请求去修改state的状态
(3)当state的状态发生改变后,组件通过计算属性(computed)获取改变后state,刷新组件
一.vue.js的基本指令
1.Vue的作用:快速的构建前端页面(封装了html、css、js),以工程化的方式进行前端的开发
2.Vue的核心:
(1)组件化:
(2)数据的双向绑定
(3)插槽
3.基本指令
(1)插值表达式:{ {}}
(2)v-for:循环指令
(3)v-if:条件指令
(4)v-show:显示指令
(5)v-bind:绑定指令(可以给属性绑定变量)。简写为::属性名
(6)v-model:表单控件的双向绑定
(7)v-on:事件绑定。简写为: @事件名
4.基本的流程
(1)在html页面中导入vue.js库文件
(2)在html页面中定义一个容器(如div),作为vue实例的挂载点
(3)在js中创建vue实例,通过实例的el属性与html页面中容器进行绑定
const vm = new Vue({
el:'#id值/.class值',
data(){},
methods:{},
computed:{},
watch:{},
filter:{}
})
二.vue.js全家桶开发
1.vue-cil脚手架的作用:快速搭建vue项目
2.vue-router:vue的路由
(1)导航式路由:<router-link to="url"></router-link>
(2)编程式路由:this.$router.push('url')
3.axios的使用:
(1)封装了ajax:将后台数据封装在data属性中
(2)axios进行二次封装:对请求数据和响应数据进行拦截、对各种请求进行封装
4.Element-ui:ui组件库,快速的构建风格统一的页面
5.Echars:数据可视化
6.组件之间的通信:
(1)父子组件:
(2)兄弟组件:
(3)跨级组件:
三.vuex
1.什么是vuex:
是vue项目的状态管理器(状态管理工具)。vue项目的状态是通过vue实例(组件)绑定的变量来体现。所以也可以说vuex是用来管理vue项目中的变量(vue项目中的组件可以访问vuex中管理的变量---方便了组建的通信)。