Vue
2021-10-07 18:18:16 0 举报AI智能生成
登录查看完整内容
Vue基础知识及部分伪代码,例如：生命周期、dom、MVVM、组件、常用指令、路由、axios、mustche语法等
作者其他创作
大纲/内容
在实例创建完成后被立即调用。
created
渲染整个视图之后运行的代码
mounted
updated数据发生改变
updated
实例销毁
destroyed
生命周期
类型：string | element
详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
el：
字符串模板，被使用会代替挂载元素
template：
DOM
cd day+tabvue create +项目名 选择你的配置 创建方式(manually select features 手动) choose vue version，babel，router，vuex
创建
MVVM是Model-View-ViewModel的简写
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
MVVM模式
如果在使用该框架时，要继承框架提供的实体类或实现框架提供的接口，这就说明该框架是侵入式框架，因为程序本身对框架有了依赖，当去除框架时，程序也就无法运行，这个也就是我们说的重量级框架
侵入式框架
非侵入式框架是轻量级框架的重要特点
非侵入式框架
渐进式框架
Vue实例数据对象，组件的定义必须是function
类型：Object | function
data
用于接收父组件的数据，数组或者对象。props是专门获取父组件传递信息的，只需定义声明类型
应用子组件 绑定一个属性用来获取父组件信息 s_f_message 绑定之后为了能够生效一定在子组件中定义 因为是组件标签，所以默认会认为是父组件传递的信息，所以必须使用props接收(详情看day15_vue_templatee视频)(第四周第一天)
String、Number、Boolean、Array、object、Date、Function、Symbol(表示独一无二的值，定义对象唯一属性名)
类型
props
计算属性，将被混入到Vue实例中。结果会被缓存，依赖不变化不会重新计算。
计算属性的方法直接在mustache语法中直接写名字即可 方法的调用是没有缓存的，每一次调用都执行 计算属性中有缓存，如果重复调用可以直接取缓存的值，节省资源
在处理数据的时候是有缓存的，多次使用的时候也只会调用一次，性能比较高。
computed
方法;方法中的 this 自动绑定为 Vue 实例。
调用几次就执行几次，性能较低。
类型：{ [key: string]: function }
methods
数据/选项
{{message + '' + suffix}}
{{message}}
{{message}}{{suffix}}
{{message + ' ' + suffix}}
{{num1 % num2}}
{{num1 > 20?'555':'555'}}
mustche语法
如何区分是ES6的写法
必须允许key就是变量名字
可省去:function
let 定义的是变量const 定义的是常量
ES6增强写法
基础
回调函数方式
Jquery的ajax获取数据
需要发送多个异步请求 并且每个请求之间需要相互依赖
解决：Promise
回调地狱
axios.get('/api/UserController/findUserList')
vue.config.js
跨域
axios（详情看第四周day05）
const xxx= Vue.extend({ template:'<标签>xxx<标签>' })
注册组件 * 参数1 给当前组件起一个标签名称 * 参数2 注册组件的名称
Vue.component(\"xxx\
脚本区域：定义初始化组件
基本
所有地方都可以使用
全局组件
不同点是组件存在父子关系，在一个组件中注册另一个组件
局部组件
在组件中注册组件的时候使用，可注册多个
全局组件-语法糖 Vue.component(\"comm\
components
组件创建+注册的过程中使用，只能注册一个
component
需要给模板起id
<template> <div></div></template>
template(模板)
data(){return{}}、data:function(){return{}}、data:
data数据有三种写法data:属性的方式，这种方式在没有组件的时候可以正常使用。data(){return{}} ES6增强写法的方法形式，在组件使用的过程中，可能存在一个组件 有多个地方都引用，如果使用data属性的方式会造成数据污染。为了避免这个问题。可使用 方法进行返回，方法的特性是每次调用都是重新初始化。data:function(){return{}} 和ES6增强写法意义一样，只不过是ES6之前的写法
数据处理
父子通讯的桥梁 v-bind:fatherMessageToSon --传递不了 v-bind:father-message-to-son --转化后可以传递
例：<son v-bind:father-message-to-son=\"fatherMessage\"></son>
props:{fatherMessageToSon:{}}为v-bind:前传递的，后=\"\" 为数据
父传子通讯驼峰问题
父组件向子组件传递方法，使用的是事件绑定机制，v-on 当我们自定义一个事件属性之后，那么子组件就能够通过某些方法来 调用，传递进去的这个方法了
操作 $children[0]是通过索引去读取子组件，不精准.
$refs 人性化方式 this.$refs.abc.son_message='嘿嘿' this.$refs.abc.son_method()
父组件操作子组件
//操作 $parent 弊端
//$root -合理 this.$root.f_message='吼吼' this.$root.f_method()
<!-- 父子通讯的桥梁 --> <son v-on:son_event_diy=\"from_son_method\"></son> 第一个参数自定义方法名，第二个参数需要传的值
emit传递父组件中的方法，并且子组件向父组件传递消息
触发调用 发射
子传父$emit
子组件操作父组件
组件
本质是通过操纵dom元素来切换显示状态
v-if
v-show会渲染标签，如果条件不满足，会使用display:none，原理是修改元素的display，实现显示隐藏。值为true，元素显示。
v-show
条件语句
v-for
循环语句
v-on (简写@)
事件处理
方法中通过this，关键字获取data中的数据
v-bind (简写:)
属性绑定
v-once
v-pre
设置不显示未渲染的标签
v-cloak
斗篷
v-model在每次input事件后触发事件同步，添加lazy转为change之后. 每次输入都会触发绑定事件去绑定值，效率底
.lazy
自动过滤输入的首尾空白字符
.trim
.number
v-model (语法糖)
表单双向数据绑定
更新元素的 textContent ，通常使用 <p>{{ msg }}</p>代替<p v-text=\"msg\"></p>
设置元素的文本值
v-text
设置元素的innerHTML
v-html
绑定的数据--表单元素的值
v-model
双向绑定
常用指令
阶段一：原始阶段：演示：JSP后端渲染和后端路由（URL） JSP+Servlet项目
阶段二：前后台分离阶段(半分离状态--主要目的不使用JSP)演示： 前端渲染+后端路由 html+ajax请求（前端） + 后端（SSM）
阶段三：单页面富应用阶段（SPA），主要特点在前端基础之上再加一层路由。。SPA：simple page web application
前后端渲染和前后端路由
别忘了配置地址映射
每一个经过路由的组件都可以获取到当前的路由对象
是vue中内置的一个组件，渲染后会转化为a链接标签
to属性，指定跳转的路径；custom v-slot，指定router-link能渲染成指定标签
例】<router-link to=\"/Home\" custom v-slot=\"{ navigate }\">2 <button @click=\"navigate\" role=\"link\">首页</button>3</router-link>
<router-link>
会根据当前的路径，动态渲染出不同的组件
<router-view>
路由基本使用
目的实际为了传递参数
例】<router-link :to=\"'/user/'+userName\" >用户</router-link>
动态路由
{ path: '/user/:span style=\"font-size: inherit;\
会默认进路由懒加载，系统会在使用这个路由的时候再执行加载操作
npm run build 查看dist目录
路由懒加载
<template v-solt:footer=\"message\"></tempalte>后边是插槽名称，=后边是组件内部绑定作用域值的映射
v-slot
flex-direction属性 控制项目排列方向与顺序取值：row(默认) | row-reverse | column | column-reverse
flex-wrap属性 用于控制项目是否换行取值：nowrap(默认) | wrap | wrap-reverse
flex-flow属性flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
justify-content属性取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
align-items属性 控制项目在纵轴排列方式取值：flex-start | flex-end | center | baseline | stretch(默认)
控制多行项目的对齐方式，如果项目只有一行则不会起作用
align-content
flex布局
order取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。
flex-grow取值：默认0，用于决定项目在有剩余空间的情况下是否放大
flex-shrink取值：默认1，用于决定项目在空间不足时是否缩小
flex-basis取值：默认auto，用于设置项目宽度
flex取值：默认0 1 auto
表示继承父容器的align-items属性。如果没父元素，则默认stretch。
align-self
项目属性
弹性布局
justify-content:center与align-items:center
其他
路由
Vue
0 条评论
回复 删除
下一页
