Vue2+Vue3学习

一套用于构建用户界面的渐进式框架基于数据动态渲染页面1.搭建Vue开发环境官网文档找部分构建vue2.Hello小案例(vue3)el指定挂载点 配置选择器指定vue管理的哪个盒子data:提供数据vue具有响应式特性!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idapp h1{{msg}}/h1 /div !-- 引入vue模块 -- script typemodule import {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.js; createApp({ data(){ return{ //定义数据 msg:hello vue } } }).mount(#app) /script /body /htmlVue指令指带有v-前缀的特殊标签属性v-html:设置内部的innerhtml 修改页面结构和内容v-show:切换css的display:none来控制显示隐藏简单的隐藏控制v-if:根据判断条件控制元素的创建和移除条件渲染v-on函数里调用自身参数this.moneyv—bindv-bind使用值下面的data中也需要提供v-forv-for(item,index) in 数组 item每一项index下标中的key属性 :key唯一标识 需要给元素加上唯一标识便于vue进行列表项的正确排序复用v-bind3.模板语法(vue3)!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title初识Vue/title !-- 引入Vue -- script srchttps://unpkg.com/vue3/dist/vue.global.js/script /head body !-- 准备好一个容器 -- div idapp h1Hello,{{name}}/h1 hr h1指令语法/h1 a v-bind:hrefurl点我去百度/a /div script const { createApp } Vue const xcreateApp({ data() { return { name: liuben, url:http://www.baidu.com } } }) x.mount(#app) /script /body /html1.插值语法{{xxx}} 用于解析标签体内容 xxx为js表达式2.指令语法v-bind:hrefxxx(可简写成:hrefxxx) 用于解析标签 xxx为js表达式4.数据绑定v-model只能应用在表单类元素输入类元素 双向数据绑定-可以快速获取或设置表单元素内容1.数据变化-视图自动更新 2.视图变化-数据自动更新v-model:value可以简写为v-model,因为v-model就是收集value值单向绑定只有红(只能从data流向页面)双向绑定红粉!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 title数据绑定/title !-- 引入Vue -- script typetext/javascript src../js/vue.js/script /head body div idroot 单向数据绑定input typetext v-bind:valuenamebr 双向数据绑定input typetext v-model:valuename /div script new Vue({ el:#root, data:{ name:liuben } }) /script /body /htmlv-model绑定后自动选取指令修饰符5.计算属性基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算使用计算属性不用加()它是属性不是函数computed计算属性 vs methods方法6.watch侦听器监视器监视数据变化执行一些业务逻辑和异步操作1.简单写法-简单类型数据直接监听防抖延迟执行-干啥事先等一会延迟一会过一段时间再执行2.完整写法-添加额外配置项deep:true 对复杂类型深度监视对所有属性监视immediate:true 初始化立刻执行一次handler方法7.生命周期创建 挂载 更新 销毁Vue生命周期函数钩子函数Vue生命周期过程中会自动运行一些函数被称为生命周期钩子-让开发者可以在特定阶段运行自己的代码get结果传参8.工程化开发和脚手架工程化开发模式基于构建工具例如webpack的环境中开发vueVue CLI全局命令工具 帮我们快速创建一个开发Vue项目的标准化基础架子脚手架目录文件main.js:导入app.vue基于app.vue创建结构渲染index.html9.组件组件化一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为根组件:整个应用最上层的组件包裹所有普通小组件app.vue三部分 template:结构 script:js逻辑 style:样式组件注册组件注册的两种方式1.局部注册只能在注册的组件内使用1在components下注册vue文件(app.vue三部分 )2在使用的组件内导入并注册import语句要卸载script标签内部export去导出使用当成html标签使用 组件名/组件名2.全局注册所有组件内都能使用scoped默认的style样式会作用于全局组件加上scoped属性的style样式只会作用于当前组件原理对当前组件内标签都被添加data-v-hash值的属性data组件的data选项必须是一个函数保证每个组件实例都能维护自己独立的一份数据对象组件通信组件的数据是独立的无法直接访问其他组件的数据父子与非父子关系父子通信1.父组件通过props将数据传递给子组件2.子组件利用$emit通知父组件修改更新v-model原理本质上是一个语法糖。例如应用在数据框上就是value属性和input事件的合写提供数据的双向绑定1.数据变视图跟着变:value 2.视图变数据跟这变input此处$event用于在模板中获取事件的形参表单类组件封装v-model简化代码实现子组件与父组件的数据的双向绑定因为不能直接用v-model父传子数据应该是父组件props传递过来的v-model拆解后去绑定数据子传父监听输入子传父传值给父组件修改因为收集来的数据要从父组件上传父传子子传父父组件v-model简化代码实现子组件和父组件数据双向绑定sync修饰符可以实现子组件与父组件数据的双向绑定简化代码prop属性名可以自定义非固定valueref和$refs利用ref和$refs可以用于获取dom元素或组件实例查找范围-当前组件内更精确稳定querySelector 查找范围-整个页面满足的盒子同名的不需要的盒子也搞上了