##创建vue实例对象及实例对象的属性
var app = new Vue({
el:"挂载作用的区域",
data:{ 数据 num:'', },
methods:{
add(){ this.num++ }
},
computed:{
num(){
}
},
watch(){
num(){ data中的num一旦改变就会自动触发该方法,方法名即是要监听的data }
},
filters:{
format(value,num){ //一定要形参value，在过滤器函数中要用到data里的值的话，通过format(num)传过来。
//value默认接受format前面的要过滤的参数; 如：{{ list | format(num) }} }
},
components:{ child,//挂载私有组件 }
})##创建组件
###创建全局组件
在组件中data是个方法，组件的数据在data中要写到return{}对象里面。在vue实例中data是个对象
Vue.component('button-counter', { data(){ return { count: 0 } }, //渲染区域
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
//也可以 template:'#id' 渲染在<script src='html/template' id='id'>props:['自定义属性']//通过自定义属性接受父组件传过来的data<button-counter :自定义属性='num' @add='add'>
methods:{
add(){ 子组件触发父组件的方法把子组件的数据传给父组件
this.$emit('add',data)
}
} ...其余的与Vue实例方法一致；})###创建局部组件
在Vue实例中components挂载
var child = {
template:'',
props:[''],
data(){
return{ count:1, }
},
methods:{
}
}##vue动画
注：当元素点击以后 show显示为true时，会先立马到enter时间点状态，不过因为是个时间点，所以它瞬间要回到本身自己的位置；但是因为你在v-enter-active设置了过渡，所以从enter位置到元素本身位置过渡；
当元素点击后show为false时，会从本身元素的位置到v-leave-to元素已经离开的位置过渡；
相当于
v-enter ------》 v-enter-to -----》 元素本身位置 -------》v-leave -------》v-leave-to
动画要用trasition标签包起来
时间段控制哪些属性过渡；
/* .v-enter 元素的起始状态是一个时间点； */
/* .v-leave-to 动画的离开时候的状态时一个时间点； */
<style>
.v-enter,
.v-leave-to{
opacity: 1;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 1s ease;
}
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateY(150px);
}
.my-enter-active,
.my-leave-active {
transition: all 1s ease;
}
</style>
<body>
<div id="app">
<input type="button" @click='flag=!flag, flag1=!flag1' value="toggle">
<transition>
<h3 v-if='flag'>h3</h3>
</transition>
//可以给transition指定name属性='自定义动画名'，通过自定义动画名-enterl来写css
//也可以对元素指定过渡模式：in-out新元素先进来，老元素离开；out-in当前元素先进行过渡，完成之后新元素过渡进入
<transition name='my' mode='过渡模式'>
<h3 v-if="flag1">my</h3>
</transition>
</div>
<script src="../lib/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
flag:true,
flag1:true,
}
})
</script>
##组件切换
<a href="/#/login" @click.prevent="spa='login'">登录</a>
<a href="/#/regist" @click.prevent="spa='regist'">注册</a>
<a href="/#/travel" @click.prevent="spa='travel'">游客</a>
<keep-alive>
<component :is="spa"></component>
</keep-alive>
<script>
var app = new Vue({
el:"#app",
data:{
flag:true,
spa:"login"
},
components:{
'login':{
template:"<li>登录组件</li>"
} ,
'regist':{
template:"<li>注册组件</li>"
},
'travel':{
template:"<li>游客组件</li>"
}
}
})
</script>
##vue路由
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo" tag='渲染标签的形式'>Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
###路由组件
1.定义组件
const login = {template：'',...}
2.创建路由对象
const router = new VueRouter({
3.注册路由规则
routes:[{path:'/',redirect:'/login'},
{path:'/login',components:'login'}
]
})
可以通过this.$route.params访问到路由的参数
this.$router.push({ name: 'news', params: { userId: 123 }})获取通过this.params.userId
或者在定义路由规则时：{path:'/login/:userId'}
