•  

    Vue.js学习笔记

    1 Vue.js基础

    Vue.js介绍

    image-20220420122224815

    Vue.js 如何应用

    1 在普通html项目中,引入VUE.JS

    Hb 的项目 生成的 默认是3.X版本

    修改为 2.6.10版本

    在html head 里 引进js文件

    2 利用vue cli 搭建工程模式

    image-20220331141742005

    Hello Vue

    标签绑定

    标签绑定v-bind单向数据绑定

    vue v- 叫做vue的指令

    v-bind 可以动态修改HTML标签的属性

     

    标签绑定v-model双向数据绑定 (重点)

    v-model 是应用在表单元素中的。 表单元素 input select

    狭义:

    它会把表单元素input value值 和 data里定义的属性值进行双向绑定。

     

    所谓 双向绑定 VM层数据绑定,一句话 你变我也变 我变你也变。

     

     

    标签绑定v-on事件绑定(重点)

    js 事件:https://developer.mozilla.org/zh-CN/docs/Web/Events

     

    标签绑定_v-text_v-html_v-show

     

     

    标签绑定_v-if-else(重点)

    一些问题

    标签绑定_v-for (重点)

    js for 循环 遍历

    fori forli forof

     

     

    标签绑定_v-once 一次

    指令汇总

    image.png

    网络通讯(第三方模块)_Axios_ajax(重点)

    axios文档: http://www.axios-js.com/zh-cn/docs/

    CURD案例

    CURD create update read delete

    95% 代码 都是处理CURD

    一些概念解释

    回调函数 函数一种形式

    简单点说,一个函数被作为参数传递给另一个函数(在这里我们把另一个函数叫做“otherFunction”),回调函数在otherFunction中被调用。

     

    用途:我们需要等到一个操作结束之后再进行下一个操作。简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数

    this

    this js都关键字 代表一个对象

    全局

    函数

    方法

    匿名函数

    箭头函数

     

    内置对象

    内置对象 BOM DOM

    https://www.runoob.com/jsref/obj-window.html

    事件对象 $event 重点)

    常见事件

    v-on @keydown

    事件描述
    鼠标、键盘事件 
    onclick点击鼠标时触发此事件
    ondblclick双击鼠标时触发此事件
    onmousedown按下鼠标时触发此事件
    onmouseup鼠标按下后又松开时触发此事件
    onmouseover当鼠标移动到某个元素上方时触发此事件
    onmousemove移动鼠标时触发此事件
    onmouseout当鼠标离开某个元素范围时触发此事件
    onkeypress当按下并松开键盘上的某个键时触发此事件
    onkeydown当按下键盘上的某个按键时触发此事件
    onkeyup当放开键盘上的某个按键时触发此事件
     三个事件的执行顺序是: keydown – keypress — keyup
    窗口事件 
    onabort图片在下载过程中被用户中断时触发此事件
    onbeforeunload当前页面的内容将要被改变时触发此事件
    onerror出现错误时触发此事件
    onload页面内容加载完成时触发此事件
    onmove当移动浏览器的窗口时触发此事件
    onresize当改变浏览器的窗口大小时触发此事件
    onscroll当滚动浏览器的滚动条时触发此事件
    onstop当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
    oncontextmenu当弹出右键上下文菜单时触发此事件
    onunload改变当前页面时触发此事件
    表单事件 
    onblur当前元素失去焦点时触发此事件
    onchange当前元素失去焦点并且元素的内容发生改变时触发此事件
    onfocus当某个元素获得焦点时触发此事件
    onreset当点击表单中的重置按钮时触发此事件
    onsubmit当提交表单时触发此事件

     

    $event 事件对象

    写法: 不传参数 showMsg($event) 传参数:showMsg(aaa,$event) 多个参数:showMsg(aaa,bbb,$event) 有参数时,放在最后一个参数位置上

    属性方法说明使用
    e.target返回触发事件的对象(标准)
    e.srcElement返回触发事件的对象(非标准 ie6-ie8)
    e.type返回触发事件的类型 如:click,mouseover
    e.cancelBubble阻止冒泡 非标准 ie6-ie8e.cancelBubble = true;
    e.returnValue该属性阻止默认方法(默认行为), 非标准 ie6-ie8
    e.preventDefault()该方法阻止默认方法(默认行为), 标准
    e.stopPropagation()该方法 阻止冒泡 标准e.stopPropagation()

     

    v-if v-show 区别 v-show display none v-if false 彻底 不渲染

    v-for: (item,index) in lists 循环数组 item 代表数组本身 index 是数组索引

    v-model:

    标题
    DIV 不能绑定v-model v-model 表单元素上

    v-bind 和 v-model 相同点:数据绑定 区别 1 v-bind单向绑定元素属性 v-model 双向绑定表单元素的值 2 v-bind 所有元素 v-model 表单元素上

    操作DOM $refs (重点)

    关于dom操作,vuejs的思想:通过操作数值,来 操作dom对象。 v-if= isShow data:{isShow }

    ref 被用来给HTML 元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

    表单特殊元素的绑定

    textarea 的双向数据绑定

    我们之前讲过 input 的双向数据绑定

    textarea 也可以进行双向数据绑定

     

    checkbox 的双向数据绑定

    checkbox 也可以双向数据绑定, 不过绑定的值, 最好是布尔值

    如果是多个 checkbox, 建议把变量做成数组, 同时一定要有 value 属性和它的值

    选中状态:

     

     

    radio 的双向数据绑定

    单选框也可以做双向数据绑定, 绑定的变量给一个空字符串即可

     

    下拉框的双向数据绑定

    下拉框也可以进行双向数据绑定,变量可以给一个空字符串

     

    如果牵涉到默认选中状态, 可以修改 selectValue 的值

     

    如果想把第一项变成提示信息, 可以这么写

    如果 option 的数据不是写死的, 而是从后台传过来的, 我们可以在变量中定义 option 的值

     

    CURD案例(优化)

    1 项目简介 改单击查看按钮 弹出对话框 通过传递数组下标[索引] 来获取数据

     

    2 添加项目总数的显示

     

    3 新增和修改合并为 单页面

    4 新建和修改部分字段采用select 和 radio双向绑定

     

    5 按id 姓名排序

     

    6 过滤显示

     

     

    4/14作业要求

    1 做项目简介的按钮 项目总数的展示

    2 将新建和修改页面中的部分字段采用select 和 radio展示

    3 开发方式和开发商 联动 1 当开发方式是自研 开发商只能有科技公司,; 2 当 外委 模式,没有科技公司

    select onchange事件-> 当值==自研 开发商列表数组,要去掉其他三个

    华东电子 济南洋溢 唐山连拖 科技公司

     

    修饰符

    事件修饰符

    v-on

    事件冒泡:多个事件从里到外逐步触发,这个过程叫做事件冒泡

    • .stop 组织事件冒泡

     

    • .capture 捕获事件,从外到里

    • `.prevent .prevent 阻止默认行为 a href 阻止表单的提交行为 前后端分离 form submit方法

    • .self <li @click.self="gotoPage()"> 当点击到li的自己可视化区域内,才触发事件;如果点击li下的button区域,则不会触发li的gotoPage事件

    • .once 在当前页面的生命周期内执行一次

    • .passive

    表单元素修饰符

    v-model

    .number 将输入框的值转为number类型 .lazy 输入框 失去焦点后 才进行绑定 .trim 自动将字符串的前后空格去掉

    按键修饰符

    比如我们想要在 input 中输入值以后, 按回车触发对应事件, 可以使用@keydown.enter="函数名", 同理, 也可以监听tab, delete, esc, up, down, left, right

    <input type="password" name="" id="" value="" @keydown.esc="submit" /> keydown 当按下键盘上的某个按键时触发此事件 keyup 当放开键盘上的某个按键时触发此事件 keypress 当按下并松开键盘上的某个键时触发此事件

     

    截屏2021-07-11 下午9.56.53.png

    VUE七大属性

    挂载属性 el

    数据属性 data

    方法属性 methods

    过滤属性 filter

    计算属性 computed(重点)

     

    侦听属性:watch

    模板属性:template

    它会替换掉当前实例的dom内容

    template: <img src="img/fire.png" >

     

    样式处理-class和style(重点)

    动态class对象:<div :class="{ 'is-active': true, 'red': isRed }"></div>

    动态class数组:<div :class="['is-active', isRed ? 'red' : '' ]"></div>

     

    动态style对象:<div :style="{ color: textColor, fontSize: '18px' }"></div>

    动态style数组:<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

     

    列表高亮

    三个问题:

    1 watch深度监听不到对象的属性

    如果是直接修改的对象的属性值,是检测不到的,需要重新对对象进行赋值。

    image-20220417175120667

     

    2 按中文排序 localeCompare 有点不正常

    是因为某些汉字是多音字

    js库 插件 实现多音字

    3 过滤属性filter拿不到this的数据

    解决方案:尚晋

    vue中的过滤器更偏向于对文本数据的转化,不能够一揽this上下文,所以如果需要使用到上下文的this,应该使用computed计算属性或者method方法

     

    2 Vue.js进阶

    生命周期_钩子函数(重点)

    生命周期函数:在某一时刻, 自动执行的函数。到什么时候做什么事,自动!!

    生命:拟人化

    https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html

     

    image-20220420112056114

     

    beforeCreate, created,beforeMount, mounted

    beforeCreate: 在实例生成之前会自动执行的函数

    created: 在实例生成之后会自动执行的函数

    beforeMount: 在组件内容被渲染到页面之前自动执行的函数

    mounted: 在组件内容被渲染到页面之后自动执行的函数

    此四个函数在页面加载结束后,会以此执行。

    beforeUpdate,updated

    beforeUpdate: 当数据发生变化时会立即自动执行的函数

    updated: 当数据发生变化,页面重新渲染后,会自动执行的函数

    在控制台使用vm.$data可以修改数据

    beforeDestroy destroyed

    beforeDestroy 组件销毁前要执行的方法

    destroyed 销毁之后要执行的方法

    keep-live

     

    自定义属性

    我们可以定义一个属性, 它既不在 data 里面, 也不再 methods 里面, 它和 data, methods 等等属性是同级的, 通过this.$options来访问

     

     

    自定义指令

    假设我们有如下代码, 一个 input 框, 加载页面后自动聚焦, 我们可以这么写

    自定义指令-钩子函数

     

    自定义指令-参数

    v-change="100" 传值, binding.value接收并使用

    我们也可以把 top 的参数值写成 data

     

    接下来, 我们想要这样的效果v-pos:left="200"代表距离左边 200px, v-pos:top="400"代表距离顶部 400px, 那我们的自定义指令应该怎么写呢?

     

    自定义事件

    先留个坑

    Vue.js 过渡 & 动画

    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。

    Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。

    CSS3

    transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

    transition 属性是一个简写属性,用于设置四个过渡属性:

    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay

    https://cn.vuejs.org/v2/guide/transitions.html

     

     

    总结 实例的一些特殊 $开头的属性和方法

    $data

    Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。

    $el

    Vue 实例使用的根 DOM 元素。

    $refs

    一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例.

    $options

    用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处 还可以调用过滤属性

     

     

    Vue组件基础 (重点)

    组件实现与步骤

    什么是组件化?

    任何一个人处理信息的逻辑能力都是有限的。 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆内容。 但是,我们人有一种天生的能力,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现问题也会迎刃而解。

    新房装修 改水电 地板砖 木工进厂 刷漆 买家具 家电 入住

    如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。 但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么,之后整个页面的管理和维护就会变得非常容易了。

    Vue的组件化思想

    组件: 页面上的一部分

    可以把一个大的网页, 拆分成很多个页面组件进行维护,根据页面组件中的通用功能抽离功能组件

    举例!

    image-20220420115621828

    注册组件的基本步骤

    组件的使用分成三个步骤

    1. 调用Vue.extend()方法创建组件构造器
    2. 调用Vue.component()方法注册组件
    3. 在Vue实例的作用范围内使用组件

     

    注册组件步骤解析:

    Vue.extend():

    调用Vue.extend()创建的是一个组件的构造器。 创建一个组件。

    通常在创建组件构造器时,传入template代表我们自定义组件的模板。重要的是,组件的内容必须要用一个根元素来进行包裹,且只能有一个根元素

     

    Vue.component():

    调用Vue.compoment()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。

    所需要传递两个参数:1、注册组件的标签名。2、组件构造器。

    组件必须挂载在某个Vue实例下,否则不会生效

     

    组件的复用

    全局组件和局部组件

    首先,我们上面写的组件就是全局组件,可以在不同的Vue实例中使用,下面来说一下局部组件

    局部组件:在vue实例中,添加components(复数)属性,可写多个。

    父组件和子组件

    语法糖注册组件 v-on @ v-bind :

    全局注册
    局部注册

    组件模板的分离

    刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。

    如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。

    Vue提供两种方案来定义HTML模板内容:

    使用<script>标签 type="text/x-template"

    使用<template>标签

     

    都要赋予id='xxx'的属性. class 来寻找失败

    注册:

    全局文件的分离

    js文件分离,在Html页面引入js

    模板分离:

    方法一: .vue单文件组件,这是后面的vue工程知识,所以前期不用担心模板怎么去独立到一个文件。 方法二: 建立独立的html,在js中通过ajax请求,异步组件。

    组件可以访问Vue实例数据么?

    实验:

     

    结论:我们经过测试,组件中不能直接访问Vue实例中的data。

    Vue组件拥有属于自己的HTML模板,也有属于自己的数据data,即应该有自己保存数据的地方。

    组件数据的存放

    组件自己的数据存放在哪里?

    • 组件对象也有一个data属性(也可以有methods等属性)
    • 只是这个data属性必须是一个函数,Vue实例data可以是对象
    • 而且这个函数返回一个对象,对象内部保存着数据

    4.28 作业

    1 html项目,抽出顶部菜单 底部 两个组件。

    2 抽出顶部菜单的搜素框,作为顶部菜单的子组件。

    组件通信

    通信,即组件将自己的数据(data)进行传递.

    在前面将父子组件的时候,我们提到子组件是不能引用父组件或者Vue实例的数据的。

    但是在开发中,往往一些数据确实需要从上层传递到下层。

    比如在一个页面中,我们从服务器请求到了很多的数据。

    其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。比如导航菜单. 这个时候,并不会让子组件再一次发送一个网站请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。 如何进行父子组件间的通信呢?

    Vue官方提到:

    通过props向子组件传递 通过事件向父组件发送消息 下面的代码中,我们直接将Vue实例当做父组件,并且其中包含子组件来简化代码。在真实开发中,Vue实例和子组件的通信与父组件和子组件的通信过程是一样的。

    父子组件通信
    父传子:props用法