vue学习笔记01

这次是重新开始学习，时隔太久远了不记得了， 用同学推荐的教程：教程在这里

目录

1.VUE入门

下载

MVVM

1.插值操作（有v-bind）

2.计算属性

3.事件监听（v-on）

v-on修饰符

4.条件判断

一个小问题：如何解决登录切换的input复用问题

5.v-show

6.遍历操作

组件的key属性

7.哪些操作是响应式的？

8.过滤器

9.JS的高级函数

循环的方式

filter，map ，reduce

10.表单绑定v-model

v-model:radio

v-model:checkbox

v-model:select

值绑定

修饰符

2.组件化开发

基本步骤：

全局和局部实例

父组件和子组件

注册组件语法糖

模板分离

vue组件中数据存放问题

父子组件的通信

父传子实例：

注意：

子传父实例

父子组件的访问方式

父访问子-$children

父访问子-$refs

子访问父-$parent

插槽slot

简单使用

具名插槽

作用域插槽

编译作用域

作用域插槽

0.ES6语法

---

1.VUE入门

下载

 

 

MVVM

 

1.插值操作（有v-bind）

【1】MustAche语法-双大括号语法

 

【2】v-once：显示数据，但是只能赋值一次，如果这个属性修改了，使用了v-once的地方不敢改变位置

【3】v-html：使用mustache语法，data中最后展示出来的都是String格式，如果我们想要一起展示带有标签的内容我们需要使用v-html来显示

  

【4】v-text：输出String，但是这个会覆盖掉标签中的内容

 

【5】v-pre：不解析标签中的内容

 

【6】v-cloak：在vue解析完之前v-cloak都会存在，注意这个操作本身是不会隐藏我们的内容的，我们需要添加样式才可以

  

【7】v-bind：动态绑定属性，把内容解析成data中的变量，简写为：：

 

同样可以指定到class中来控制样式，我们控制样式的方法通常使用功能键值对的方式来控制，

语法为：{key1：value1，key2：value2}

 

为了更加好看我们可以把内容放到方法中

  

同样可以用来绑定style语法如下所示：

 

 

2.计算属性

看起来像是方法，其实是属性（在方法或者是计算的时候我们使用data中的数据需要添加上this.）

 

计算属性的原理：内部为一个data对象的get和set方法。上述写法其实是简写方式，表示get方法。

 

计算属性和methods方法有什么区别呢？

计算属性有缓存，所以多次调用会减少内存消耗，只有在修改了计算属性的时候才会重新调用。

3.事件监听（v-on）

当我们交互的时候需要监听点击，拖拽和键盘事件等等。缩写：@

 

在事件定义的时候，写函数时省略小括号，但是方法本身需要一个参数时，vue会默认将浏览器生成的evnet对象作为参数传入到方法中

 

如果我们需要传入参数，又需要event参数，我们使用$event

 

 

v-on修饰符

stop修饰符：阻止事件冒泡（由内到外）

 

prevent修饰符：阻止原来的默认事件

 

监听键盘点击事件

  

native监听组件根元素的原生事件

 

once只触发一次

 

4.条件判断

v-if，v-else-if。v-else。原理如果条件为false，对应的元素和子元素不会渲染，也就是不会有对应的标签出现在DOM中。

如果条件很多我们不推荐使用。把更多的逻辑放到option中

  

一个小问题：如何解决登录切换的input复用问题

 

 

5.v-show

和v-if还是有所区别的，v-show如果为false表示，把当前元素的display设置为none，如果v-if则根本不会有对应元素在DOM中。

使用情况：需要频繁切换是否使用的时候我们使用v-show

6.遍历操作

v-for：遍历数组

 

可以通过这个方法拿到下标的值

 

同样可以遍历对象

 

注意这里是值在前，键在后

 

组件的key属性

  

也就是绑定了之后，我们插入插入的值会显示为index=6?

 

7.哪些操作是响应式的？

通过索引值修改数组的元素不是响应式的，我们没法实时看到修改

 

下述方法都是响应式的：

 

 

 

 

8.过滤器

作用类似于函数，分为全局过滤器和局部过滤器，语法如下：

 

使用案例：

 

9.JS的高级函数

循环的方式

  

filter，map ，reduce

 

如果我们要把数组乘2，不需要遍历使用map函数即可

 

reduce是对数组中所有内容解析汇总的

 

10.表单绑定v-model

实现表单元素和数据的双向绑定。

 

这个时候我们修改任何一个两个都会修改

 

原理：bind绑定一个value属性，on给当前元素绑定input事件

 

或者是

 

v-model:radio

 

v-model:checkbox

  

v-model:select

 

值绑定

  

修饰符

lazy：只有回车或者失去焦点的时候才会更新，不是实时绑定

 

number：设定类型为number类型

 

trim：删除首尾空格

 

2.组件化开发

基本步骤：

创建组件构造器，注册组件，使用组件

 

注意这里template使用的是` `,不是单引号

 

全局和局部实例

上述为全局，下述为局部

 

父组件和子组件

  

注册组件语法糖

  

模板分离

写法1：x-template

 

写法2：使用template模板

 

vue组件中数据存放问题

使用data中需要使用函数,每个组件都有单独的数据。

 

父子组件的通信

1.通过props向子组件传递数据

2.通过事件向父组件传递消息

 

父传子实例：

 

 

 

 

注意：

现版本的vue不支持驼峰命名法，如果要使用驼峰命名法，我们需要使用-和小写来代替，这点类似于SpringBoot

 

子传父实例

 

 

父子组件的访问方式

父访问子：$children $refs

子访问父：$parent

父访问子-$children

 

父访问子-$refs

使用这个的时候需要在组件中定意思一个ref的内容，否则为空

  

子访问父-$parent

会增加耦合，减少复用性

 

插槽slot

简单使用

组件的插槽视为了让组件有更强的拓展性。感觉类似于java中的基类

具名插槽

如果没写名字只会替换掉没写名字的

作用域插槽

编译作用域

看id，id是哪个作用域就是哪个

作用域插槽

父组件替换插槽的标签，但是内容由子组件来提供

也就是在父组件插槽中使用子组件的数据

 

0.ES6语法

1.let&const：由于var中的作用域主要是和函数的定义相关，针对其他的块来说是没有作用域的（例如if/for），这就会出现一些问题。而let会有块级作用域。优先使用const，只有需要改变标识符的时候才使用let。在使用const修饰对象的时候，我们不能修改对象，但是可以修改对象内部的属性。（我认为是因为我们const表示对象的地址是不能修改的，但是对象的属性并不是对象地址，所以可以改变）如下所示

 

：2.对象的增强写法

属性的增强写法：会直接把对象名作为key传入到对象的属性中作为名称

  

函数的增强写法