怎么帮人做网站,寮步镇网站仿做,深圳品牌月饼,官网和门户网站的区别目录 初识VueVue模板语法数据绑定el和data的两种写法事件的基本使用$emit在子组件中定义方法#xff0c;执行父组件的方法 Vue中的事件修饰符#xff1a;键盘事件计算属性监视属性条件渲染列表渲染表单数据收集过滤器 笔记内容来自#xff1a;尚硅谷Vue2.0Vue3.0全套教程丨v… 目录 初识VueVue模板语法数据绑定el和data的两种写法事件的基本使用$emit在子组件中定义方法执行父组件的方法 Vue中的事件修饰符键盘事件计算属性监视属性条件渲染列表渲染表单数据收集过滤器 笔记内容来自尚硅谷Vue2.0Vue3.0全套教程丨vuejs从入门到精通 初识Vue 1.想让Vue工作就必须创建一个Vue实例且要传入一个配置对象 2.root容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新 Vue模板语法 插值语法 功能用于解析标签体内容。写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。 指令语法 功能用于解析标签包括标签属性、标签体内容、绑定事件…。举例v-bind:href“xxx” 或 简写为 :href“xxx”xxx同样要写js表达式 且可以直接读取到data中的所有属性。备注Vue中有很多的指令且形式都是v-????此处我们只是拿v-bind举个例子。 数据绑定 Vue中有2种数据绑定的方式 单向绑定(v-bind)数据只能从data流向页面。双向绑定(v-model)数据不仅能从data流向页面还可以从页面流向data。 备注 双向绑定一般都应用在表单类元素上如input、select等v-model:value 可以简写为 v-model因为v-model默认收集的就是value值。 el和data的两种写法 data与el的2种写法 el有2种写法 (1).new Vue时候配置el属性。(2). 动态绑定先创建Vue实例随后再通过vm.$mount(‘#root’)指定el的值。 data有2种写法 (1).对象式(2).函数式 如何选择目前哪种写法都可以以后学习到组件时data必须使用函数式否则会报错。 一个重要的原则由Vue管理的函数一定不要写箭头函数一旦写了箭头函数this就不再是Vue实例了 事件的基本使用 事件的基本使用 使用v-on:xxx 或 xxx 绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm 或 组件实例对象click“demo” 和 click“demo($event)” 效果一致但后者可以传参 $emit在子组件中定义方法执行父组件的方法
!--子组件--
button click$emit(increaseBy, 1)Increase by 1
/button
!--父组件--
MyButton increase-by(n) count n /Vue中的事件修饰符 prevent阻止默认事件常用stop阻止事件冒泡常用once事件只触发一次常用capture使用事件的捕获模式self只有event.target是当前操作的元素时才触发事件passive事件的默认行为立即执行无需等待事件回调执行完毕 键盘事件 Vue中常用的按键别名 回车 enter
删除 delete (捕获“删除”和“退格”键)
退出 esc
空格 space
换行 tab (特殊必须配合keydown去使用)
上 up
下 down
左 left
右 rightVue未提供别名的按键可以使用按键原始的key值去绑定但注意要转为kebab-case短横线命名系统修饰键用法特殊ctrl、alt、shift、meta (1).配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发。(2).配合keydown使用正常触发事件。 也可以使用keyCode去指定具体的按键不推荐Vue.config.keyCodes.自定义键名 键码可以去定制按键别名 计算属性 计算属性 定义要用的属性不存在要通过已有属性计算得来。原理底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行 - (1).初次读取时会执行一次。 - (2).当依赖的数据发生改变时会被再次调用。优势与methods实现相比内部有缓存机制复用效率更高调试方便。备注 1. 计算属性最终会出现在vm上直接读取使用即可。 2. 如果计算属性要被修改那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。 监视属性 监视属性watch 当被监视的属性变化时, 回调函数自动调用, 进行相关操作监视的属性必须存在才能进行监视监视的两种写法 (1).new Vue时传入watch配置(2).通过vm.$watch监视 条件渲染 v-if 写法 (1).v-if“表达式”(2).v-else-if“表达式”(3).v-else“表达式” 适用于切换频率较低的场景。 特点不展示的DOM元素直接被移除。 注意v-if可以和:v-else-if、v-else一起使用但要求结构不能被“打断”。 v-show 写法v-show“表达式” 适用于切换频率较高的场景。 特点不展示的DOM元素未被移除仅仅是使用样式隐藏掉备注使用v-if的时元素可能无法获取到而使用v-show一定可以获取到。 列表渲染 v-for指令: 用于展示列表数据语法v-for“(item, index) in xxx” :key“yyy”可遍历数组、对象、字符串用的很少、指定次数用的很少 表单数据收集 收集表单数据 若input typetext/则v-model收集的是value值用户输入的就是value值。 若input typeradio/则v-model收集的是value值且要给标签配置value值。 若input typecheckbox/ 没有配置input的value属性那么收集的就是checked勾选 or 未勾选是布尔值配置input的value属性: (1)v-model的初始值是非数组那么收集的就是checked勾选 or 未勾选是布尔值(2)v-model的初始值是数组那么收集的的就是value组成的数组 备注v-model的三个修饰符 - lazy失去焦点再收集数据 - number输入字符串转为有效的数字 - trim输入首尾空格过滤 过滤器 过滤器 定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。 语法 注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}}使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名” 备注 过滤器也可以接收额外参数、多个过滤器也可以串联并没有改变原本的数据, 是产生新的对应的数据
