Vue.js
文章平均质量分 82
Vue.js
AVIC_501
一个一路坎坷,从零开始全速前进的前端小白
展开
-
node.js以及Vue的脚手架安装过程
一、安装node.js1)实际的工作项目都是模块化项目,模块化的项目需要node.js环境。因此在开始项目之前需要先安装node.js.2)安装node.js需要操作DOS窗口(终端,命令行,小黑窗)。3)DOS窗口打开方式:win键+R。然后输入cmd确定。二、常见DOS命令:1)dir:用于列出当前文件夹下的所有文件及文件目录2)cd: 进入当前文件夹下的某个目录3)cd.. :回退当上一级目录4)ctrl+c:取消操作.5)方向键向上:复制上一条命令。.原创 2022-04-29 14:16:05 · 3868 阅读 · 0 评论 -
Vue框架(九)
一、路由守卫某商场详情页=>点击购买 如果登录了,直接跳转到付款页。 如果没登录,直接跳转到登录页,登录后直接跳转到付款页。如何实现上面的功能?可以通过路由守卫实现。路由守卫一定会用到的api路由守卫也叫路由钩子,路由生命周期=>路由守卫其实都是在路由跳转的特定阶段触发的函数。路由跳转都会经历那些阶段?从路由Home跳转到路由News路由跳转流程。 路由触发,准备跳转 ...原创 2021-08-20 16:22:05 · 124 阅读 · 0 评论 -
Vue框架(八)
一、路由组件通信1.0<body> <div id='app'> </div></body>路由组件间通信,用bus通信会变得和麻烦因我目标路由组件默认情况下没有创建<script src="../js/vue.js"></script><script src="../js/vue-router.js"></script><script> ..原创 2021-08-19 16:56:30 · 1831 阅读 · 0 评论 -
Vue框架(七)
一、is属性<body> <div id='app'></div></body><script src="js/vue.js"></script> <script> // 挂载时,可以通过is属性知道组件名来挂载 const listItem = { template: `<li>111111111111</li>` }原创 2021-08-18 17:45:17 · 220 阅读 · 0 评论 -
Vue框架(六)
一、销毁前后<body> <div id='app'></div></body>destroyed => 组件销毁后的善后处理,例如停止定时器 销毁发送了什么事情?组件实例变null了吗? 组件销毁只是让数据不驱动视图更新了而已.组件实例还是存在的.<script src="js/vue.js"></script> <script> const box = {原创 2021-08-17 17:46:10 · 226 阅读 · 0 评论 -
Vue框架(五)
一、虚拟节点<body> <!-- 真实的节点 --> <div id='app'> <h3>Vue你好</h3> </div></body>虚拟节点=>对于理解视图框架(Vue,React,小程序)目前流行的视图框架都是基于虚拟节点技术开发的.为什么jq落伍了=>jq的DOM操作性能不好.视图框架=>更新视图的最后异步是D...原创 2021-08-16 20:04:51 · 195 阅读 · 0 评论 -
Vue框架(四)
一、状态管理<body> <div id='app'></div> <div></div> <div></div></body>3个组件App,box,son都渲染count数据.count写在哪个组件上 当count变化时,3个组件同时更新视图.=>状态管理=>应该把数据放到3个组件的共同祖先组件上 状态管理 什么叫状...原创 2021-08-16 19:22:28 · 205 阅读 · 0 评论 -
Vue框架(三)
一、 过滤器1.0<body> <div id='app'> <div v-color='color'>111</div> </div></body>指令 => 封装DOM操作自定义指令 => 封装自己的DOM操作(封装一些ui框架特别有用)v-color='red' => DOM操作把当前标签设置为背景红<script src="js/vue.js">.原创 2021-08-12 19:24:07 · 232 阅读 · 0 评论 -
Vue.js框架(二)
一、v-on的修饰符<body> <div id='app'> <div @click='divHandle'> <button @click.stop='buttonHandle'>按钮</button> </div> </div></body>@click.stop => 修饰符.阻止冒泡@click.prevent => 修饰符.阻..原创 2021-08-11 20:14:33 · 119 阅读 · 0 评论 -
Vue.js框架(一)
一. MVC和MVVM的关系如何把数据放到标签里?如何渲染页面?视图框架使用的是数据驱动的方式.(没有DOM操作).数据驱动:=>给标签绑定数据,要修改标签,直接修改与之绑定的数据即可.(没有DOM操作).学框架的第一个困难=>就是无法从DOM操作的思路转换成数据驱动的思路.DOM操作VS数据驱动MVCVSMVVMMVC的描述:MVC=>M是数据model层,V就是视图View...原创 2021-08-10 20:12:55 · 245 阅读 · 0 评论 -
Vue.js框架初识
Vue和React=>视图框架=>不通过DOM操作更新页面(视图)渲染视图1:DOM操作2:数据驱动(没有DOM操作).Vue的作者是一个中国人.尤雨溪Vue的版本.1x2x=>最主流的版本3x=>去年发布的正式版.(逐渐流行)Vue的知识.数据绑定(基础)插值表达式指令computed和watc...原创 2021-08-10 17:24:46 · 87 阅读 · 0 评论