投稿
  1. 极客之音首页

Vue框架学习基础

小半 • • 未分类 • 阅读 170

导读：本篇文章讲解 Vue框架学习基础，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

Vue框架学习—-基础

1.vue

vue是渐进式框架，可作为应用一部分嵌入。

功能包括：

1）解耦视图、数据

2）可复用组件

3）前端路由技术

4）状态管理

5）虚拟DOM

2.vue安装

方式1：CDN引入 在这里插入图片描述

方式2：下载、引入

在这里插入图片描述

方式3：NPM安装

随后，新建项目，在项目内设置一个新文件夹，将vue.js放入

3.第一个vuejs

新建文件夹，再在其中新建一个HTML文件 在这里插入图片描述

其中，new Vue（{参数为对象}）

var变量无作用域

一般使用let（变量）、const（常量） 在这里插入图片描述

声明式编程，数据与样式分开处理

创建Vue对象时，传入options：{}
其中包括el属性，决定将Vue对象挂载到哪个元素；data属性：存储数据

4.Vue列表

data属性里加入movies 列表 在这里插入图片描述

  • 标签里用v-for指令 进行遍历循环（响应式）

  • 在这里插入图片描述

    5.Vue计数器

    method属性：定义方法

    使用this取当前对象

    在这里插入图片描述

    v-on：click指令去调用函数，@click语法糖

    在这里插入图片描述

    6.Vue MVVM

    Model VueModel View

    在这里插入图片描述

    Model

    在这里插入图片描述

    VueModel

    在这里插入图片描述

    View

    在这里插入图片描述

    7.Vue options

    在这里插入图片描述

    8.Vue 模板设置

    在这里插入图片描述 在这里插入图片描述

    设置好后，直接打vue 再按Tab即可显示

    在这里插入图片描述

    9.Vue Mustache

    插值操作

    Mustache语法，即双大括号{{}}，不仅可以直接写变量，可以写简单表达式

    在这里插入图片描述

    其他指令：

    v-once指令，只渲染元素和组件一次

    在这里插入图片描述

    v-html指令，解析html代码

    在这里插入图片描述

    在这里插入图片描述

    v-text指令，与mustache类似

    在这里插入图片描述

    v-pre指令，不解析原封不动的显示

    v-cloak指令， vue解析之后，该属性会消失，

    在这里插入图片描述

    10.vue v-bind

    mustache语法只能在内容里作用

    动态绑定属性

    在这里插入图片描述

    简写方式： 在这里插入图片描述

    动态绑定class(对象语法)

    在这里插入图片描述

    可以绑定键值对，改变其boolean值

    在这里插入图片描述 在这里插入图片描述

    动态绑定class（数组语法）

    在这里插入图片描述

    在这里插入图片描述

    类名可采用数组形式，加引号表示字符串

    在这里插入图片描述

    不加引号，表示对象

    在这里插入图片描述

    动态绑定style（对象语法）

    在这里插入图片描述

    其中，属性名：驼峰法直接写，短横线需要单引号

    在这里插入图片描述

    动态绑定style（数组语法）

    在这里插入图片描述

    11.计算属性

    computed计算属性，构造的函数可作为属性使用。（具有缓存，构造的方法不具有缓存）

    在这里插入图片描述

    setter、getter（完整写法包含）

    属性对应一个对象，其中包括set与get 在这里插入图片描述

    一般不需要实现set方法，即只读属性，只用get

    即简写为：

    fullName：function（）{

    }

    set设置修改如：

    在这里插入图片描述

    12.ES6语法

    块级作用域let/var、const

    ES5中var没有块级作用域，是全局变量

    在if和for中，let有作用域

    connst使用

    将变量修饰成常量，不可再修改，必须进行赋值

    指向的对象不可修改，但可改变对象内部属性

    对象的增强写法

    对象字面量

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

    13.v-on事件监听

    基础语法：

    在这里插入图片描述

    在这里插入图片描述

    语法糖写法：

    v-on: 替换成@

    在这里插入图片描述

    v-on参数问题

    在这里插入图片描述

    在这里插入图片描述

    v-on修饰符

    .stop修饰符使用

    在这里插入图片描述

    阻止button的冒泡事件，即点击button，div点击事件也触发的现象

    .prevent修饰符使用

    在这里插入图片描述

    阻止form的默认事件

    在这里插入图片描述

    .{keyCode|keyAlias}修饰符

    事件从特定键触发时才回调，比如敲回车时触发

    在这里插入图片描述

    .native修饰符

    监听组件根元素的原生事件，使用自定义组件时

    在这里插入图片描述

    .once修饰符

    只触发一次回调

    在这里插入图片描述

    14.v-if、v-else-if、v-else

    在这里插入图片描述

    v-if isshow为true时显示，false时不显示，显示v-else内容

    VUE进行DOM渲染时会复用已存在的元素

    15.v-show 与 v-if 对比

    v-if条件为false时，元素不存在DOM中

    v-show条件为false，仅将元素的display属性改为none

    改之前:

    在这里插入图片描述

    改之后：

    在这里插入图片描述

    注：当显示与隐藏切换频繁时用v-show，若只有一次切换则用v-if

    16.v-for 遍历数组

    v-for遍历数组

    在这里插入图片描述

    v-for遍历对象 在这里插入图片描述

    v-for 绑定key

    key的作用是为高效的更新虚拟DOM

    在这里插入图片描述

    响应式方法：

    在这里插入图片描述

    不可响应方法及替换方法

    在这里插入图片描述

    17.过滤器

    在filter中构造函数

    在这里插入图片描述

    直接在Mustache语法中使用

    在这里插入图片描述

    18.Javascript高阶函数

    filter/map/reduce

    filter函数：（相当于给数组做减法）

    其回调函数需要一个Boolean值，当true时，函数内部自动将回调的n加入新数组中，当false时，直接过滤掉

    在这里插入图片描述

    map函数：（对数组进行统一变化）

    在这里插入图片描述

    reduce函数：（数组汇总）

    在这里插入图片描述

    箭头函数写法：

    在这里插入图片描述

    19.表单绑定v-model使用

    实现表单元素和数据的双向绑定,也适用于

    在这里插入图片描述

    在这里插入图片描述

    1)结合radio类型

    在这里插入图片描述

    v-model可实现name属性相同时只能选一个的效果，若sex属性值一开始设置为男（女），则可直接实现上述效果

    2）结合checkbox类型

    单选框、多选框

    在这里插入图片描述

    单选框形式，可以实现先后操作 在这里插入图片描述

    多选框，值是数组形式存储

    在这里插入图片描述

    3）结合select类型

    分选择一个、选择多个

    选择一个

    在这里插入图片描述

    选择多个

    在这里插入图片描述

    v-model绑定的属性值为，选择一个（字符串）、选择多个（数组）

    4）值绑定！！！！！！

    在这里插入图片描述 在这里插入图片描述

    5）修饰符
    lazy修饰符：（延缓同步更新）

    在这里插入图片描述

    number修饰符：（类型转换）

    在这里插入图片描述

    trim修饰符：（取消空格）

    在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/2638.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！