vue
dream_back
世界本就单调,愿你五颜六色
展开
-
12.vue实战--接口请求,组件使用,页面跳转配置
一.接口请求配置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('请求地址', {'请求参数'})调用返回原创 2021-03-20 17:21:10 · 765 阅读 · 0 评论 -
11.vue实战--form表单字段验证提交验证
一.form表单字段验证Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可1.form中的rules属性绑定rules2.form-item中的prop绑定对应的字段3.在data中return对应的返回规则<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-rule原创 2021-03-20 17:09:43 · 1833 阅读 · 0 评论 -
10.vue实战--form表单属性绑定
一.基础扫盲1.http是无状态的2.通过cookie在客户端记录状态:非跨域时使用3.通过session在服务端记录状态:非跨域时使用4.通过token方式维持状态:跨域时推荐使用二.token原理分析1.客户端输入用户名和密码进行登录;服务端验证通过之后生成该用户的token并返回2.客户端存储token,后续的所有请求都携带token发送请求;服务端验证token是否通过三.重定向所有不携带token的请求,都要重定向到login页面在路由规则中重定向routes:[//所有指原创 2021-03-20 10:50:11 · 1600 阅读 · 0 评论 -
9.Vue 表单
一.复选框,checkbox1.v-model 会根据控件类型自动选取正确的方法来更新元素实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定<div id="app"> <p>input 元素:</p> <input v-model="message" placeholder="编辑我……"> //开始运行显示input初始数据,当在输入框里输入其他数据时,下一行p标签里的message也是原创 2021-02-08 11:26:57 · 138 阅读 · 0 评论 -
8.Vue 事件处理器
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.使用原创 2021-02-07 17:40:14 · 87 阅读 · 0 评论 -
7.Vue 样式绑定
一.v-bind:class1.class 属性绑定我们可以为 v-bind:class 设置一个对象,从而动态的控制 class<style>.active { width: 100px; height: 100px; background: green;} //定义一个长宽各100的方框,背景色为绿色</style></head><body><div id="app"> <div v-bind:c原创 2021-02-07 15:51:12 · 187 阅读 · 0 评论 -
6.Vue 监听属性
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">原创 2021-02-07 11:27:19 · 133 阅读 · 0 评论 -
5.Vue计算属性
1.计算属性关键词: computed反转字符串的例子:<div id="app"> {{ message.split('').reverse().join('') }}</div><script>new Vue({ el: '#app', data: { message: 'Runoob!' }})</script>借用计算属性实现的例子:<div id="app"> <p>原始字符串原创 2021-02-03 18:58:13 · 142 阅读 · 0 评论 -
4.vue循环语句
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原创 2021-02-02 18:47:45 · 103 阅读 · 0 评论 -
3.vue条件语句
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>原创 2021-02-01 19:23:49 · 123 阅读 · 0 评论 -
2.vue模板语法
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原创 2021-01-12 09:20:59 · 456 阅读 · 0 评论 -
1.vue起步
1.每个 Vue 应用都需要通过实例化 Vue 来实现,相当于python中的类的实例化<div id="vue_det"> // div通过id 与js中el元素进行赋值引用 <h1>site : {{site}}</h1> //{{ 属性名 }} 用于输出对象属性值 <h1>{{details()}}</h1> ////{{ 函数名加()}} 用于输出对象函数返回值,</div><script type=原创 2021-01-08 19:32:13 · 153 阅读 · 0 评论