vue.js笔记

vue.js个人学习笔记

双向绑定

V-model指令：双向绑定，model中的值改变会改变显示中的值，显示的值改变的时候会改变el中的值；
使用它可以将数据模型中的值显示在表单控件中，还可以在用户改变表单控件值的情况下改变数据模型；
控件改变，vue也改变，反之如此；
.

事件绑定

V-on:cick指令：用来绑定事件，冒号后面是事件类型；另一个写法 @click ;

事件绑定时必须在methods中

在表单提交的时候会出出现页面跳转情况，会出现页面刷新情况：
$event : 事件处理对象


事件修饰符：
@click.stop="" 阻止事件冒泡
事件冒泡：就是当点击内部子元素时，外部元素也会做出相应的动作；
@click.prevent=""阻止时间默认行为
@click.once:只执行一次

键盘修饰符：
@keyup.enter="" enter键抬起 回车键
@keydown.13="" enter建按下
.enter相当于.13

属性绑定：

v-:bind:属性名=“值”：值会从vue的data中取，即data中的属性名；
**:属性名=“”**另一种写法

计算属性：

可以进行简单的属性计算的属性
与data,el，methods同一级别
computed:{ **
userList(){
return 1;//必须有返回值**
}

}
访问时：{{ userList }}

元素显示与隐藏

v-if=“true” 显示
v-else false 显示
v-show
v-show: 节点还存在DOM，只是用户看不见，占用着视图空间；
v-for:如果值为true，显示，如果为false时，从文档结构中删除该元素，不占用视图空间；
二者只能存在一种；

vue实例生命周期 钩子函数

beforeCreate()
在vue实例创建完毕，内部属性和方法还没有设置好，触发该事件。
created() 使用较多1
在vue实例创建完毕，内部属性和方法设置好。
一般是向后台发送请求数据。
beforMount()
节点还没绑定好前，节点与vue实例绑定好前；
mounted（）
节点加载完毕，并且与vue实例中的属性和方法绑定好了。
选中页面中的元素。
beforeUpdate()
在数据更新前出发的钩子函数，在页面渲染更新前。
updated （）
页面渲染更新完毕。
before destroy（）
页面销毁之前，vue实例销毁前，还可以访问数据。
destroyed（）
页面完全销毁，vue实例属性和方法也没有，绑定也没了，各种没。

vue的动画：

animate.css:

效果;

transaction组件:
自定义的类实现动画
。v-enter 进入之前的样式
。v-enter-active 正在进入的样式
。v-enter-to 进入之后的样式
。v-leave-active正在离开的样式
。v-leave-to 完全离开之后的样式

ve{
transition:all 3s;
}

使用钩子函数实现动画某一事件时候触发的函数

组件：

1.全局组件
Vue.component(‘组件名称’ ，{vue实例 } )

局部注册：只能在绑定的app内部使用；

组件插槽：

动态组件：

选项卡切换：

过滤器：

全局声明：

局部声明：

路由：

vue-router: