Vue 基本语法笔记

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 事件查询

事件处理 — Vue.js

自定义全局指令执行

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 事件查询

事件处理 — Vue.js

自定义全局指令执行

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 脚手架安装配置