Vue 项目搭建流程和使用大全( 二 )


但是当数据中没有存在时,我们需要兼容 JSON.parse(.(key)||'[]')
8.组件的注册
局部组件:

Vue 项目搭建流程和使用大全

文章插图
全局组件:
Vue 项目搭建流程和使用大全

文章插图

Vue 项目搭建流程和使用大全

文章插图
9.如何给组件定义自动义属性并获取
在vue中,设置自定义属性使用 :data-"属性名"
获取自定义属性值:$event...属性名
10.获取 内部嵌套的的index $event..
VUEX
vuex 是一种状态管理模式,它采用集中式存储管理应用的所有的组件状态 (Vuex的状态存储是响应式的)
状态管理模式
state 驱动应用的数据源
view 将state映射到试图上
响应在view上的state的变化
实例store
state:状态数 在组件中获取Vuex的状态 :{count(){this.$store.state.count}}
帮助计算属性 ...(["count"]) "count"相当于 store.state.count
: 计算store的属性 辅助函数仅仅是将store中的映射到局部计算属性
: 通过提交,更改Vuex的store中的状态,每个都有一个事件类型(type)和一个回调函数() 。
会接受state作为第一个参数
:提交,而不是直接改变state;包含任意异步操作
函数接收一个与store实例具有相同方法和属性的对象,可以通过调用mit提交一个,或者通过.state 和 . 来获取state和 。对象不是store对象本身
Vuex的使用过程
Vue from “vue”
Vuex from "Vuex"
Vue.use(Vuex)创建store实例
const store = new Vuex.Store({state:{cartData:[]},getters:{//在Vuex里面进行数据计算,组件中直接通过mapGetter获取careData(state){return state.cartData = http://www.kingceram.com/post/cartData;}},
//异步数据进行交互的方法,结束以后需要 传给
actions:{getCartData({commit}){Vue.prototype.$axios.post(url).then(res=>{commit("GET_CART_DATA",{cartData:res.data.data})})}},mutations:{GET_CART_DATA(state,{cartData}){return state.cartData = http://www.kingceram.com/post/cartData;}},})
【Vue 项目搭建流程和使用大全】个人博客:欢迎小白前来学习,这里有最基础的前端技术学习总结,本人较菜,大神勿喷