饿了么UI使用，vuex使用，router使用，localstorage和sessionstorage和cookie

1 elementui使用

cnpm isntall -S element-ui@2.9

<template>
  <div>
    <h1>按钮的使用</h1>
    <el-button-group>
      <el-button type="primary" icon="el-icon-edit"></el-button>
      <el-button type="primary" icon="el-icon-share" @click="handleClick"></el-button>
      <el-button type="primary" icon="el-icon-delete"></el-button>
    </el-button-group>
    <hr>

    <h1>带链接的文字</h1>
    <div>
      <el-link href="https://element.eleme.io" target="_blank" type="danger">点我看美女</el-link>
    </div>

    <h1>Radio单选</h1>
    <el-radio v-model="radio" label="1">男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio>

    <h1>input</h1>
    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 130px">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleClick2"></el-button>
      </el-input>
    </div>


    <h1>表格</h1>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <h1>message消息提示</h1>
    <el-button :plain="true" @click="open4">错误</el-button>
  </div>
</template>

<script>
export default {
  name: "ElementuiView",
  data() {
    return {
      radio: '1',
      input3: '',
      select: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleClick() {
      location.href = 'http://www.baidu.com'
    },
    handleClick2() {
      console.log(this.select)
      console.log(this.input3)
    },
    open4() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>

2 vuex使用

# vuex :状态管理器---》存数据(变量)的地方，所有组件都可以操作
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

store:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 10,
        goods: []
    },
    mutations: {
        mAdd(state, count) {
            console.log(state)
            console.log(count)
            state.num = state.num + count

        },
        addShopping(state, name) {
            state.goods.push(name)
        }
    },
    actions: {
        // 至少要有一个参数，context上下文对象,触发mutations中函数执行，或者直接改state中数据都可以
        add(context, count) {
            // 使用commit，触发mutations中得函数
            // console.log(context)
            // console.log(count)
            context.commit('mAdd', count)  // 会触发mutations中得mAdd的执行
        },
        addShopping(context, name) {
            // 这里起ajax请求，检查name库存够不够
            //假设库存不够，弹个不够的消息
            // alert('库存不够了')
            // return
            context.commit('addShopping', name)

        }
    }
})

methods: {
    handleAdd() {
      // 1 直接操作
      // this.$store.state.num += 1
      // 2 正统方式，通过dispatch触发actions
      // this.$store.dispatch('add', 2)  //add 必须是action中得函数


      // 3 直接操作mutations
      this.$store.commit('mAdd', 3)

    },
    add(name) {
      //1 直接操作
      // this.$store.state.goods.push(name)

      //2 正常套路
      this.$store.dispatch('addShopping', name)

    }
  },
  components: {ShppingCard}

}

3 Router使用

# 提倡单页面应用，需要做页面的跳转----》借助于Router实现页面组件的跳转


# 1 简单使用
	-页面跳转（咱们之前学过了）
    -写个页面组件
    -在router--->index.js--->routes数组中加入一个路由即可
    
# 2 组件中实现页面跳转
	-两种方式
    	-方式一：使用 router-link 标签，to 地址
         	<router-link to="/about"></router-link>
		-方式二：js控制
        	this.$router.push('/about')
            
            
            
# 3 路由跳转时，可以使用对象
	-1  通过对象跳转路由name形式： <router-link :to="{name:'about'}">
	-2 通过对象跳转路由path形式： <router-link :to="{path:'/about'}">
    -3 对象中可以有query属性，是个对象类型，会把里面的key-value拼到路径后面
    -4 在另一个页面中取出地址栏中数据：console.log(this.$route.query)
    -5 这种传递方式和 3  一样 <router-link to="/about?name=lqz&age=19">
    -6 注意区分：
    	this.$route：当前路由对象，当前路径，取传递数据。。。
        this.$router：整个路由对象，主要做跳转用
        
    -7 路径中分割出 参数
    	-配置：    
        	{
            path: '/detail/:pk',
            name: 'detail',
            component: DetailView
        	},
        -在路由中取：
        	this.$route.params.pk
            
    -8 路由跳转时，使用 7 的样子
    	-this.$router.push({name: 'detail', params: {pk: 999}})
        -<router-link :to="{name:'detail',params:{pk:88}}">
        
        
 # 4 this.router 的一些方法
    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
    this.$router.back(): 请求(返回)上一个记录路由
    this.$router.go(-1): 请求(返回)上一个记录路由
    this.$router.go(1): 请求下一个记录路由

3.2 多级路由

# 使用步骤：
	- 1 新建一个页面组件（LqzView），配置路由
    	  {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
        },
    -2 在页面中，想再显示页面组件，实现点击切换的效果
    	   <h1>lqz页面</h1>
            <router-link to="lqz01">
              <button>lqz-01</button>
            </router-link>
            <router-link to="lqz02">
              <button>lqz-02</button>
            </router-link>

            <router-view>
            # 以后这里变换页面组件，多级路由
            </router-view>
    -3 新建两个页面组件，Lqz01.vue，Lqz02.vue，配置路由children
        {
            path: '/lqz',
            name: 'lqz',
            component: LqzView,
            children: [ //通过children配置子级路由
                {
                    path: 'lqz01', //此处一定不要写：/news
                    component: Lqz01
                },
                {
                    path: 'lqz02',//此处一定不要写：/message
                    component: Lqz02
                }
            ]
        },

3.3 路由守卫

# 前置路由守卫，再进入路由之前做判断
# 写在router-index.js中，以后访问任意一个路由，都会执行这个代码
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // 要是访问lqz01，都不能跳转'
    // 如果没有登录，不能访问
    if (to.path == '/lqz/lqz01') {
        alert('你灭有权限')
    } else {
        next() # 继续访问
    }

4 localstorage和sessionstorage,和cookie

# 前端存储数据
	- 登录成功，有token，存本地
    - 不登陆加购物车
    
# 前端可以存数据的位置：
	localstorage：永久存储，除非你删除，关闭浏览器，再打开还会在
    sessionstorage：只在当前会话生效，关闭浏览器，就没了
    cookie：有过期时间，到了过期时间，自动删除
    
# 操作这三个位置

<template>
  <div class="home">
    <h1>操作localstorage,永久存储</h1>
    <button @click="addLocalstorage">增加</button>
    <button @click="getLocalstorage">查</button>
    <button @click="deleteLocalstorage">删除</button>
    <h1>操作sessiostorage,当前会话，关闭浏览器</h1>
    <button @click="addSessiostorage">增加</button>
    <button @click="getSessiostorage">查</button>
    <button @click="deleteSessiostorage">删除</button>


    <h1>操作cookie,有过期时间</h1>
    <button @click="addCookie">增加</button>
    <button @click="getCookie">查</button>
    <button @click="deleteCookie">删除</button>

  </div>
</template>

<script>

export default {
  name: 'HomeView',
  methods: {
    addLocalstorage() {
      var userinfo = {name: 'lqz', age: 19}
      localStorage.setItem('userinfo', JSON.stringify(userinfo))

    },
    getLocalstorage() {
      var userinfo = localStorage.getItem('userinfo')
      console.log(JSON.parse(userinfo).name)

    },
    deleteLocalstorage() {
      localStorage.clear()
      localStorage.removeItem('userinfo')

    },
    addSessiostorage() {
      var userinfo = {name: '彭于晏', age: 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))

    },
    getSessiostorage() {
      var userinfo = sessionStorage.getItem('userinfo')
      console.log(JSON.parse(userinfo).name)

    },
    deleteSessiostorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('userinfo')

    },
    addCookie() {
      // 需要借助于第三方  vue-cookies
      // cnpm install -S vue-cookies
      this.$cookies.set('name', '刘亦菲', '300s')

    },
    getCookie() {
      console.log(this.$cookies.get('name'))

    },
    deleteCookie() {
      this.$cookies.remove('name')

    },
  }


}
</script>