网站ico图标 代码,icp备案查询官网,网站建设商业计划书,注册城乡规划师考试题型简介 Vue是前端优秀框架是一套用于构建用户界面的渐进式框架
Vue优点 Vue是目前前端最火的框架之一 Vue是目前企业技术栈中要求的知识点 vue可以提升开发体验 Vue学习难度较低 Vue开发前准备 一、nodejs环境
Nodejs简介 Nodejs诞生于2009年#xff0c;主攻服务器方向#x…简介 Vue是前端优秀框架是一套用于构建用户界面的渐进式框架
Vue优点 Vue是目前前端最火的框架之一 Vue是目前企业技术栈中要求的知识点 vue可以提升开发体验 Vue学习难度较低 Vue开发前准备 一、nodejs环境
Nodejs简介 Nodejs诞生于2009年主攻服务器方向使得利用JavaScrit 也可以完成服务器代码的编写
Nodejs安装 Nodejs官网 https://nodejs.org/en/ Nodeis的安装与一般软件一样 检查是否安装成功命令node -v 出现版本号表示安装成功
在安装 Nodeis 的同时会附带一个pm 命令npm 是Node的包管理工具这样正是接下来我们要用到的npm 的简单结构有助于 Node.js 生态系统的激增现在 npm 仓库托管了超过 1,000,000 个可以自由使用的开源库包。 npm 镜像: 由于服务器在国外所以下载速度比较慢我们可以用国内的镜像 阿里镜像地址 https://npmmirror.com/ 在命令行运行如下命令即可!cnpm安装 npm install -g cnpm --registryhttps://registry.npmmirror.com 出现以下表示安装成功也可通过命令查看是否安装成功cnpm -v 显示版本号表示安装成功 若安装失败可以再次安装 二、安装Vue工具 vue cli Vue cli Vue.js 开发的标准工具vue cli 是一个基于 Vue,js 进行快速开发的完整系统 安装命令npm install -g vue/cli 安装之后你就可以在命令行中访问 vue 命令。你可以通过简单运行 e 看看是否展示出了一份所有可用命令的帮助信息来验证它是否安装成功。 命令vue --version vue官网https://vuejs.org/ 创建一个项目 运行以下命令来创建一个新项目 vue create vue-demo 温馨提示 在控制台中可以用上下按键调整选择项 在控制台中可以用空格(spacebar)选择是否选中和取消选中 可以选择默认项目模板或者选“手动选择特性”来选取需要的特性,选择第三个。
我们选择 Babel和 Progressive Web App (PWA) Support 两个选项即可空格键可以取消或选中 温馨提示 在学习期间不要选中 Linter /Formater 以避免不必要的错误提示
vue目前有两个主流大版本vue2和vue3,以下选择 vue3 最新版本为例 配置放在哪里? in dedicated contg files 专用配置文件或者 in package.json 在package,json文件默认即可 将其保存为未来项目的预置?y代表保存并添加名字n 不保存选 n 运行项目 第一步:进入项目根目录 cd vue-demo 第二步:运行 npm run serve 启动项目 安装Vue高亮插件 VSCode中安装 vetur 或者 voler 都可前者针对Vue2版本后者针对Vue3版本
vue主要模块 重点关注src文件夹 assets 主要存放静态资源公共css、图片 components App.vue main.js ** vue模板语法** 一、文本 数据绑定最常见的形式就是使用“Mustache”(双大括号)语法的文本插值
templatediv classlogin-contenth1登录/h1p{{message}}/p/div
/template一般配合js 中的 data() 设置数据
script
export default {name: login,data(){return {message: Welcome,}}
}
/script原始 HTML 双大括号会将数据解释为普通文本而非 HTML代码。为了输出真正的 HTML你需要使用 v-html指令
templatediv classlogin-contenth1登录/h1div{{rawhtml}}/divdiv v-htmlrawhtml/div/div
/templatescript
export default {name: login,data(){return {rawhtml:a hrefhttps://baidu.com百度/a,}}
}
/script属性 Attribute Mustache 语法不能在 HTML 属性中使用然而可以使用 v-bind 指令
templatediv v-bind:iddynamicId/div
/templatescriptdata(){return{dynamicId:1001}}
script温馨提示 v-bind: 可以简写成 div :iddynamicId/div使用JavaScript 表达式 在我们的横板中我们一直都只绑定简单的 property 键值Vue.js 都提供了完全的JavaScript 表达式支持
templatediv classlogin-contenth1登录/h1P{{num5}}/Pp{{flag ? 成功 : 失败}}/p/div
/templatescript
export default {name: login,data(){return {num:10,flag:false,}}
}/script这些表达式会在当前活动实例的数据作用域下作为JavaScript 被解析。有个限制就是每个绑定都只能包含单个表达式所以下面的例子都不会生效。
二、条件渲染 v-if v-if 指令用于条件性地染一块内容。这块内容只会在指令的表达式返回 tru 值的时候被渲染
templatediv classlogin-contenth1登录/h1p v-iff加油加油/p/div
/templatescript
export default {name: login,data(){return {f:true}}
}
/scriptv-else: 你可以使用 v-else 指令来表示 vif 的“else 块”
templatediv classlogin-contenth1登录/h1p v-iff启动/pp v-else关闭/p/div
/templatescript
export default {name: login,data(){return {f:false}}
}
/scriptv-show指令 另一个用于条件性展示元素的选项是 v-show 指令
templatediv classlogin-contentp v-showfyes/pp v-showfeno/p/div
/templatescript
export default {name: login,data(){return {f:false,fe:true,}}
}
/scriptv-if vs v-show 的区别 v- if是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建 v-if 也是惰性的:如果在初始染时条件为假则什么也不做一一直到条件第一次变为真时才会开始渲染条件块。 相比之下v-show 就简单得多一-不管初始条件是什么元素总是会被染并且只是简单地基于 CSS 进行切换。 一般来说v-if 有更高的切换开销而 v-show 有更高的初始染开销。因此如果需要非常频繁地切换则使用 v-show 较好;如果在运行时条件很少改变则使用 v-if 较好 三、列表渲染 v-for指令 v-for 指令基于一个数组来染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中items 是源数据数组而 item 则是被选代的数组元素的别名。
templatediv classlogin-contenth1列表/h1ulli v-foritem in items{{item.message}}/li/ul/div
/templatescript
export default {name: login,data(){return {items: [{message: hello},{message: world},{message: vue},{message: react},{message: angular}]}}
}
/script维护状态 当 Vue 正在更新使用v-for 染的元素列表时它默认使用“就地更新”的策略。如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序而是就地更新每个元素并且确保它们在每个索引位置正确渲染。 为了给 Vue 一个提示以便它能跟踪每个节点的身份从而重用和重新排序现有元素你需要为每项提供一个唯一的 key attribute:
templatediv classlogin-contenth1列表/h1ulli v-foritem in items:keyitem.id{{item.message}}/li/ul/div
/templatescript
export default {name: login,data(){return {items: [{id:1001,message: hello},{id:1002,message: world},{id:1003,message: vue},{id:1004,message: react},{id:1005,message: angular}]}}
}
/script四、 事件处理 监听事件 我们可以使用 v-on 指令(通常缩写为 符号)来监听 DOM 事件并在触发事件时执行一些Javacript。用法为 v-on:click_methodName”或使用快捷方式 click-“methodName”
templatediv classlogin-contenth1列表/h1button v-on:clickcount 1按钮:{{count}}/buttonbutton clickcounter 1点击:{{counter}}/button/div
/templatescript
export default {name: login,data(){return {count:0,counter:1}}
}
/script事件处理方法 然而许多事件处理逻辑会更为复杂所以直接把JavaScript代码写在v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
templatediv classlogin-contenth1列表/h1button v-on:clickcount 1按钮:{{count}}/buttonbutton clickclickHanld点击/button/div
/templatescript
export default {name: login,data(){return {count:0,}},methods: {clickHanld(){alert(点击了按钮)}}
}
/script五、表单输入绑定 你可以用 v-model 指令在表单 input textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇但 v-model 本质上不过是语法糖。它负责监听用户的输入事件来更新数据并在某种极端场景下进行一些特殊处理。
templatediv input typetext v-modeldata.usernamep{{ data.username }}/p/div
/templatescript
// is an alias to /src
import {reactive} from vueexport default {name: home,setup() {const data reactive({username:,})return {data}}
}
/script修饰符 .lazy 在默认情况下v-mode 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加lazy 修饰符从而转为在 change 事件之后进行同步
input v-model.lazymessage/
pMessage is:{{ message }}/p
//在输入失去焦点时才获取到数据data() {return {message: }}.trim 如果要自动过滤用户输入的首尾空白字符可以给 v-model 添加 trim 修饰符
input v-model.lazy.trimmessage/
pMessage is:{{ message }}/pdata() {return {message: }}六、组件基础 单文件组件 逻辑Vue 单文件组件(又名.vue 文件缩写为 SFC)是一种特殊的文件格式它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中 1.编写组件
templateh3我是单文件组件/h3
/templatescript
// is an alias to /src
import {reactive} from vueexport default {name:MyComponents,
}
/script2.加载组件 加载组件 第一步:引入组件 import MyComponentVue fromJcomponents/MyComponent.vue’ 第二步:挂载组件 components:{ MyComponentVue } 第三步:显示组件 my-componentVue/
七、组件生命周期 每个组件在被创建时都要经过一系列的初始化过程一一例如需要设置数据监听、编译模板、将实例挂载到DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数这给了用户在不同阶段添加自己的代码的机会。 为了方便记忆我们可以将他们分类 创建时: beforeCreate 、created 组件准备创建 渲染时:beforeMount mounted组件已创建 更新时:beforeupdate .updated 卸载时:beforeunmount .unmounted vue3 vue3 生命周期 beforeCreate -使用setup0created -使用 setup0 beforeMount - onBeforeMountmounted - onMounted beforeUpdate - onBefoUpdate updated -onUpdated 数据更改会死循环-区分updated 和beforeUpdate beforeDestroy - onBeforeUnmount destroyed - onUnmounted
