0
点赞
收藏
分享

微信扫一扫

vue.1

624c95384278 2022-01-21 阅读 103
vue.js前端

回忆总结:

const 定义常量
let 定义变量

splice增删插

sort排序

reverst反转

组件化巩固

1.动态绑定属性(v-bind)

(1)两种绑定方式:对象和数组

        动态绑定class

        动态绑定style

(2)语法糖

        v-bind:src

        :src

      

2.指令

(1)v-html 阅读html标签

(2)v-once 只渲染一次

(3)v-text 替换文本,不常用

(4)v-pre 不解析原文本

(5)v-cloak 延迟显示

3.计算属性

小点:计算属性是属性,使用时html中不加()

(1)字符拼接

(2)总价计算

(3)计算属性有缓存,多次使用时效率更高

注意点:计算属性中的get方法和set方法

split()

计算属性比methods效率更高

4.ES6语法

注意点:ES5闭包问题

(1)let,相当于var的升级版,有块级作用域

(2)属性的增强写法,函数的增强写法

5.v-on

(1)传参问题:

        一. 需要传入参数但没有传,会默认传入浏览器生成的event事件对象

        二. 需要传入event对象时,参数写“$event”

        三. 写方法时没有参数可以省略()

(2)语法糖

        <button v-on:click="btn">按钮1</button>

        <button @click="btn">按钮2</button>

        效果相同

(3)修饰符

        一. stop  阻止冒泡

        二. prevent  阻止默认事件

        三.  @ketup.enter(修饰符.键别名)  监听键盘按键

        四. once 只触发一次

       

6.v-if ,v-else

用得少,一般在计算属性(computed)上判断

虚拟dom,复用问题。通过添加“key”解决

7.v-show(切换频率高时使用)

当值为false时,相当于添加行内样式---display:none

8.v-for

(1)遍历数组,若要序列号用index

(2)遍历对象,value(值)、key(变量名)、index(序列号)

(3)key的作用,提高运行效率

9.数组响应式方法

(1)push方法,最后添加

(2)pop删除最后一个

(3)shift删除第一个

(4)unshift在最前面加一个或多个

(5)vue的set函数(疑惑)

(6)sort 排序(疑惑)

(7)reverse  倒序

10.filters过滤器(疑惑)

11.高阶函数

filter:每次取数组里面的值时都会执行回调函数,但是回调函数要求返回的时boolean值

                返回true,函数内部自动将这次调用的n加入到新的数组中

                返回false,过滤掉此次的值

map:回调函数,每次数组的值传入后,返回的值都会作为数组新的值

reduce:作用时---对数组中所有的内容进行汇总

                

12.v-model

(1)双向绑定

(2)radio单选框

        一、只要绑定相同的v-model,可以省略name

        二、v-model里面的变量与radio中的value文本相同

(3)checkbox复选框

        单个复选框:

                一、双向绑定后相同的值为“布尔值”

        

        多选框:

                一、双向绑定后相同的值为“数组”、

(4)select

        选择一个:

                一、v-model属性写在select而不是option

                二、返回的只有一个值

        选择多个(select添加multiple属性):

                一、返回的是数组

(5)修饰符

        一、lazy:

                双向绑定,但内容在失去焦点或者回车时才会更新

        二、number:

                双向绑定时值默认都是string型(字符串类型)

                用v-model.number转化为数字型

        三、trim:

                脱除空格

13.组件化

(1)创建组件构造器对象

(2)注册事件

(3)全局组件和局部组件

        一、全局组件可以在多个实例里面用

        二、在实例里面注册组件就是局部组件

(4)父组件和子组件(在父组件里面直接注册)

         子组件在脱离父组件单独使用时,需要单独注册一次(除了在父组件上面注册)

(5)语法糖

                将创建组件extend里面的内容直接放在注册组件component中

(6)组件模板的分离写法

        一、<script type="text/x-template" id="组件名"></script>

        二、<template id="组件名"></template>

(7)组件里面的data是函数不是对象

(8)父子组件通信

父组件向子组件传递:

一.props的值的两种方式

        (一)type:(设置传入数据类型)     《 -------有一个自定义类型

                方式一:字符串数组,数组中的字符串就是传递时的名称

                方式二:对象可以设置传递时的类型,也可以设置默认值

                注意点:如过数据类型时对象(object)时,default用函数        

        (二)default:(设置默认值)

        (三)required:( 当设值为布尔值(required)为true时,该变量必从父组件中传值过来)

子组件向父组件传递:

一.通过事件,自定义事件
     $emit

    $emit发射一个事件----父组件的模板中(@事件名)来监听----监听的事件在父组件的methods中

14.

举报

相关推荐

0 条评论