Vue
Vue的学习之路,需要对前端有一些了解,懂基本的HTML标签,CSS样式,跟JS语法
亥虫
做人如果没有梦想,那跟咸鱼有什么差别
展开
-
Vue的学习之路十八:axios
GET请求// 直接在 URL 上添加参数 ID=12345axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 设置参数:axios.get('/user', { params: { ID: 12345原创 2020-06-01 17:32:38 · 163 阅读 · 0 评论 -
Vue的学习之路十七:生命周期函数
生命周期图代码<body> <div id="app"> <input type="button" value="修改msg" @click="msg='No'"> <p id="h3">{{msg}}</p> </div> <script> var vm = new Vue({ el: '#app', data: {原创 2020-05-27 10:24:13 · 3263 阅读 · 0 评论 -
Vue的学习之路十五:自定义全局指令
// 注意:Vue中所有的指令,在调用的时候,都以 v- 开头// 使用 Vue.directive() 定义全局的指令// 其中参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加 v- 前缀,// 但是在调用的时候必须在指令名称前加上 v- 前缀进行调用// 参数2:是一个对象,这个对象身上,身上有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作Vue.directive('focus', { // 注意:在每个函数中第一个参数永远是 el,表示被绑定指令的那个元素原创 2020-05-25 18:04:12 · 220 阅读 · 0 评论 -
Vue的学习之路十四:按键修饰符
<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>绑定键盘事件,按下回车后触发 add 函数为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right除了以上常用的按键别名外,可以自定义按键:@keyup.f2="add"原创 2020-05-25 17:14:39 · 186 阅读 · 0 评论 -
Vue的学习之路十三:品牌列表案例实战
<body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <la原创 2020-05-25 14:54:22 · 3418 阅读 · 0 评论 -
Vue的学习之路十二:过滤器
<body> <div id="app"> <p>{{ msg | msgFormat('疯狂', '123') | test }}</p> </div> <div id="app2"> <p>{{ msg | msgFormat('疯狂', '123') | test }}</p> </div> <script>原创 2020-05-25 14:26:49 · 3337 阅读 · 0 评论 -
Vue的学习之路十一:v-if 与 v-show 的使用
<body> <div id="app"> <input type="button" @click="toggle" value="toggle" /> <!-- 每次都会重新删除或创建元素 --> <h3 v-if="flag">这是v-if控制的元素</h3> <!-- 每次不会重新进行DOM的删除和创建操作,只是切换了元素的display: none 样式 -->原创 2020-05-23 15:09:47 · 3350 阅读 · 0 评论 -
Vue的学习之路十:v-for中key的应用
<body> <div id="app"> <label for="">Id: <input type="text" v-model="id"> </label> <label for="">Name: <input type="text" v-model="name"> </label> <input原创 2020-05-23 15:05:33 · 3401 阅读 · 0 评论 -
Vue的学习之路九:v-for
<body> <div id="app"> <!-- <p>{{list[0]}}</p> <p>{{list[1]}}</p> <p>{{list[2]}}</p> <p>{{list[3]}}</p> <p>{{list[4]}}</p> <p>{{list[5]}原创 2020-05-23 11:51:09 · 3455 阅读 · 0 评论 -
Vue的学习之路八:v-bind绑定style样式
<body> <div id="app"> <!-- 对象是无序键值对的集合 --> <h1 :style="styleObj1">这是一个h1</h1> <h1 :style="[styleObj1, styleObj2]">这是一个h1</h1> </div> <script> var vm = new Vue({原创 2020-05-23 11:21:38 · 193 阅读 · 0 评论 -
Vue的学习之路七:v-bind绑定class样式
<style> .red{ color: red; } .thin{ font-weight: 200; } .italic{ font-style: italic; } .active{ letter-spacing: 0.5em; } </style> </head> <body>原创 2020-05-23 11:16:41 · 3433 阅读 · 0 评论 -
Vue的学习之路六:使用v-model制作简易计算器
<body> <div id="app"> <input type="text" name="" id="" v-model="n1" /> <select name="" id="" v-model="opt"> <option value="+">+</option> <option value="-">-</option> ..原创 2020-05-23 09:34:04 · 461 阅读 · 0 评论 -
Vue的学习之路五:v-model
<body> <div id="app"> <h4>{{msg}}</h4> <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V,无法实现数据的双向绑定 --> <input type="text" :value="msg"> <!-- 使用 v-model 指令,可以实现表单元素和Model中数据的双向数据绑定 --> <!--原创 2020-05-22 19:06:35 · 119 阅读 · 0 评论 -
Vue的学习之路四:事件修饰符
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title&g原创 2020-05-22 18:41:05 · 123 阅读 · 0 评论 -
Vue的学习之路三:this
<body> <div id="app"> <input type="button" value="浪起来" @click="lang" /> <input type="button" value="低调" @click="stop" /> {{ msg }} </div> <script> // 注意:在VM实例中,如果想要获取 data 上的数据,或者想要调用原创 2020-05-22 17:54:40 · 3909 阅读 · 0 评论 -
Vue的学习之路二:指令学习
<body> <div id="app"> <!-- 使用 v-cloak 能够解决,插值表达式闪烁的问题 --> <p v-cloak>++++++++++++++++{{msg}}-------------------------</p> <h4 v-text="msg">==========================</h4> <!-- 默认 v-text 是没有闪烁问题原创 2020-05-22 15:29:19 · 3237 阅读 · 0 评论 -
Vue的学习之路一:MVVC
简单介绍 Vue 的基本语法,与 Vue 中 MVVC 分别代表什么<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 1. 导入Vue的包 --> <scrip原创 2020-05-22 15:05:29 · 4002 阅读 · 0 评论