淘宝单网站建设,网站首页关键词,软件开发文档范例,济宁神华 网站建设vue2vue3 HMCXY基础入门 一、Vue2.x技术精讲1.Vue快速上手#xff08;1#xff09;Vue概念#xff08;2#xff09;创建实例#xff08;3#xff09;插值表达式#xff08;4#xff09;响应式特性#xff08;5#xff09;开发者工具 2.Vue指令二、Vue3.x技术精讲 一、… vue2vue3 HMCXY基础入门 一、Vue2.x技术精讲1.Vue快速上手1Vue概念2创建实例3插值表达式4响应式特性5开发者工具 2.Vue指令二、Vue3.x技术精讲 一、Vue2.x技术精讲
1.Vue快速上手
1Vue概念
概念Vue是一个用于构建用户界面的基于数据渲染出用户看到的页面渐进式循序渐进框架一套完整的项目解决方案 Vue的两种使用方式:
Vue核心包开发 场景局部模块改造Vue 核心包 Vue 插件工程化开发 场景整站开发
优点大大提升开发效率70%⬆ 缺点需要理解记忆规则→官网
2创建实例 3插值表达式
插值表达式是一种Vue的模板语法
作用利用表达式进行插值渲染到页面中 表达式是可以被求值的代码JS引擎会将其计算出一个结果语法{{ 表达式 }}注意点 1使用的数据必须存在data 2支持的是表达式而非语句比如if for … 3不能再标签属性中使用{{ }}插值
4响应式特性
Vue核心特性响应式 我们已经掌握了基础的模板渲染其实除了基本的模板渲染Vue背后还做了大量工作。 比如数据的响应式处理 - 响应式数据变化视图自动更新 如何访问or修改data中的数据,最终会被添加到实例上 ①访问数据“实例.属性名” ②修改数据“实例.属性名”“值” 聚焦于数据 → 数据驱动视图 使用Vue开发关注业务的核心逻辑根据业务修改数据即可
5开发者工具
安装Vue 开发者工具装插件调试 Vue应用 1通过谷歌应用商店安装国外网站 2极简插件下载→开发者模式→拖拽安装→插件详情允许访问文件 https://chrome.zzzmh.cn/index 打开Vue运行的页面调试工具中Vue栏即可查看修改数据进行调试。
2.Vue指令
Vue会根据不同的【指令】针对标签实现不同的【功能】。 指令带有v-前缀的特殊标签属性 v-html 作用设置元素的innerHTML 语法v-html “表达式”
v-show 作用控制元素显示隐藏 语法V-show 表达式表达式值true显示false 隐藏 原理切换display:none控制显示隐藏 场景频繁切换显示隐藏的场景
v-if 作用控制元素显示隐藏条件渲染 语法 v-if “表达式” 表达式值 true 显示false 隐藏 原理基于条件判断是否创建或移除元素节点 场景要么显示要么隐藏不频繁切换的场景
v-else v-else-if 作用辅助v-if进行判断渲染 语法v-else v-else-if “表达式” 注意需要紧挨着v-if一起使用
v-on 作用注册事件添加监听 提供处理逻辑 语法 ①v-on事件名“内联语句” ②v-on事件名“methods中的函数名” 简写事件名 注意methods函数内的this 指向Vue实例
v-bind 作用动态的设置html的标签属性 - src url title … 语法v-bind:属性名“表达式” 注意简写形式属性名“表达式”
v-for 作用基于数据循环多次渲染整个元素→数组、对象、数字… 遍历数组语法 v-for “(item, index) in 数组” item 每一项index 下标 省略 index:v-for “item in 数组” v-for中的key 语法key属性唯一标识 作用给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。 v-for的默认行为会尝试原地修改元素就地复用 注意点
key 的值只能是 字符串 或 数字类型key 的值必须具有 唯一性推荐使用id作为key唯一不推荐使用 index作为key会变化不对应
v-model 作用给 表单元素 使用双向数据绑定 - 可以快速获取 或 设置表单元素内容 ①数据变化 → 视图自动更新 ②视图变化 → 数据自动更新 语法v-model‘变量’
二、Vue3.x技术精讲
