dream_back的博客

一.接口请求配置 1.main.js中的配置 import axios from 'axios' //导入axios包 axios.defaults.baseURL = 'http://127.0.0.1:8888' //配置根路径 vue.prototype.$http = axios //这样配置过后，每一个组件都可通过$http对接口发起请求 2.对应组件中的调用 通过this.$http.post('请求地址', {'请求参数'})调用 返回

一.form表单字段验证 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 1.form中的rules属性绑定rules 2.form-item中的prop绑定对应的字段 3.在data中return对应的返回规则 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-rule

一.基础扫盲 1.http是无状态的 2.通过cookie在客户端记录状态：非跨域时使用 3.通过session在服务端记录状态：非跨域时使用 4.通过token方式维持状态：跨域时推荐使用 二.token原理分析 1.客户端输入用户名和密码进行登录；服务端验证通过之后生成该用户的token并返回 2.客户端存储token，后续的所有请求都携带token发送请求；服务端验证token是否通过 三.重定向 所有不携带token的请求，都要重定向到login页面 在路由规则中重定向 routes：[ //所有指

一.复选框，checkbox 1.v-model 会根据控件类型自动选取正确的方法来更新元素 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定 <div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> //开始运行显示input初始数据，当在输入框里输入其他数据时，下一行p标签里的message也是

1.v-on用来监听增加按钮是否被点击 <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> 2.使用

一.v-bind:class 1.class 属性绑定 我们可以为 v-bind:class 设置一个对象，从而动态的控制 class <style> .active { width: 100px; height: 100px; background: green; } //定义一个长宽各100的方框，背景色为绿色 </style> </head> <body> <div id="app"> <div v-bind:c

1.可以通过 watch 来响应数据的变化 <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> //点击计数器，出现按钮 </div> <script type = "text/javascript"&gt

1.计算属性关键词: computed 反转字符串的例子： <div id="app"> {{ message.split('').reverse().join('') }} </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script> 借用计算属性实现的例子： <div id="app"> <p>原始字符串

1.v-for 迭代列表 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： <div id="app"> <ol> <li v-for="site in sites"> //li标签循环获取sites的值，渲染列表 {{ site.name }} </li> </ol> </di

1.条件判断使用 v-if 指令 在元素 和 template 中使用 v-if 指令 <div id="app"> <p v-if="seen">现在你看到我了</p> //判断seen的值 <template v-if="ok"> <h1>学习</h1> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div>

1.Html，使用 v-html 指令用于输出 html 代码 <div id="app"> <div v-html="message"></div> //直接获取message的值，类似于{{message}} </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </scrip

1.每个 Vue 应用都需要通过实例化 Vue 来实现，相当于python中的类的实例化 <div id="vue_det"> // div通过id 与js中el元素进行赋值引用 <h1>site : {{site}}</h1> //{{ 属性名 }} 用于输出对象属性值 <h1>{{details()}}</h1> ////{{ 函数名加（）}} 用于输出对象函数返回值, </div> <script type=