【vue】Touch 事件会触发Click事件


在使用vue开发项目,在父组件上监听点击事件和触摸事件。子元素上有单独的事件处理函数。大致代码如下。<div @click="foo()" @touchend="foo()"><div @click.stop="baz()"

基于typeScript的 MinVue 实现,通过MinVue 完成计数器案例

vue3 

通过TypeScript 简单实现 Vue 的 渲染系统(renderer),其包括h函数、mount函数、patch函数。Vue 的 响应式系统(reactive),reactive函数(可深度监听)、 包括对数据依赖收集(发布订阅模式)、Dep类,Vue的应用程序入口模块。最后,使用min-vue 实现了计数器案例。

【九】结合前面所学,综合案例

vue3 

书籍购物车购物车数据const books= [ { id: 1, name: '《算法导论》', date: '2006-9', price: 85.00, count: 1 }, { id: 2, name: '《UNIX编程艺术》', da

【八】侦听器 Watch

vue3 

侦听器什么是侦听器?开发中我们在data返回的对象中定义了数据,这个数据通过 mustache 语法等方式绑定到 template 模板中当数据发生变化,template 会自自动更新来显示最新的数据于是,在某些情况下,我们需要在发生数据变化时,执行一些业务逻辑。这个时候就需要侦听器watch来完成

【七】计算属性computed

vue3 

复杂data的处理方式在模板中,我们可以使用mustache语法显示一些 data中的数据但是在某些情况下,我们需要对数据做一些格式化后再显示,或者需要将多个数据结合起来显示比如:多个data数据进行运算三元运算符来决定结果数据进行某种转化后显示在模板中使用表达式,可以非常方便的实现,但是设计它们的

【六】列表渲染

vue3 

列表渲染v-for通过 v-for 遍历数组或对象,然后动态的渲染对应的DOM结构。基本使用遍历数组、遍历对象、遍历数字<template id="my-app"> <!-- 遍历数组 --> <ul> &

【五】Vue 条件渲染

vue3 

条件渲染在某些情况下,我们需要通过当前的条件决定某些元素或组件是否渲染,这个时候就需要进行条件判断。Vue 提供了 下面的指令来进行条件判断v-ifv-else-ifv-elsev-showv-if、v-else-if、v-else这三个指令于JS的条件语句if、else、else if 类似以成绩

【四】Vue基本指令(二)

vue3 

基本指令v-bind用于动态绑定某些属性动态绑定 a元素的 href属性动态绑定 img元素的 src属性介绍- -缩写:‘:‘预期:any(with argument) | Object(without argument)参数:attrOrProp(optinal)修饰符:.camel —— 将a

【三】vue 的基本指令(一)

vue3 

Mustache 语法这是一种双括号语法,它会被替换成对应的值。mustache 中能填写的内容单个数据算数运算表达式调用函数或计算属性三元运算符<template id="my-app"> <!-- 1. 基本使用 --> <h

【二】vue 初体验

vue3 

计数器案例原生js写法 vs Vue js 写法可以看出明显的区别原生js 是面向过程编程vue 是面向业务编程我们通过vue,只需要编程对应业务逻辑,其他dom元素的操作都交给了Vue。大大提高开发效率。Vue template 的编写方法1. 使用 template 属性 直接编写就像上面计数器