- 博客(56)
- 收藏
- 关注
RSS订阅原创 Vue_动画封装
我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。eg：<fade :show='showfade'> <div>hello world</div></fade><fade :show='showfade'> <h
2018-06-30 09:14:35
257
原创 Vue_列表过渡
如果是列表的话，想要做动画，让列表在包裹在transition-group里面<transition-group name='listcss'> <div v-for='item of listanimate' :key='item.id'>{{item.title}}</div></transition-group>
2018-06-30 09:14:24
375
原创 Vue_多个元素或组件的过渡
一.多元素动画 如果transition标签里有多个元素做动画，比如做个toggle切换的效果。<transition name='fade' mode='in-out'> <div v-if="cssanimate" key='hello'>hello css animate5</div> &am
2018-06-30 09:14:09
929
原创 Vue_JS动画与Velocity.js动画
一.JS动画 前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的 在transition标签里定义触发事件@before-enter：在进入动画之前触发的函数，有一个参数，指的是要执行动画的元素@enter：在进入动画执行的函数，有两个参数，第一个指执行动画的元素，第二个是动画完成的参数@after-enter：在执行完enter之后执行的事件。有一个参数，指执...
2018-06-30 09:13:50
2060
原创 Vue_同时使用过渡和动画
在上一节我们用animate动画库，在刷新页面时没有动画如何解决第一次就显示动画内容呢？在transform 上加上appear 和appear-active-class <transition name='fade' appear enter-active-class='animated swing' leave-active-cla...
2018-06-30 09:13:40
1975
原创 Vue_使用animate.css库
一.@keyframs 动画 我们如何在Vue中使用@keyframs 动画？<transition name='fa'> <div v-if="cssanimate">hello css animate1</div></transition> <but
2018-06-30 09:13:23
2083
原创 Vue_CSS动画原理
vue 实现动画效果是在某一时刻往标签上添加一些样式来实现的首先我们先写一个没有动画效果：<div v-if="cssanimate">hello css animate</div><button @click='cssclick'>css动画</button>给按钮添加toggle
2018-06-30 09:13:10
324
原创 Vue_动态组件与v-once指令
一.component动态组件 动态组件是根据判断值决定是否显示该组件<component> 根据is的值来显示相应的组件是否应该显示使用的方法：<component :is='changeConponents'></component><button @click="changeclick"&
2018-06-30 09:13:00
447
原创 Vue_使用插槽（slot）
当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么如何传值呢？如果我们像正常父向子传值那样操作。 <slott content="<p>hello,slot</p>"></slott>子组件：<templ
2018-06-30 09:12:47
10941
7
原创 Vue_非父子组件间的传值（Vuex和发布订阅模式）
我们知道父子组件之间的传值，父向子用props传值，子向父用自定义事件传值，那么肥父子组件的传值如何实现？比如说1和3 ，3和3之间？ 通常来说，非父子组件的传值方法有两种。 一是用Vue的数据层框架vuex,二是使用总线机制（发布订阅模式、Bus、观察者模式）来解决非父子组件传值的问题。Vue.prototype.bus = new Vue();创建Vue实例的时候，每一个组件都...
2018-06-30 09:08:40
3050
原创 Vue_给组件绑定原生事件
当我们使用组件的时候，想点击组件触发事件，要在子组件里定义触发事件，在父组件定义是没用的.只有从子组件往外触发自定义事件，父组件里定义的触发函数才有用。那么怎么样才能直接在父组件上定义触发函数，不需要经过子组件呢？ 在触发事件上加上.native eg：<counter @click.native="handerClick"></counter>hand...
2018-06-29 22:07:19
1309
原创 Vue_组件参数校验与非Props特性
一.props 子组件接收父组件的参数的时候，props注册接收的参数props:['count']子组件可以对接收的参数校验。 例如规定接收的count参数要求是Stringprops:{ count:String}如果count是别的类型就会报错 当然也可以设置多种数据类型props:{ count:[String,Number]}也可以是很复杂...
2018-06-29 22:07:05
532
原创 Vue_组件使用的细节点
一.is 属性 解决模板标签使用出现bug的问题tbody里面只能识别tr标签 如果我们在tbody里面引用组件，例如自定义一个tablerow<table> <tbody> <tablerow></tablerow> <tablerow&am
2018-06-29 22:06:55
226
原创 Vue_条件渲染和列表渲染
一.条件渲染1.v-if： v-if=‘name’ ：name值的true 或 false ，决定着这个标签的是否显示2.v-show： v-show=‘show’ show的值true 或 false ，决定着这个标签的是否显示 两者的区别：当表达式中值是为false时，v-show是display为none；v-if是直接将这个DOM元素从网页中删除。3.v-else...
2018-06-29 22:06:32
759
原创 Vue_样式绑定
1.v-bind：class=‘{activitded:isActivitded} ’ class的对象绑定      如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值     &
2018-06-29 22:06:15
498
原创 Vue_计算属性，方法和侦听器
一.计算属性： 我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法： eg： 我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名: 方法一：用computed计算属性来实现data(){return{ firstname:'hani', lastname:'...
2018-06-29 22:06:02
230
原创 Vue_模板语法
1.插值表达式：{{}}2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式3.v-html: 指向实例中的数据 和v-text的区别，v-text不会处理html标签4.v-bind:title=“name” 绑定的title属性因为Vue指令的值都是JS表达式。所以:v-text=“name + ‘11111111’”...
2018-06-29 22:05:47
97
原创 Vue_实例、Vue实例的生命周期钩子
一.Vue实例：var vm= new Vue({});如何看生成的Vue实例呢？ 在控制台直接输：vm 敲回车。就会显示出vm的实例对象 vm.$data 敲回车 ，就可以看到实例中data中的信息。 vm.$el 敲回车 就可以将实例负责接管的DOM元素输出来 vm.$destroy 敲回车 Vue实例就会被销毁，怎么看Vue实例被销毁了呢？给Vue实例的...
2018-06-29 22:05:03
393
原创 Vue_子向父组件传参
子向父传递参数需要自定义事件 使用 on(eventName)监听事件使用on(eventName)监听事件使用on(eventName) 监听事件 使用 emit(eventName)触发事件 子向父传递参数： 在子组件中个设置一下触发函数，并将参数传给父组件。export default{ data(){ return{ msg:'Hello ...
2018-06-29 22:04:49
598
原创 Vue_父向子组件传参
父向子组件传参经常用，比如说我们写了一个select组件，调用的时候需要向子组件传初始的数据。这就要父组件向调用的子组件传参 父向子传参 现在我们想要从当前页面往子组件传参，在标签中写上传参的数据：<button v-bind:content="msg"> 这时在子组件中调用this.msgfromfather是undefind 的，需要在子组件的export default ...
2018-06-27 09:42:52
1949
原创 Vue_划分组件以及组件之间的通信
在Vue中，每个组件都是一个实例，组件可以看成是一个页面的区域。 1.组件划分： 作为一个功能模块系统，划分出一个个的组件，有两种划分模式：功能模块和页面区域：//如何划分组件功能模块：select,pagenation...页面模块：header,footer,sidebar... App.vue是项目的入口，我们分好的组件也是一个Vue文件，在APP.vue我们把各个组...
2018-06-27 09:42:23
543
原创 Vue_localStorage本地存储
html 的localStroage 可以将用户输入的信息存储在本地浏览器中 在控制台输入：window 可以看到window对象的属性和方法//设置localStroage值localStorage.setItem（'username','zhangsan'）;//获取localStroage值localStorage.getItem（'username'）;==>zhang...
2018-06-27 09:41:58
40685
原创 Vue_经验tips
1.指令v-text和指令v-html 的区别：     如果数据中含有HTML标签的话，v-text会直接将HTML标签当成文本输出，但是v-html会将数据中的HTML标签解析成标签 注意{{}}也识别不出来标签2.template标签下只能有一个包裹元素，否则会报错3.全局样式和局部样式 <style scoped >...
2018-06-27 09:41:44
509
原创 Vue_基础框架目录解析
当我们用npm生成一个项目的时候，我们要了解这个项目的文件 1.index.html 是所有HTML的入口，点开该index.html 可以看到：<!DOCTYPE html><html> <head> <meta charset="utf-8"> &
2018-06-27 09:41:22
442
原创 Vue_ 组件的重要选项
一.初识Vue：     我们常规编写的页面时HTML、css、JavaScript，但是在Vue中，我们编写静态页面在.vue中，webpack打包工具帮助我们解析Vue成html,css,javascript. 学习Vue主要是学习template、script、style标签,他们的对应关系： 一个简单的例子： var hello...
2018-06-27 09:41:04
899
原创 Vue_入门
搭建环境 一.首先安装npm,直接安装nodeJS，nodejs自带npm，安装教程安装nodejsvue.js的安装方式有很多，但是做一个大型的项目最好是使用npm搭建一个项目二.安装好nodejs和npm，因为npm安装插件很慢，安装淘宝镜像来下载插件包npm install -g cnpm –registry=https://registry.npm.taobao.org三...
2018-06-27 09:40:33
166
原创 jQuery_省市选择
省市选择：HTML结构：<select name="provice" id="provice"></select><select name="city" id="city"></select&am
2018-06-27 09:39:37
595
原创 jQuery_微博案例
微博案例：当点击表情的时候，会显示出表情包，点击表情包，会在文本域显示出对应的表情文本HTML：<div class="box"> <p>发表一下你的心情吧</p> <textarea name="" id="" cols
2018-06-27 09:39:08
466
原创 jQuery_城市选择
想要做一种效果，可以实现选择一个城市点击跳到另一个选择框中 HTML结构：<div class="main"> <select name="sel_city" id="sel_city" multiple> <option value="1&
2018-06-27 09:37:28
998
原创 jQuery_json创建表格
解析json动态生成表格HTML结构： <table> <thead> <tr> <td>学生</td> <td>学号</td> <td>成绩</td>
2018-06-26 15:24:35
696
原创 jQuery_引入第三方插件
前端库插件的说明文档都是.md结尾的文件（Markdown） 如何动态的去安装第三方的包呢？ 借助包管理工具 bower、npm,自动加载第三方插件 一.背景色动画插件 animate()不支持backgroundcolor属性插件jquery.color.js会让背景色渐变 <!--第一步，引入jQuery插件--> <!--第二步，引入j...
2018-06-26 14:56:17
5008
原创 jQuery_其他补充
1.链式编程 end()补充当执行的jQuery链式编程断掉的时候，如果能把链在链上就好了 end() 结束当前的链式编程的链，回到最原始的链上去时2.隐式迭代 在默认情况下，会自动迭代执行jQuery选择出来的所有的dom元素操作 如果获取的是多元素的值，默认返回的是第一个元素的值eg：$('ul li').text('你好！') 会默认给选择出ul下的所有的li 设置te...
2018-06-26 14:03:47
124
原创 jQuery_做jQuery插件
要学会做自己的jQuery插件一.全局jQuery函数扩展方法$.log = function(){}方法是：$.方法名 = function(){} //给全局对象扩展一个全局函数 $.ww = function(){ console.log("雯雯") };//使用： $.ww();效果： 二.普通的jQuery...
2018-06-26 13:52:08
142
原创 jQuery实战_防淘宝评论五角星
淘宝评论的小星星，移上去可以星星变成实心的，完全防淘宝来实现一个五角星的例子 思路：第一步：当鼠标移到某个li标签上，该li以及它前面的li变成实心的，后面的不变第二部：记录一下用户点击的是哪一个五角星，给点击的li标签再添加一个样式类第三部：当鼠标移开评分控件的时候，如果没有clicked,即没有点击任何星星，在离开的时候所有的星星变为空心如果有clicked,把clicked...
2018-06-26 13:46:32
253
原创 jQuery_鼠标跟随效果
鼠标跟随效果： HTML：<body><img src="images/ts.gif" alt=""></body>JS： $(function(){ $(document).on('mousemove',function(e){ $('img').css({ 'position':'...
2018-06-26 11:31:21
197
原创 jQuery_事件对象
在浏览器客户端应用平台，基本上都是以事件驱动的，即某个事件发生，然后做出相应的动作。 浏览器的事件表示的是某些事情发生的信号。 一.什么是事件对象？$('#btn').click(function(e){ console.log(e);})结果： 我们可以看到这个事件对象的一切信息event对象简介 eg：$('button').one('click','w...
2018-06-26 11:15:24
127
原创 jQuery_触发事件
1.click：$('div').click()2.trigger:触发事件，并且触发浏览器默认行为$('form').on('click','#btnSub',function(){ var txtName = $('#txtName').val(); if(txtName === '1'){ alert('提交成功') }else{ $('#txtNa...
2018-06-26 10:34:21
152
原创 jQuery_解绑事件
一.解绑事件 如果用bind绑定事件，解绑要用unbind如果用delegate绑定事件，解绑要用undelegate如果用on绑定事件，解绑要用off要一一对应eg：//on 绑定事件 $('ul').on('click','li',function(){ alert($(this).html()) }); //解绑事件，off的参...
2018-06-26 10:27:39
1615
原创 JQuery_绑定事件
绑定： 绑定事件：一.如何给元素同时绑定两个事件？ 方法一： 链式编程$('button').click(function(){ alert('我是click事件！')}).mouseenter(function(){ alert('我是mouseenter事件！')})方法二： 用bind绑定事件：事件之间用空格隔开//bind绑定两个事件$('butt...
2018-06-26 10:24:52
115
原创 jQuery事件
JQuery事件： 查看jQuery的API文档，可以看到jQuery的事件有： 常用事件：blur:失去焦点触发 change：改变，下拉框改变值的时候触发的事件 click :点击触发的事件 dbclick:双击触发的事件 error：错误，用法：假如一个网站图片特多，用户的网速不好加载不出来，显示一个X号，这时在图片加载失败的时候调用error这个事件，给它一个网站默认的...
2018-06-25 10:18:44
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人