vue仿二手交易app_vue全家桶仿去哪app

vue学习

vue起步

Vue.js 是什么

一套用于构建用户界面的渐进式框架(主张少&＃xff0c;没有多做职责之外的事&＃xff0c;在开发过程中来按需引入功能&＃xff0c;不是一次性都放进来的&＃xff0c;有点类似于迭代开发。)与其他框架不同的是&＃xff0c;vue被设计成自底向上逐层应用&＃xff0c;vue的核心库只关心视图层&＃xff0c;易上手也便于与第三方库或既有项目整合

当与现代化的工具链以及各种支持类库结合使用时&＃xff0c;Vue 也完全能够为复杂的单页应用提供驱动。

声明式渲染

数据和 DOM 已经被建立了关联&＃xff0c;所有东西都是响应式的

条件与循环

不仅可以把数据绑定到 DOM 文本或 attribute&＃xff0c;还可以绑定到 DOM 结构

处理用户输入

v-on事件绑定

组件化应用构建

组件系统是 Vue 的另一个重要概念&＃xff0c;因为它是一种抽象&＃xff0c;允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想&＃xff0c;几乎任意类型的应用界面都可以抽象为一个组件树

与自定义元素的关系

Web Components 规范已经完成并通过&＃xff0c;但未被所有浏览器原生实现。目前 Safari 10.1&＃43;、Chrome 54&＃43; 和 Firefox 63&＃43; 原生支持 Web Components。相比之下&＃xff0c;Vue 组件不需要任何 polyfill&＃xff0c;并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时&＃xff0c;Vue 组件也可以包装于原生自定义元素之内。

Vue 组件提供了纯自定义元素所不具备的一些重要功能&＃xff0c;最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

vue精讲

vue实例

vue生命周期

beforeCreate

实例初始化之后&＃xff0c;观测数据和事件配置之前

created

创建实例之后立即被调用&＃xff0c;数据观测和事件配置已完成&＃xff0c;挂载阶段为开始el属性不可见

beforeMount

挂载之前&＃xff0c;相关渲染函数首次被执行

mounted

el被新创建的vm.$el替换挂载成功

beforeUpdate

数据更新之前调用

updated

组建dom都更新&＃xff0c;组建更新完毕

beforeDestroy

实例销毁之前

destroyed

vue模版语法

v-once

只执行一次

v-html

将内容编译成html代码

v-text

类似模版字符串&＃xff0c;不支持html代码

v-once

只执行一次

插值

只执行一次

文本

{{}}数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

也可以使用v-once 指令

- {{}}

- v-once

原始 HTML

v-html使用的时候需要注意。不要将用户信息使用动态v-html渲染吗&＃xff0c;容易收到ssr的攻击

Attribute

可以使用v-bind的方式去调用&＃xff0c;可以动态使用某种方法或者属性

动态地绑定一个或多个特性&＃xff0c;或一个组件 prop 到表达式

使用 Javascript 表达式

支持三元判断进行js的校验

指令

参数

一些指令能够接收一个“参数”&＃xff0c;在指令名称之后以冒号表示

绑定后续中为事件或者属性的名字

动态参数

可以用方括号括起来的 Javascript 表达式作为一个指令的参数

这里的 attributeName 会被作为一个 Javascript 表达式进行动态求值&＃xff0c;求得的值将会作为最终的参数来使用。例如&＃xff0c;如果你的 Vue 实例有一个 data 属性 attributeName&＃xff0c;其值为 "href"&＃xff0c;那么这个绑定将等价于 v-bind:href。

- 动态参数值的约束

动态参数预期会求出一个字符串&＃xff0c;异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

- 动态参数表达式的约束

因为某些字符&＃xff0c;如空格和引号&＃xff0c;放在 HTML attribute 名里是无效的。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀&＃xff0c;用于指出一个指令应该以特殊方式绑定。例如&＃xff0c;.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

缩写

v-bind

v-on

计算属性&＃xff0c;监听器

computed

初始化不需要给值&＃xff0c;有缓存

计算属性的get和set

get获取数据

set设置

watch

需要初始值&＃xff0c;如果两者都可以实现的话&＃xff0c;使用computed

方法

Class 与 Style 绑定

class

对象语法

数组语法

style

对象语法

数组语法

条件渲染

v-if

v-if 是“真正”的条件渲染&＃xff0c;因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的&＃xff1a;如果在初始渲染时条件为假&＃xff0c;则什么也不做——直到条件第一次变为真时&＃xff0c;才会开始渲染条件块。

相比之下&＃xff0c;v-show 就简单得多——不管初始条件是什么&＃xff0c;元素总是会被渲染&＃xff0c;并且只是简单地基于 CSS 进行切换。

不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。

v-show

相比之下&＃xff0c;v-show 就简单得多——不管初始条件是什么&＃xff0c;元素总是会被渲染&＃xff0c;并且只是简单地基于 CSS 进行切换。

一般来说&＃xff0c;v-if 有更高的切换开销&＃xff0c;而 v-show 有更高的初始渲染开销。因此&＃xff0c;如果需要非常频繁地切换&＃xff0c;则使用 v-show 较好&＃xff1b;如果在运行时条件很少改变&＃xff0c;则使用 v-if 较好。

注意&＃xff0c;v-show 不支持 元素&＃xff0c;也不支持 v-else。

input中的key值

可以清空内容

列表渲染

v-for&＃61;‘ item of itemArr’

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法&＃xff0c;其中 items 是源数据数组&＃xff0c;而 item 则是被迭代的数组元素的别名。

在 v-for 里使用对象

接受3个参数(value, name, index)

在遍历对象时&＃xff0c;会按 Object.keys() 的结果遍历&＃xff0c;但是不能保证它的结果在不同的 Javascript 引擎下都一致。

维护状态

不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

数组更新检测

变异方法

push

pop

sheift

unshift

splice

sort

reverse

替换数组

filter()、concat() 和 slice() 。它们不会改变原始数组&＃xff0c;而总是返回一个新数组。当使用非变异方法时&＃xff0c;可以用新数组替换旧数组

注意事项

- 由于 Javascript 的限制&＃xff0c;Vue 不能检测以下数组的变动&＃xff1a;

- Vue.set(vm.items, indexOfItem, newValue)

- vm.items.splice(indexOfItem, 1, newValue)

对象变更检测注意事项

Vue.set(object, propertyName, value)

多个对象修改

vm.userProfile &＃61; Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: &＃39;Vue Green&＃39;

})

显示过滤/排序后的结果

有时&＃xff0c;我们想要显示一个数组经过过滤或排序后的版本&＃xff0c;而不实际改变或重置原始数据。在这种情况下&＃xff0c;可以创建一个计算属性&＃xff0c;来返回过滤或排序后的数组。

- 使用计算属性

- 使用方法&＃xff0c;将数组作为参数传入

在 上使用 v-for

来循环渲染一段包含多个元素的内容。

v-for 与 v-if 一同使用

注意我们不推荐在同一元素上使用 v-if 和 v-for

v-for要比v-if 优先级要高

当在组件上使用 v-for 时&＃xff0c;key 现在是必须的。

事件处理

监听事件v-on||&＃64;

事件修饰符

stop

阻止单击事件继续传播(阻止冒泡)

prevent

消除浏览器模式事件

.capture

添加事件监听器时使用事件捕获模式

self

即事件不是从内部元素触发的

once

passive

深入理解vue组建

组建使用中的细节点

is

js中某些标签固定用法&＃xff0c;例如&＃xff1a;tabel>tbody>tr>td,ul>li

此情况下组建可使用is属性

data使用函数(除根实例)

根组建中使用对象是因为他只调用一次

组建中考虑到复用性&＃xff0c;使用对象的话&＃xff0c;他是引用类型&＃xff0c;一个改变&＃xff0c;其他都会响应&＃xff0c;所以使用函数返回对象&＃xff0c;避免互相影响&＃xff0c;污染。内部数据保持独立数据储存

ref

dom

在vue中我们不建议操作dom,.但是有些动画需要操作时&＃xff0c;我们可以使用ref获取dom的引用。

组建

在组建中使用ref时。我们获取的是就是组建的引用

父子组建的数据传递

父-子

通过props属性进行传值。值可以是对象&＃xff0c;数组&＃xff0c;字符串等方式&＃xff0c;单项数据流&＃xff0c;子组建不能修改父组建传入的值。因为其他的地方也可以能会引用组建&＃xff0c;。一个修改&＃xff0c;其他的地方也可以会影响。

子-父

组建参数校验与非组建porps特性

porps接受类型

可以接受多种类型&＃xff0c;比如对象&＃xff0c;数组&＃xff0c;字符串等

接受中可以扩展&＃xff0c;

type&＃xff1a;数据类型

require&＃xff1a;是否必须传

defult&＃xff1a;默认值

validator&＃xff1a;自定义校验函数

porps特性

父传子&＃xff1a;子组建接受&＃xff0c;不会显示在dom标签上。

非porps特性

父组建传旨&＃xff0c;子组建未接收&＃xff0c;会报错。

不实用会直接显示在dom节点(html上)

给组建绑定原生事件

给事件绑定时加上&＃64;click.native&＃61;&＃39;fn&＃39;

非父子组建传旨

eventBus

使用事件总线机制&＃xff0c;实现组建间传旨&＃xff0c;通过在vue的原型上挂载属性&＃xff0c;然后指向实例&＃xff0c;这样bus上就具备vue实例上的方法了&＃xff0c;在任何时候都可以获取

在vue中使用插槽

vue中插槽的使用

组建中插入标签&＃xff0c;子组建中使用插槽解决

我是header

我是footer