10.vue实战--form表单属性绑定

一.基础扫盲

1.http是无状态的
2.通过cookie在客户端记录状态：非跨域时使用
3.通过session在服务端记录状态：非跨域时使用
4.通过token方式维持状态：跨域时推荐使用

二.token原理分析

1.客户端输入用户名和密码进行登录；服务端验证通过之后生成该用户的token并返回
2.客户端存储token，后续的所有请求都携带token发送请求；服务端验证token是否通过

三.重定向

所有不携带token的请求，都要重定向到login页面
在路由规则中重定向

routes：[
//所有指向根路径的请求，都会重定向到login页面
{path: '/', redirect:  '/login'}，
]

四.组件的使用

可以直接在element官网查找对应的组件代码，复制粘贴使用

五.类名选择器

在teleplate中class=name
在css中可使用.name进行渲染

六.form表单的属性绑定

1.form中的model绑定form
2.v-modle绑定form对象中的name属性
3.在script的data中定义form属性，并return

<el-form ref="form" :model="form" label-width="80px"> //model绑定form
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>   //v-modle双向绑定form对象中的name属性
  </el-form-item>
 </el-form>
 <script>
  export default {
    data() {
      return {
        form: {            //定义form属性，并return
          name: '',   
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>