Vue入门到放弃
关注
分享
扫一扫
开猿节流
代码改变人生——代码改变世界
展开
-
Vue入门到放弃21（组件-切换案例）
一、通过v-if控制实现 首先我们通过前面介绍的v-if标签来实现下这种效果1.创建组件 创建我们需要的两个全局组件，并通过标签使用。<body> <div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a ...原创 2019-12-10 17:08:44 · 307 阅读 · 0 评论 -
Vue入门到放弃20（Vue的data和methods属性）
1. 组件可以有自己的 data 数据2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!<body> <di...原创 2019-12-10 15:49:36 · 309 阅读 · 0 评论 -
Vue入门到放弃19（Vue组件）
定义Vue组件什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：+模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；+组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的...原创 2019-12-10 11:59:09 · 300 阅读 · 0 评论 -
Vue入门到放弃18（Vue列表动画-添加删除）
https://cn.vuejs.org/v2/guide/transitions.html#列表过渡Vue动画案例使用transition-group标签<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name...原创 2019-12-10 10:58:07 · 237 阅读 · 0 评论 -
Vue入门到放弃17（Vue中的半场动画）
JavaScript 钩子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-12-09 18:03:37 · 179 阅读 · 0 评论 -
Vue入门到放弃16（Vue中的动画）
无动画：<body> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --> <h3 v-if="flag">这是一个H3</h3&g...原创 2019-12-09 17:40:00 · 237 阅读 · 1 评论 -
Vue入门到放弃15（vue-resource 示例之 vue对数据库数据增删查）
数据列表接口查询： 地址 http://www.liulongbin.top:3005/api/getprodlist 作用描述 获取品牌数据json数据 请求方式 Get 传入api的参数 无 返回数据格...原创 2019-12-09 16:23:34 · 465 阅读 · 0 评论 -
Vue入门到放弃14（vue-resource 实现 get, post, jsonp请求）
除了 vue-resource 之外，还可以使用`axios`的第三方包实现实现数据的请求（`axios`不支持跨域请求）引入vue-resource<script src="js/vue.js"></script><script src="js/vue-resource.js"></script>基本语法引入vue-re...原创 2019-12-09 14:59:15 · 258 阅读 · 0 评论 -
Vue入门到放弃13（vue实例的生命周期）
vue实例的生命周期什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ 生命周期钩子：就是生命周期事件的别名而已； 生命周期钩子 = 生命周期函数 = 生命周期事件 主要的生命周期函数分类： 创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 ...原创 2019-12-06 17:33:58 · 222 阅读 · 0 评论 -
Vue入门到放弃12(自定义指令)
Vue自定义指令语法： Vue.directive('focus', { bind: function (el) {}, inserted: function (el) {}, updated: function (el) { } })注意：Vue中所有的指令，在调用的时候，都以v-开头使用Vue.directiv...原创 2019-12-06 16:05:12 · 200 阅读 · 0 评论 -
Vue入门到放弃11(按键修饰符)
系统修饰键 系统本身给我们提供的有几个修饰键，我们先来使用下(https://cn.vuejs.org/v2/guide/events.html)。自定义修饰键 系统提供的修饰键，就那么几个，这时如果我们想要自定义的话第一种方式就是使用按键对应的值来处理(https://dpb-bobokaoya-sm.blog.csdn.net/article/details/9628...原创 2019-12-06 15:13:49 · 176 阅读 · 0 评论 -
Vue入门到放弃09（ Vue过滤器）
过滤器概念： Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；分类：过滤器分为全局过滤器和局部过滤器(私有过滤器)1.全局过滤器 我们先通过案例来介绍下过滤器的使用，然后再看下何为全局过滤器过滤器...原创 2019-12-06 10:28:01 · 492 阅读 · 0 评论 -
Vue入门到放弃08（Vue小案例添加，删除，搜索）
1.添加 <script src="./lib/vue-2.4.0.js"></script> <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css"> <body> <div id="app"> <div class="panel panel...原创 2019-12-04 17:23:07 · 257 阅读 · 0 评论 -
Vue入门到放弃08（Vue条件判断 v-if，v-else-if，v-else）
v-if和v-else<body> <div id="app"> <h5>Modeng 是怎么样的一个人？</h5> <div v-if="isHandsome">非常帅</div> <div v-else>还是帅</div> <...原创 2019-12-04 15:37:37 · 199 阅读 · 0 评论 -
Vue入门到放弃07（Vue v-if和v-show差异）
<body> <div id="app"> <!-- <input type="button" value="toggle" @click="toggle"> --> <input type="button" value="toggle" @click="flag=!flag"> <!-- v...原创 2019-12-04 15:19:14 · 187 阅读 · 0 评论 -
Vue入门到放弃06(Vue v-for)
<body> <div id="app"> <!-- 原始操作 --> <p>{{list[0]}},{{list[1]}}、、、</p> <p v-for="item in list">{{item}}</p> <p v-for="(item, i)...原创 2019-12-04 14:37:01 · 160 阅读 · 0 评论 -
Vue入门到放弃05(Vue样式处理class、style)
在Vue中使用样式使用class样式 数组<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 数组中使用三元表达式<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1> 数组中嵌套对象<h1 :c...原创 2019-12-02 20:14:02 · 207 阅读 · 0 评论 -
Vue入门到放弃04（Vue指令之v-model和双向数据绑定（简易计算器实现））
Vue指令之v-model<body> <div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定 --> <!-- <input type="text" v-bind:value=...原创 2019-11-21 17:21:56 · 158 阅读 · 0 评论 -
Vue入门到放弃03(Vue事件修饰符详解)
事件修饰符： .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身（比如不是子...原创 2019-11-21 16:54:20 · 208 阅读 · 0 评论 -
Vue入门到放弃02(Vue跑马灯效果案例)
Vue跑马灯效果1.分析a.点击"加油"按钮绑定一个点击事件，使用v-on或者缩写:"@"b.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；c.为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去；2.实现2.1 绑定...原创 2019-11-21 16:35:40 · 288 阅读 · 0 评论 -
Vue入门到放弃01(基础入门)（vue介绍与入门）详解
什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，...原创 2019-11-21 14:26:21 · 314 阅读 · 0 评论