建设汽车行业网站,广西核心关键词seo报价,百度企业网站建设,郑州 网站建设公司✔️Vue基础 文章目录 ✔️Vue基础computed methods watchcomputed计算属性methods计算属性computed计算属性 VS methods方法计算属性的完整写法 watch侦听器#xff08;监视器#xff09;watch侦听器 Vue生命周期Vue生命周期钩子 工程化开发和脚手架脚手架Vue CLI 项目目录介…✔️Vue基础 文章目录 ✔️Vue基础computed methods watchcomputed计算属性methods计算属性computed计算属性 VS methods方法计算属性的完整写法 watch侦听器监视器watch侦听器 Vue生命周期Vue生命周期钩子 工程化开发和脚手架脚手架Vue CLI 项目目录介绍和运行流程项目目录运行流程 组件化开发根组件组件构成普通组件注册局部注册全局注册 scoped解决样式冲突scoped原理 data必须是一个函数 computed methods watch
computed计算属性
概念基于 现有的数据计算出来的 新属性。依赖的数据变化自动重新计算。
语法 声明在 computed配置项中一个计算属性对应一个函数使用起来和普通属性一样 js中使用计算属性this.计算属性模板中使用计算属性{{ 计算属性 }} 注意 computed配置项和data配置项是 同级 的computed中的计算属性 虽然是函数的写法但它 依然是个属性computed中的计算属性 不能 和data中的属性 同名使用computed中的计算属性和使用data中的属性是一样的写法computed中计算属性内部的 this 依然 指向的是Vue实例 案例 methods计算属性
作用给Vue实例提供一个方法调用以 处理业务逻辑
语法
写在methods配置项中作为方法调用 js中调用this.方法名 ( )模板中调用 {{ 方法名() }} 或者 事件名 方法名
computed计算属性 VS methods方法
计算属性优势
缓存特性提升性能
计算属性会对计算出来的结果缓存再次使用直接读取缓存
依赖项变化了会自动重新计算 —— 并再次缓存
methods没有缓存特性
当一个结果依赖其他多个值时推荐使用计算属性当处理业务逻辑时推荐使用methods方法比如事件的处理函数
计算属性的完整写法
既然计算属性也是属性能访问应该也能修改了
计算属性默认的简写只能读取访问不能 “修改”如果要 “修改” → 需要写计算属性的完整写法 完整写法代码演示 div idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span/spanbrbr button改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备},computed: {},methods: {}})/scriptwatch侦听器监视器
作用 监听数据变化执行一些业务逻辑或异步操作
语法 watch同样声明在跟data同级的配置项中 简单写法简单类型数据直接监视 完整写法添加额外配置项 data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}watch侦听器
语法
完整写法 —— 添加额外的配置项 deep.true对复杂类型进行深度监听 immdiate.true 初始化 立刻执行一次 data: {obj: {words: 苹果,lang: italy},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}两种写法 1.简单写法 watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}2.完整写法 watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}Vue生命周期
Vue生命周期就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段创建响应式数据
2.挂载阶段渲染模板
3.更新阶段修改数据更新视图
4.销毁阶段销毁Vue实例 Vue生命周期钩子
Vue生命周期过程中会自动运行一些函数被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码 div idapph3{{ title }}/h3divbutton clickcount---/buttonspan{{ count }}/spanbutton clickcount/button/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100,title: 计数器},// 1. 创建阶段准备数据// 2. 挂载阶段渲染模板// 3. 更新阶段(修改数据 → 更新视图)// 4. 卸载阶段})/script工程化开发和脚手架
开发Vue两方式
核心包传统开发模式基于html / css / js 文件直接引入核心包开发 Vue。工程化开发模式基于构建工具例如webpack的环境中开发Vue。 工程化开发模式优点
提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题
webpack配置不简单雷同的基础配置缺乏统一的标准
为了解决以上问题所以我们需要一个工具生成标准化的配置
脚手架Vue CLI
Vue CLI 是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】
好处 开箱即用零配置内置babel等工具标准化的webpack配置 使用步骤 全局安装只需安装一次即可 yarn global add vue/cli 或者 npm i vue/cli -g查看vue/cli版本 vue --version创建项目架子vue create project-name(项目名不能使用中文)启动项目yarn serve 或者 npm run serve(命令不固定找package.json) 项目目录介绍和运行流程
项目目录 虽然脚手架中的文件有很多目前咱们只需认识三个文件即可
main.js 入口文件App.vue App根组件index.html 模板文件
运行流程 组件化开发
组件化一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为。
好处便于维护利于复用 → 提升开发效率。
组件分类普通组件、根组件。
比如下面这个页面可以把所有的代码都写在一个页面中但是这样显得代码比较混乱难易维护。咱们可以按模块进行组件划分 根组件
整个应用最上层的组件包裹所有普通小组件 组件构成
语法高亮插件 三部分构成 template结构 有且只能一个根元素script: js逻辑style 样式 (可支持less需要装包) 让组件支持less 1 style标签lang“less” 开启less功能 2 装包: yarn add less less-loader -D 或者npm i less less-loader -D
普通组件注册
局部注册
特点只能在注册的组件内使用
步骤 创建.vue文件三个组成部分在使用的组件内先导入再注册最后使用 使用方式当成html标签使用即可 组件名/组件名
注组件名规范 — 大驼峰命名法 如 HmHeader
语法 // 导入需要注册的组件
import 组件对象 from .vue文件路径
import HmHeader from ./components/HmHeaderexport default { // 局部注册components: {组件名: 组件对象,HmHeader:HmHeaer,HmHeader}
}全局注册
特点全局注册的组件在项目的任何组件中都能使用
步骤 创建.vue组件三个组成部分main.js中进行全局注册 使用方式
当成HTML标签直接使用 组件名/组件名 注组件名规范 — 大驼峰命名法 如 HmHeader
语法Vue.component(‘组件名’, 组件对象)
例
// 导入需要全局注册的组件
import HmButton from ./components/HmButton
Vue.component(HmButton, HmButton)scoped解决样式冲突
默认情况写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
全局样式: 默认组件中的样式会作用到全局任何一个组件中都会受到此样式的影响局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
scoped原理
当前组件内标签都被添加data-v-hash值 的属性css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到 data必须是一个函数 一个组件的 data 选项必须是一个函数。目的是为了保证每个组件实例维护独立的一份数据对象。 每次创建新的组件实例都会新执行一次data 函数得到一个新对象。 如果 data 是一个对象那么复用的组件实例将会共享同一个 data 对象。这意味着在一个组件实例中修改了 data 的某个属性所有其他复用的组件实例中的这个属性也会被修改
因为它们实际上是在操作同一个对象这显然不是我们想要的结果因为每个组件实例都应该有自己的独立状态。
通过将 data 定义为函数确保每次复用组件时都会调用这个函数来创建一个新的 data 对象这样每个组件实例都会有自己独立的 data 对象从而避免了状态共享的问题。
vxVueMaker
