1.创建Vue对象
//下载git
2.双向传递 v-model
向input内传输数据会改变vue对象中的值
3.v-once 让数据只刷新渲染一次
4v-cloak:
该指令将保留在元素上,直到关联的Vue实例完成编译。与CSS规则相结合,例如
[v-cloak] { display: none }
,此指令可用于隐藏未编译的胡子绑定,直到Vue实例准备就绪为止。
5 v-test
插值的方式
会覆盖原有内容不会解析html
如ww like innertext
网页上还是会显示ww
6 v-html
会解析里面的值、
如innerhtml
7 v-if
show:true
hidden:flase
可以直接写表达式
v-else
v-show
如果需要反复隐藏一个属性,那么用v-show:true 他只会为属性添加dispaly:none
v-for
可以遍历数组 数字 字符 对象
v-bind 给元素的属性绑定数据
简写为
绑定类名
v-on
监听事件
两种写法
1.v-on:事件=‘’,
2.@事件=‘’
专门写事件回调函数的地方
需要函数的话必须将函数方法写到methods:{
}中
只执行事件函数一次可以使用
v-on:事件.once
.stop阻止冒泡事件
.self 当前元素触发才会执行
回调函数传参
获取原生对象
获取data中的数据this 的调用
@keyup按键修饰符
f1=112
vue 事件查询
自定义全局指令执行
focus()聚焦函数方法
想自定义全局函数中传参
注意:需要加两个引号
自定义局部指令
可以再vue中合理的使用js语句
专门用于计算属性
注意
method中要执行多次
自定义过滤器
全局过滤器
局部过滤器
写到需要使用的地方局部
过滤时间函数
过渡动画
需要给那个组件添加动画需要将组件放在
这个方法可以判断他的false true值进行切换
注意:一个transition 中只能有一个组件
如果需要组件进入网页直接开始运行动画的话 需要给transition家一个appear的属性
如果存在多个transition 给他绑定动画需要在transition中添加name属性
列那么style 中 v-enter改为one-enter即可
解决过渡复位
自定义过渡动画的的类名
cssannimate动画库
https://cdn.jsdelivr.net/npm/animate.css@3.5.1
v-for 中 :key
需要用key绑定上去才能绑定
因为vue每一次更新数据他都要重新渲染一次界面所以通过key绑定的方法他会获取缓存,找到他是否有id 如果没有就给他加上去,有的话就从缓存中取出来
transition-group 给多个对象添加动画
transition transition -group属性默认会把里面的元素放在span中
这时候我们需要为transition 中添加一个tag属性 制定放在哪个元素中
所以最外层就不需要放ul或者div等 只需要把div或者其他tag属性放在tag中就可以了
vue 组件化
将一个大界面分割成许多个小界面 便于管理、
每一个小界面都是一个组件
全局组件
创建组件构造器方法2
穿件组件方法三
创建模板
格式:
引用:template:#模板名
vue 提供的方法
局部组件、
//如果我们需要在自定义组件中使用函数
//系统就会去自定义函数中找方法
// 所以我们需要在自定义组件创建方法
data也是一样的操作
但是data在自定义组件中必须是一个函数
利用vue data:function 函数的方法 调用多次自定义组件 不会出现数据紊乱的现象,因为他每一次都是单独调用函数
组件切换
"'组件名'">
组件切换
三目运算如果等于home 就切换photo 不然就切换到home吗
缓存选中等事件 保存状态
动画过渡
可以决定动画先进后出还是先出后进
父子组件
只需要将子组件放在父组件中的局部组件中 使用时也只能在自定义组件中用
父子组件数据传递
父子组件传递方法
this.$emit(‘’)
子组件传递到父组件
组件命名
不知能直接使用驼峰命名
多级传递
匿名插槽
具名插槽
给slot 中添加name名称、
给需要追加的tag标签中添加slot=name中的值
这就是具名插槽
vuex简化兄弟共享数据参数的操作
router 路由配置
vue cli 脚手架安装配置
1.创建Vue对象
//下载git
2.双向传递 v-model
向input内传输数据会改变vue对象中的值
3.v-once 让数据只刷新渲染一次
4v-cloak:
该指令将保留在元素上,直到关联的Vue实例完成编译。与CSS规则相结合,例如
[v-cloak] { display: none }
,此指令可用于隐藏未编译的胡子绑定,直到Vue实例准备就绪为止。
5 v-test
插值的方式
会覆盖原有内容不会解析html
如ww like innertext
网页上还是会显示ww
6 v-html
会解析里面的值、
如innerhtml
7 v-if
show:true
hidden:flase
可以直接写表达式
v-else
v-show
如果需要反复隐藏一个属性,那么用v-show:true 他只会为属性添加dispaly:none
v-for
可以遍历数组 数字 字符 对象
v-bind 给元素的属性绑定数据
简写为
绑定类名
v-on
监听事件
两种写法
1.v-on:事件=‘’,
2.@事件=‘’
专门写事件回调函数的地方
需要函数的话必须将函数方法写到methods:{
}中
只执行事件函数一次可以使用
v-on:事件.once
.stop阻止冒泡事件
.self 当前元素触发才会执行
回调函数传参
获取原生对象
获取data中的数据this 的调用
@keyup按键修饰符
f1=112
vue 事件查询
自定义全局指令执行
focus()聚焦函数方法
想自定义全局函数中传参
注意:需要加两个引号
自定义局部指令
可以再vue中合理的使用js语句
专门用于计算属性
注意
method中要执行多次
自定义过滤器
全局过滤器
局部过滤器
写到需要使用的地方局部
过滤时间函数
过渡动画
需要给那个组件添加动画需要将组件放在
这个方法可以判断他的false true值进行切换
注意:一个transition 中只能有一个组件
如果需要组件进入网页直接开始运行动画的话 需要给transition家一个appear的属性
如果存在多个transition 给他绑定动画需要在transition中添加name属性
列那么style 中 v-enter改为one-enter即可
解决过渡复位
自定义过渡动画的的类名
cssannimate动画库
https://cdn.jsdelivr.net/npm/animate.css@3.5.1
v-for 中 :key
需要用key绑定上去才能绑定
因为vue每一次更新数据他都要重新渲染一次界面所以通过key绑定的方法他会获取缓存,找到他是否有id 如果没有就给他加上去,有的话就从缓存中取出来
transition-group 给多个对象添加动画
transition transition -group属性默认会把里面的元素放在span中
这时候我们需要为transition 中添加一个tag属性 制定放在哪个元素中
所以最外层就不需要放ul或者div等 只需要把div或者其他tag属性放在tag中就可以了
vue 组件化
将一个大界面分割成许多个小界面 便于管理、
每一个小界面都是一个组件
全局组件
创建组件构造器方法2
穿件组件方法三
创建模板
格式:
引用:template:#模板名
vue 提供的方法
局部组件、
//如果我们需要在自定义组件中使用函数
//系统就会去自定义函数中找方法
// 所以我们需要在自定义组件创建方法
data也是一样的操作
但是data在自定义组件中必须是一个函数
利用vue data:function 函数的方法 调用多次自定义组件 不会出现数据紊乱的现象,因为他每一次都是单独调用函数
组件切换
"'组件名'">
组件切换
三目运算如果等于home 就切换photo 不然就切换到home吗
缓存选中等事件 保存状态
动画过渡
可以决定动画先进后出还是先出后进
父子组件
只需要将子组件放在父组件中的局部组件中 使用时也只能在自定义组件中用
父子组件数据传递
父子组件传递方法
this.$emit(‘’)
子组件传递到父组件
组件命名
不知能直接使用驼峰命名
多级传递
匿名插槽
具名插槽
给slot 中添加name名称、
给需要追加的tag标签中添加slot=name中的值
这就是具名插槽
vuex简化兄弟共享数据参数的操作
router 路由配置
vue cli 脚手架安装配置