# vue_pinduoduo

**Repository Path**: javafdx/vue_pinduoduo

## Basic Information

- **Project Name**: vue_pinduoduo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

####
vue-resource----get--post请求
this.get ('http://127.0.0./api/getStudent').then(response => {
    this.student = response.
}, response => {
    alert('网络发生错误')
    })
    
this.$http.post('', this.提交的表单, {emulateJSON: true}).then(response => {
}, response => {
})    
------------------
####
数据本地化
保存--把对象转字符串
localStorage.setItem('student', JSON.stringfy(this.students))

获取---字符串转对象
this.student = JSON.parse(window.localStorage.getItem('student') || '[]')
---------------------
插数据
this.student.unshift(this.newStudent)
删数据
 this.student.splic(index,1)
 
 
 #####1.修饰符
 .stop阻止冒泡，从内到外
 事件里边还有事件
 
 .prevent
 阻止默认事件- 或者网址跳转
 <a href ='' @click>
 加@click.prevent,不会跳转
 
 先执行父组件，后子组件
 <@click.capture>
 
#####ES6数组方法的使用
forEach  some  filter
--
伪数组转真数组--Array.prototype.slice.call(alList)
将真数组遍历成新数组.forEach(li => {
liheightArr.push(li.)}
)
---
some遍历数组中是否有某个元素-并返回结果true/false
let result = this.dataArr.some((str)=>{
    return str === '某个字段'
})
----
filter-用于把Array的某些元素过滤掉，然后返回剩下的元素
let r = arr.filter((x)=>{
    return x%2!==0
}) 

###---3
创建期间的生命周期函数--beforeCreate--created --beforeMount
运行期间的生命周期函数--beforeUpdate--updated
create--data和method方法有了，但是页面没有被渲染
mounted--组件页面方法全都加载好了
------------------
###子组件传父组件
父：<:data="">data是数组对象
子接收：props: :{data: Arry}
data是方法methods
z子接收：data: Function
----------------------
动态修改样式
:style = "{background: bgColor}"
弹框
window.confirm(`确定要删除${this.todo.title}`)
--------------
清除字符串中的空格
this.title.trim()
--------------------
####
4
计算属性
动态监听计算数量--reduce函数--遍历这个数组，返回一个累加数字，起始值从0开始计算，true累加1,false加0
computed: {
    finishedCount() {
        return this.todos.reduce((total,todo)=> total + (todo.finished?1:0),0)
    }
}
-------------------
####
5-vuex
子组件都可以直接访问state
但是修改需要靠流程--Dispatch-Actions-Commit-Mutations-Mutate-State
在store文件下建立index.js--state.js--actions.js--mutations.js,mutation-types.js--
getters.js
最后在index.js  中集合
import Vue from 'vue'
npm i vuex --save
import Vuex from 'vuex'
Vue.use(Vuex);
引入state
import state form './state'
import mutations form
import actions
import getters
初始化Store
export default new Vuex.Store({
引入后注册
   state,
    
})
----然后在mian.js中引入index.js
import store from './store'
全局挂载
store,
render: h=>h(App)
--------------
将
components:{
    App
},
template: '<App/>'换为另一种注册方式
render: h=>h(App)
-------------
state.js
存放所有的状态
export default {
    todos: [
        {title:'hah',finished: false}
    ]
}
------------------
在子组件中调用
this.$store.dispatch('addTodo',todo)  //调用actions中的一个方法
 ------------------
 actions.js
  import {ADD_TODO} from './mutation-types';
 添加一条记录
 export default {
    addTodo({commit}, todo){ 
        commit(ADD_TODO,{todo}) // 调用mutations中的一个方法,需要第三方mutationtype设置常量
    }
 }
 ------------------
 mutation-type.js
 export const ADD_TODO = 'add_todo'; // 增加一条记录
 ------------------
 mutations.js
 import {ADD_TODO} from './mutation-types';
 export defalut {
    [ADD_TODO](state, {todo}){
        state.todos.unshift(todo); // 相当于this.todos--但是数据存在state中了
    }
 }
 -----------
 gettters.js
 export defalut {
    //已经完成的数量
    finisheCopunt (state) {
        return state.todos.reduce() // 返回一个数
    },
    // 计划总户数量
    totalCount(state) {
        return state.todos.length
    }
 }
 
 组件中接收
 import {mapGetters} from 'Vuex'
 computed： {
        ...mapGetters(['finisheCopunt','totalCount'])
 } 
 ---------
 界面标签里拿直接==$store.dispatch('方法名')
 this.$store.
 -------------
 5-2
 项目--day2--demo4-lk_pdd
 ----安装css预编译器---stylus npm i stylus-loader --save dev
 ----初始化样式文件,默认样式---直接复制粘贴-reset.css,,全局引入index.html
 ----移动端项目必须配置：视口   点击响应延迟3s
 都在index.js中配置
 ------
 --------------------------------