VUE

不要操纵dom
<div id="app">
   <p>{{ msg }}</p>
</div>

var vm = new Vue({
   el:'#app', //表示当前new的Vue实例,要控制页面上的哪个区域。
   data:{ //data属性中,存放的是el中要用到的数据
      msg:'欢迎学习Vue'
   }
})
<div id="app">
   <p v-clock>{{ msg }}</p>  //防止页面加载慢的时候将元素原始形式表现出来
</div>

<style>
    [v-cloak]{
        display:none;
    }
</style>
<p v-cloak>+++++{{ msg }}++++++</p>   //只会替换自己的内容
<h4 v-text="msg"></h4>     //会覆盖元素中原本的内容,无闪烁问题

v-html能够将元素也渲染到页面上。
<div v-html="msg2">123412553</div>

//通过v-bind方法绑定  缩写是:
<input type="button" value="按钮" v-bind:title="mytitle">
或者:<input type="button" value="按钮" :title="mytitle">
mytitle:'这是一个自定义的title'

v-on:事件绑定机制   缩写是@
<input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show">
methods:{
     show:function(){alert('6666');}
}
var vm = new Vue({
	el:'#app',
	data:{
		msg:'猥琐发育,别浪~~',
		intervalId:null
	},
	methods:{
		lang(){
			if(this.intervalId != null){
				return;
			}
			this.intervalId = setInterval(()=>{
				var start = this.msg.substring(0,1)
				var end = this.msg.substring(1)
				this.msg = end+start
			},200)
		},
		qingchu(){
			clearInterval(this.intervalId)
			this.intervalId = null
		}
	}
})
事件修饰符:
.stop阻止冒泡  //只会阻止自己
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只有当事件在该元素触发时触发回调
.once事件只触发一次

<input type="button" value="按钮" :title="mytitle" @click.stop="show">
双向数据绑定:v-model
使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定,注意:v-model只能运用在表单元素中。
input   select   checkbox 等等
Vue中使用样式
使用class样式
数组:  <h1 :class="['thin','italic']">  </h1> 
可以写三目表达式
<h1 :class="['thin','italic',flag?'active':'']"></h1>
<h1 :class="['thin','italic',{'active':flag}]"></h1>
<h1 :class="{thin:true,italic:true,active:true}"></h1>
<h1 :style="{color:'red','font-weight':200}">这是一个h1</h1>
<h1 :style=['','']>这是一个h1</h1>
v-for和key属性:
<p v-for="(item,i) in list" :key="item.id">{{item}}</p>   迭代数组
<p v-for="(item,i) in list">{{item.ID}}</p>   迭代数组对象
<p v-for="(val,key,i) in user">{{val}}--{{key}}</p>   迭代对象
<p v-for="count in 10">这是第{{count}}次循环</p>   迭代数字
//count从1开始
指定key值需要是字符串类型或者是数值类型的
<p v-for="item in list" :key="item.ID">
v-if和v-show的使用
<h3 v-if="flag"></h3>   每次都会重新创建与删除元素操作
<h3 v-show="flag"></h3>   切换隐藏显示
//如果元素涉及频繁的切换,最好不要使用v-if
del(id){
    // this.list.some((item,i)=>{
    //     if(item.id==id){
    //         this.list.splice(i,1)
    //         return true
    //     }
    // })
    var index = this.list.findIndex(item=>{
        if(item.id==id){
            return true;
        }
    })
    console.log(index)
}
item.name.indexOf(keywords) != -1 表示关键字keywords在name中
ES6中为字符串提供了新方法:String.prototype.includes('包含的字符串')
{{name|过滤器名称}}  并没有修改原数据
Vue.filter('过滤器名称',function(msg){ msg.replace(/单纯/g,'邪恶') }) 
Vue.filter('shijian', function (data) {
    var y=data.getFullYear()
    var m=data.getMonth()+1<10?'0'+data.getMonth()+1:data.getMonth()+1
    var d=data.getDate()<10?'0'+data.getDate():data.getDate()
    return `${y}-${m}-${d}`
})
filters:{}和methods并列  里面有很多个过滤器
就近原则,优先调用私有过滤器   padStart能够在前面填充,第一个参数是最大长度,第二个参数是补什么
shijian:function (data) {
    var y=data.getFullYear()
    var m=(data.getMonth()+1).toString().padStart(2,'0')
    var d=data.getDate().toString().padStart(2,'0')
    return `${y}-${m}-${d}`
}
自定义按键修饰符:
@keyup.enter
@key.键代码
Vue.config.keyCodes.f2=113  //自定义键代码
使用Vue.directive()定义全局的指令,参数1是指令的名称不需要v-前缀,但是调用的时候需要用v-前缀。参数2是一个对象,身上有一些指令相关的函数,这些函数可以在特定的阶段执行相关的操作。
Vue.directive('focus',{
   bind.function(el){ //每当指令绑定到元素上的时候,会立即执行这个bind函数, 只执行一次

   },
   inserted:function(){//inserted表示元素插入到Dom中的时候,会执行inserted 
   函数

   },
   updated:function(){//当VNode更新的时候,会执行updated,能触发多次

   }
})
directives 和 methods并列,多个指令
directives:{
    'fontweight':{
        bind:function(el,binding){
            el.style.fontWeight = binding.value
        }
    }
}
Vue生命周期:
new Vue()
Init Events&Lifecycle  表示刚初始化了一个vue空的实例对象,这时候,这个对象身上,只有默认的一个生命周期函数。

beforeCreate(){}表示实例在创建之前会执行它,在这个生命周期函数执行的时候data和methods中的数据都还没初始化。

created()这是遇到的第二个生命周期函数,在created中data和methods都已经被初始化好了。

beforeMount(){ //这是遇到的第3个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把模板渲染到页面中。
       不能获取到页面上最新的内容,只能得到模板字符串
}

mounted(){ //这是遇到的第4个声明周期函数,表示内存中的模板已经真实挂载到了页面中,用户已经可以看到渲染好的页面了}
如果要通过某些插件操纵dom节点,最早要在mounted中进行,只要执行完了mounted就表示创建完成了。
beforeUpdate()表示,我们的页面还没有被更新,数据肯定被更新了,页面尚未与最新数据保持同步。
updated()  事件执行的时候,页面和data数据已经保持同步最新了。
beforeDestroy()  实例身上所有的data和所有的methods以及过滤器,指令..都处于可用状态,此时还没有真正执行销毁过程。
当destroyed的时候都会被销毁。
vue-resource 实现get,post,jsonp
也可以使用axios第三方包实现
在导入vue之后导入vue-resource
this.$http.get()
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){ console.log(result.body) })   //拿到服务器返回的成功数据
this.$http.post('',{},{emulateJSON:true}).then(result => {console.log(result.body)})
vue动画
进入阶段:
v-enter 动画起始状态   
中间时间段: v-enter-active
v-enter-to

离开阶段:
v-leave
中间时间段:v-leave-active
v-leave-to
<transition>
    <h3></h3>
</transition>
自定义两组样式
.v-enter,.v-leave-to{
     opacity:0;
     transform:translateX(150px);
}
.v-enter-active,.v-leave-active{
    transition:all 0.4s ease;
}
自定义v-前缀
<transition name="my"></transition> 
就是my-了
methods:{
    beforeEnter(el){  //el就是原生对象
     el.style.transform="translate(0,0)" //设置小球动画开始之前起始位置
   },  //动画入场之前,此刻动画尚未开始,可以在beforeEnter中,设置元素开始动画之前的起始样式
    enter(el){
       el.offsetWidth   //可以认为能够强制界面刷新
       el.style.transform="translate(150px,450px)"
       el.style.transition='all is ease'
   },  //表示动画开始之后的样式,这里可以设置小球动画完成之后,结束状态
    afterEnter(el){}
}
var vm = new Vue({
	el:'#app',
	data:{
		flag:false
	},
	methods:{
		beforeEnter(el){
			el.style.transform = "translate(0,0)"
		},
		enter(el,done){
			el.offsetWidth
			el.style.transform = "translate(150px,450px)"
			el.style.transition = "all 1s ease"
			done()
		},
		afterEnter(el){
			this.flag = !this.flag;
		}
	}
})
//这里done其实就是afterenter,能够立即隐藏
transition-group
如果渲染的元素是通过v-for循环生成的,想包裹起来要用到transition-group,
给transition-group添加appear,给页面添加进入时候的效果
通过tag属性指定渲染出ul
<transition-group appear tag="ul">
    <li v-for=""></li>
</transition-group>

.v-move{transition:all 0.6s ease;}
.v-leave-active{position:absolute;}

给transition添加appear属性 实现刚开始入场效果
VUE组件:
三种方式:
一、
var com1 = Vue.extend({
    template:'<h3></h3>'
})
Vue.component('myCom1',com1)
引用: <my-com1></my-com1>  如果不用驼峰命名,直接小写就行
Vue.component('mycom1',Vue.extend({template:'<h3></h3>'}))

二、
Vue.component('mycom2',{template:'<h3>xxxxxx</h3>'})

三、
<template id="tmp1">
    <div>
       <h1>aaasssddd</h1>
       <h4>vvvdddfff</h4>
    </div>
</template>
Vue.component('mycom3',{
   template:'#tmp1'
})
组件中的data:
Vue.component('mycom1',{
    template:'<h1>这是全局组件---{{msg}}</h1>',
    data:function(){
       return {
          msg: '这是组件中data定义的数据'
       }
   }
})

实现两个组件的切换 方式一:
Vue.component('login',{
   template:'<h3>登录组件</h3>'
})
Vue.component('register',{
   template:'<h3>注册组件</h3>'
})

<login v-if="flag" @click.prevent="flag=true"></login>
<register v-else="flag" @click.prevent="flag=false"></register>

方式二:
<!--component 是一个占位符 -->
<component :is="comName"></component>
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
组件动画:
<transition mode="out-in">
    <component :is="comName"></component>
</transition>
父子组件传值:
父组件,可以在引用子组件的时候,通过属性绑定(v-bind)的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件的内部,供子组件使用。
需要在子组件中定义一下:
props:['parentmsg']
props里面的内容是只读的,data里面的数据是可读可写的
父组件也可以把方法传递给子组件:
使用v-on绑定
子组件通过:this.$emit('方法名',参数1,参数2,...)   就能够触发父组件传输过来的方法
refs
<h3 ref='myh3'>xxxxxx</h3>
this.$refs.myh3.innerText  拿到里面的内容
VUE路由
安装方式1
直接下载:
https://unpkg.com/vue-router/dist/vue-router.js
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的script标签,则无需手动use
var routerObj = new VueRouter({
     routes:[
       {path:'/login',component:login},]    //路由匹配规则,属性1path属性2是component(是模板对象不是组件名称)
})
router:routerObj,将路由规则对象注册到vm实例上,用来监听URL地址变化,然后展示对应的组件
<router-view></router-view> 用来当占位符,将来路由规则匹配到的组件会展示到这个rouer—view中
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
{path:'/',redirect:'/login'}   //默认界面重定向
配置自己的激活类:在new VueRouter中加入
linkActiveClass:'myactive'
动画效果:
<transition>
   <router-view></router-view>
</transition>
使用query方式传递参数:
var login = {
    template : '<h1>登录---{{$route.query.id}}</h1>'
    created(){
       console.log(this.$route)
    }
}
this.$route.params.id
路由嵌套:
children
routes:[
   path:'/account',
   component:account,
   children:[
     //子路由的path前面不加/
     {path:'login',component:login},
     {path:'register',component:register}
   ]
]
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>

var router = new VueRouter({
    routes:[
        {path:"/",components:{
           'default':header,
           'left':leftBox,
           'main':mainBox
        }}
    ]
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注