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>

本栏目推荐文章
• Next.js 开发指南 路由篇 | App Router
• 短视频商城系统，session和cookie实现登录
• Vue源码学习(十九)：router基本原理
• localstorage是什么
• 阻止所有cookie什么意思
• cookie是啥
• 什么是浏览器cookie
• Vue-Router: 如何使用路由钩子函数来处理路由变化？
• Vue-Router: 如何在Vue应用程序中使用编程式导航？
• Vue-Router: 如何使用路由元信息来管理路由？

sessionstorage localstorage router cookie vuexsessionstorage localstorage router cookie sessionstorage localstorage cookie sessionstorage localstorage session cookie sessionstorage localstorage elementui router sessionstorage localstorage vuex sessionstorage localstorage cookies vue sessionstorage localstorage cookies 前端sessionstorage localstorage cookies 前端sessionstorage localstorage cookie sessionstorage localstorage