Vue
Zyl_CN
这个作者很懒,什么都没留下…
展开
-
vue-跟随屏幕位置改变的半场动画
定义小球(如果当前页面有其他的动画效果的定义,不要用默认的v-enter...,要重新定义name,用name-enter,用此方式覆盖污染)<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <span class="smball" v-show="bal...原创 2019-05-30 17:37:12 · 443 阅读 · 0 评论 -
v-cloak、v-text和v-html的异同
同:在网速慢的情况下,页面会显示{{xx}},然后等到解析完成后,才会改变成相应的数据;所以使用这三种指令都可以防止插值表达式的闪烁;[v-clock] { display:none}<p v-cloak>{{msg}}</p> 其中 v-cloak要在样式中设置属性,才可以<p v-text='msg'>11<p>&l...原创 2018-09-30 09:37:16 · 651 阅读 · 0 评论 -
使用ref获取DOM和组件
获取DOM:<p ref=p1>xxxx</P>methods:{ show:function(){ this.$refs.p1 ==>获取p这个DOM对象 }}在标签中使用 ref='(自定义名字)' ;在方法中使用 this.$refs.名字 来获取此DOM获取组件:<zujian ref=...原创 2018-10-15 10:48:16 · 1597 阅读 · 0 评论 -
Vue运用本地存储实现评论发表
<div id="app"> <div class="box"> name:<input type="text" v-model="name"> text:<input type="text" v-model="text">原创 2018-10-15 10:06:52 · 697 阅读 · 0 评论 -
父、子取值运用
如果子组件想使用父组件的data时:<div id="app"> <aa :smsg="msg"></aa> 先在标签中创建一个变量绑定父组件中的data中的属性</div><script> Vue.component('aa',{ template:'<p>我原创 2018-10-15 09:24:46 · 141 阅读 · 0 评论 -
路由的命名视图
<router-view name="leftBox"></router-view> components: { 'default'(默认):xxx(组件), 'leftBox'(自定义命名): xx(组件名), xxx(自定义名): xx(组件名),}}原创 2018-10-17 22:05:17 · 365 阅读 · 0 评论 -
父子路由(路由的嵌套)
routes:[ { path:'/home', component:home, children:[ {path:'login',component: login}, {path:'reg',component:reg} ]}, ],原创 2018-10-17 21:55:57 · 1063 阅读 · 0 评论 -
路由传参
$router.query$router.params原创 2018-10-17 21:47:53 · 134 阅读 · 0 评论 -
组件的切换与过渡
使用v-if、v-else-if、v-else来进行组件之间的切换<div id="app"> <a href="javascript:;" @click="flag=0">000</a> <a href="javascript:;" @click="flag=1">111&a原创 2018-10-12 10:43:44 · 251 阅读 · 0 评论 -
过滤器的定义与使用
定义过滤器:过滤器作用与一些常见的文本格式化,过滤器可以用在两个地方:msg(插值)和v-bind表达式上全局过滤器Vue.filter(xx,function(data,con1,con2,...){.....})Vue.filter(过滤器的名字,执行函数(固定参数,内容1,内容2...){ 处理代码 })私有过滤器var vm=new Vue({ el:'x...原创 2018-10-09 08:58:07 · 1289 阅读 · 0 评论 -
按键修饰符
在使用@keyup等键盘触发的事件时,vue给予了一些内置的按键修饰符:.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right其中在2.1中新增了:.ctrl、.alt、.shift、.meta(系统键(win键、mac键..))但注意这些新增的只作用与keydown上当然也可以使用键盘码或者在js的顶部进行定义全局的键盘码...原创 2018-10-09 09:30:17 · 909 阅读 · 0 评论 -
事件修饰符
.stop 阻止冒泡.prevent 阻止默认事件.capture j进行捕获触发机制.once 一次事件.self 跳过自身原创 2018-09-30 14:11:33 · 169 阅读 · 0 评论 -
vue-router路由
路由的按需加载{ path: '/home', name:'home', component: resolve => require(['@/components/home'], resolve),},添加name后,可以在路由出使用name跳转<router-link :to="{name:'home' , query:{id:'999'}}"><...原创 2019-04-24 10:38:58 · 158 阅读 · 0 评论 -
vuex
vuex是用来保存组件之间的共享数据,如果组件之间有要共享的数据,可以直接挂载到vuex中,而不必通过props和emit来进行传值安装 npm i vuex -s在main.js引入并使用import vuex from 'vuex'vue.use(vuex);创建const store =new Vuex.Store( { state : { ...原创 2019-04-19 14:11:17 · 190 阅读 · 0 评论 -
vue总结
1.vue的初始化let vm = new Vue({ el: '#app', //指定操作的dom data: { //定义属性 msg: 1231, msg2: '' }, methods: { //定义方法 show() { ...原创 2019-04-23 19:06:34 · 320 阅读 · 0 评论 -
编程式导航(网页的跳转)
js中使用 window.location.href="xxxx"来进行跳转在vue中,使用this. $router.push(''xxxx'')来进行跳转注意:this.$route.query....是用来获取url的信息,this.$router.push...是来跳转网页的...原创 2019-04-16 18:41:11 · 751 阅读 · 0 评论 -
设置选中路由的高亮与切换动画
<router-link to=''/xx'>xxx</router-link>在选中的路由跳转标签上会自动绑上2个类:.router-link-exact-active和.router-link-active这两个类所以可以在css中直接操作.router-link-active来给予样式 也可以在Vue的实例化中,定义专属的名字var rtobj=...原创 2018-10-17 19:18:09 · 435 阅读 · 0 评论 -
Vue路由
和锚点相识;在模块化的开发中,需要手动明确安装路由功能:import Vue from "vue"import VueRouter from "vue-router"Vue.use(VueRouter) var haha={ template:'<h3>哈哈</h3>' } var hehe={ te...原创 2018-10-17 19:06:31 · 172 阅读 · 0 评论 -
vue-resource(Ajax)
<div id="app"> <input type="button" value="get请求" @click="getInfo"> <input type="button" value="post请求" @click="postInfo"> <原创 2018-10-10 13:47:42 · 139 阅读 · 0 评论 -
自定义指令
像v-if,v-show等,是Vue已经内置的指令,我们也可以使用directive来自定义指令注意 :<input type="text" v-focus v-color="'blue'">其中的blue要被引号所包裹,不然会被识别为变量来进行查找全局自定义指令 Vue.directive('focus',{ inserted:functio...原创 2018-10-10 10:22:56 · 173 阅读 · 0 评论 -
组件的data和methods
在组件中也有属于自己的data与methodsvar vm=new Vue({ el:'#app', data:{ msg:11111, }, components:{ aa:{ template: '<div><button @click="add">go</button><p>...原创 2018-10-12 10:12:17 · 430 阅读 · 0 评论 -
组件的创建
组件就是为了拆分Vue实例的代码量,能够让我们以不同的组件来划分为不同的功能模板,以后用谁就调用谁就可以了创建全局组件:var a=Vue.extend({ template:"<h4>我是H4H4H4</h4>" 组件内容})Vue.component('myH4',a); myH4(组件名字)如果定义的名字是使用驼峰命名的,在html标签中则需要...原创 2018-10-12 09:59:56 · 183 阅读 · 0 评论 -
列表动画
单一的使用<transition>标签来控制动画过渡而使用v-for生成渲染出的则需要使用<transition-group>标签来控制<transition-group appear tag="ul" > <li v-for="(item,i) in list" :key="item.id">{{ite原创 2018-10-12 09:27:15 · 517 阅读 · 1 评论 -
3.2—模板语法(HTML)
<div id="app"> <p>This is a {{msg}}</p></div><script> var vm=new Vue({ el:'#app', data:{ msg:'<span>dog</span&g原创 2018-09-17 18:38:53 · 1164 阅读 · 0 评论 -
3.1—模板语法(文本)
<div id="app"> <p>{{msg}}</p></div><script> var vm=new Vue({ el:'#app', data:{ msg:'hello' } })</script>&am原创 2018-09-17 18:32:43 · 140 阅读 · 0 评论 -
2.3—生命周期与构造方法
var vm=new Vue({ el:'#app', data:{ msg:123456, }, methods:{ show:function () { console.log('Go,Show!'); }, ...原创 2018-09-17 18:26:45 · 279 阅读 · 0 评论 -
2.2—侦听
//watch 可以监听一个属性的变化vm.$watch('msg',function(newval,oldval){ // newval 被重新赋予的值 // oldval 被改变前的值})原创 2018-09-17 18:25:01 · 124 阅读 · 0 评论 -
2.1—Vue的实例
var obj={msg:123}var vm=new Vue({ el:xx, data:obj)}因为在data中属性是具有响应的,所以当属性改变时,视图会进行重渲染,但是如果data中没有此属性,那么及时更改也不会对视图进行重渲染 ...原创 2018-09-17 18:21:31 · 108 阅读 · 0 评论 -
1.4—组件化应用与创建
//在js中可以定义组件(开头定义的话则是为全局组件)Vue.component('cpt',{ template: "<li>组件元素内容</li>"});相当于:var cpt="<li>xxxxxxx</li>"//运用方式:<ul> <cpt></cpt原创 2018-09-17 18:17:24 · 126 阅读 · 0 评论 -
1.3—处理用户输入
<div id="app_1"> <p>{{message}}</p> <button v-on:click="reverseMessage">反转信息</button></div><script> var app_1=new Vue({原创 2018-09-17 18:10:17 · 229 阅读 · 0 评论 -
1.2—条件与循环
if语句<div id="app_1"> <p v-if="seen">看到了吗?</p></div><script> var app_1=new Vue({ el:'#app_1', data: { seen:true }原创 2018-09-17 18:06:00 · 142 阅读 · 0 评论 -
3.3—模板语法(特性)
当在标签内部被当做内容时,可以用 <p>{{msg}}</p>但当在标签里被当做属性来书写时,就要使用 v-bind:了<p v-bind:title='msg'></p>如果标签过多的话<button id="btn" :disabled="msg" :title="hov">试试</原创 2018-09-17 18:48:06 · 169 阅读 · 0 评论 -
4.1—计算属性
计算属性:根据data中的值,定义一个函数方法,使其经过二次计算运算等,返回其他值来运用;var vm=new Vue({ el:'xx', data:{ //属性 msg:'xxx', }, watch:{ //监听 xx:function(newval,oldval){ ..... ...原创 2018-09-18 09:32:53 · 182 阅读 · 0 评论 -
5.1—HTML/Class与的绑定
<style> .textColor { color: red; } .text-font { font-size: 24px; }</style><div id="app"> <!--给予v-bind:class=根据类名对应data中的对象属性,来赋予class-->...原创 2018-09-18 17:49:47 · 264 阅读 · 0 评论 -
Vue跑马灯效果(es5)
<div id="app"> <button @click="go">走</button> <button @click="stop">停</button> <h3> {{msg}} </h3></div&原创 2018-09-21 10:23:49 · 360 阅读 · 0 评论 -
Vue中的添加、删除和搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <style> * { padding: 0原创 2018-10-08 15:37:37 · 333 阅读 · 0 评论 -
Vue钩子函数—半场动画(球入框)Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Game</title> <style> * { padding: 0原创 2018-10-11 11:05:18 · 289 阅读 · 0 评论 -
动画效果
在Vue中所有的动画创建,都需要被<transition>标签来包裹使用<transition>标签可以给任何的元素和组件添加进入、离开的过度动画的经过:v-enter --> v-enter-to || v-leave --> v-leave-to所以就可以在css中来给予: 进入时(v-enter)和 退出时(v-lea...原创 2018-10-11 11:01:13 · 199 阅读 · 0 评论 -
6.3-条件渲染(v-show)
<div id="app"> <p v-show="flag">1321231231</p></div><script> var vm=new Vue({ el:'#app', data:{ flag:false, } })&a原创 2018-09-18 18:43:34 · 175 阅读 · 0 评论 -
6.2—用key来管理重复元素
<div id="app"> <template v-if="flag"> <label>哈哈</label> <input type="text" placeholder="哈哈"> </template>原创 2018-09-18 18:35:49 · 134 阅读 · 0 评论