随笔分类 - Vue
摘要：一、项目目录结构划分 1、删除没有用的，改成这个 左边这两个文件夹里面的都删除，这里也改成这个 然后新建一些文件夹 二、CSS 样式的重置 对默认CSS样式经行重置： normalize.css reset.css npm install normalize.css 这是一条在命令行中执行的npm命
阅读全文
摘要：Element-plus不仅是提供了各种组件，同时还提供了一整套的字体图标方便开发者使用 安装icons字体图标 npm install @element-plus/icons-vue 全局注册 在项目目录下，创建plugins文件夹，在文件夹下创建文件icons.js文件 plugins 代表插件
阅读全文
摘要：1、VUE2 的Element 网址： Element - 网站快速成型工具 2、Vue3 的Element-plus 网址：一个 Vue 3 UI 框架 | Element Plus 区别： Element，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库 Element Plu
阅读全文
摘要：在setup中使用生命周期函 你可以通过在生命周期钩子前面加上"on"来访问组件生命周期钩子。 下表包含如何在setup()内部调用生命周期钩子 Options API Hook inside setup beforeCreate Not needed* created Not needed* be
阅读全文
摘要：Vue3是目前Vue的最新版本，自然也是新增了很多特性 1、六大亮点 Performance：性能更比 Vue 2.0 强。 Tree shaking support：可以将无用模块 “剪辑”，仅打包需要的。 Composition API：组合 API Fragment, Teleport, Su
阅读全文
摘要：最常用的核心概念包含：State、Getter、Mutation、Action 1、Getter 对 Vuex 中的数据进行过滤 import { createStore } from 'vuex' export default createStore({ state: { counter: 0 }
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变
阅读全文
摘要：路由嵌套是非常常见的需求 第一步：创建子路由要加载显示的页面 第二步 { path:"/news", name:"news", redirect:"/news/baidu", component:() => import("../views/NewsView.vue"), children:[ {
阅读全文
摘要：页面跳转过程中，是可以携带参数的，这也是很常见的业务 新建项目：vue create vue-router-demo 选上第四个 自动生成 新建NewsView.vue 先在路由当中把新创建的这个页面配置进去 接下来在首页设置打开这个页面的按钮“新闻” 新建新闻详情的页面NewsDetailsVie
阅读全文
摘要：在Vue中，我们可以通过vue-router路由管理页面之间的关系 Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举 创建项目：vue create vue-router-demo 1、在Vue中引入路由 第一步：安装路由npm
阅读全文
摘要：JS采取的是同源策略 同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。 也就是说，当协议、域名、端口任意一个不相同是，都会产生跨域问题，所以又应该如何解决跨域问题呢 1、跨域错误提示信息 2、目前主流的跨域解决方案有两种
阅读全文
摘要：在日常应用过程中，一个项目中的网络请求会很多，此时一般采取的方案是将网络请求封装起来 在src目录下创建文件夹utils，并创建文件request，用来存储网络请求对象axios 所有安装包都在这个package.json里面可以查看。 在src文件中创建utils文件夹（网络请求的方法），在uti
阅读全文
摘要：每个组件在被创建时都要经过一系列的初始化过程一一例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期的钩子函数，这给了用户在不同阶段添加自己的代码的机会 为了方便记忆，我们可以将他们分类： 创建时：beforeCreate（组件准备
阅读全文
摘要：自定义事件组件交互（可以理解成数据的反向传递） 自定义事件可以在组件中反向传递数据，PROP可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现$emit <template> <h3>单文件组件</h3> <button @click="sendHandle">发送数据</
阅读全文
摘要：1、单文件组件（可以理解成一个文件就是一个组件） Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板（html）、逻辑（js）与样式（css）封装在单个文件中 <template> <h3>单位组件<h3> </template> <script> e
阅读全文
摘要：你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。她负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。 <input v-m
阅读全文
摘要：1、监听事件：(添加事件) 我们可以使用 v-on指令（通常缩写为@符号）来监听DOM事件，并在触发事件执行一些JavaScript。用法为v-on:click="methodName"或使用快捷方式@click="methodName" <button @click="counter +=1">A
阅读全文
摘要：1、用 v-for 把一个数组映射为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。 <ul> <li v-for="item in items"
阅读全文
摘要：1、v-if v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 <p v-if="flag">我是孙猴子</p> data(){ return{ flag:true } } 2、v-else 你可以使用 v-else 指令来表示 v-if 的"else块"
阅读全文
摘要：Ctrl+j ：隐藏终端 assets：存放静态资源（eg：公共的CSS文件，项目当中所用的图片文件等） components：公共组件 App.vue:主入口的组件，根组件 main.js:主入口文件 registerServiceWorker.js:监听文件 template:就是写html的
阅读全文
浙公网安备 33010602011771号