Vue
关注
分享
扫一扫
Kevin11Yao
这个作者很懒，什么都没留下…
展开
-
vue-router的安装与使用
vue-router的安装与使用一、安装步骤①：安装vue-routernpm install vue-router --save步骤②：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use（）来安装路由功能）导入路由对象，并调用Vue.use(VueRouter)创建路由实例，并传入路由映射配置在Vue实例中挂载创建的路由实例二、使用创建的router的配置文件在src下的router文件夹下的index.js文件中index.js中内容如下：注：原创 2021-03-17 10:28:48 · 1133 阅读 · 0 评论 -
使用vue-lazyloader实现图片的懒加载
使用vue-lazyloader实现图片的懒加载引言：在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。懒加载 技术简介：懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。图片的懒加载通俗的来讲，图片的懒加载：图片需要显示在屏幕上时，再进原创 2021-03-15 17:48:53 · 471 阅读 · 0 评论 -
VueCLI2以及CLI3创建项目的过程
VueCLI2以及CLI3创建项目的过程1.全局安装webpacknpm install webpack -g2.安装Vue脚手架(默认是脚手架3)npm install -g @vue/cli (3.x.x)3.若要使用脚手架2，则需要拉取Cli2npm install @vue/cli-init -g4.Vue CLI2初始化项目vue init webpack my-project5.Vue CLI3初始化项目vue create my-proj原创 2021-03-13 17:13:04 · 118 阅读 · 0 评论 -
Vue——v-model的三种修饰符lazy、number、trim
Vue——v-model的三种修饰符lazy、number、trimv-model.lazy：值修改操作完成之后才会发生变化。v-model.number：值修改时，保持其值为Number类型。v-model.trim：剔除输入框内内容的空格，使其输入符合规则。<body> <div id="app"> <!-- 1.修饰符：lazy --> <input type="text" v-model='message'&原创 2021-03-07 17:13:57 · 1377 阅读 · 0 评论 -
Vue——v-model结合值绑定写法
Vue——v-model结合值绑定写法<body> <div id="app"> <label v-for='each in originHobbies' for="each"> <input type="checkbox" :value='each' :id='each' v-model='hobbies'>{{each}} </label> <h2 v-i原创 2021-03-07 17:01:31 · 817 阅读 · 0 评论 -
Vue中v-model结合radio、checkbox单/多选框、select单/多选框的几种特殊写法
Vue中v-model结合radio、checkbox单/多选框、select单/多选框的几种特殊写法一、v-model结合radio类型radio类型若有了v-model的绑定之后（前提是绑定同一个属性），则 name 可以省略。<body> <div id="app"> <label for="male"> <input type="radio" id='male' value="男子" v-model=原创 2021-03-07 16:56:50 · 2007 阅读 · 0 评论 -
Vue——使用v-bind与v-on实现v-model双向绑定
Vue——使用v-bind与v-on实现v-modelv-model其实是一个语法糖，他的背后本质包含两个操作：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件实现步骤如下：①通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。<body> <div id="app"> <input type="text" :value='message'>原创 2021-03-07 16:27:07 · 1592 阅读 · 0 评论 -
Vue实现一个简易的书籍购物车demo
代码如下：index.html//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>书籍购物车</title> <link rel=原创 2021-03-07 12:41:26 · 149 阅读 · 0 评论 -
Vue中七个数组的响应式方法
Vue中七个数组的响应式方法Vue中的响应式方法：改变vue对象中数据的内容，页面的内容也会同步更新。<body> <div id="app"> <ul> <li v-for= 'each in letters'>{{each}}</li> </ul> <button @click = 'btnClick'>按钮</button>原创 2021-03-07 10:35:05 · 1716 阅读 · 1 评论 -
Vue中，v-show与v-if的区别
待写原创 2021-03-06 23:12:49 · 412 阅读 · 0 评论 -
Vue中计算属性的 setter 和 getter 以及 简便书写方式的由来
待写原创 2021-03-06 23:11:57 · 189 阅读 · 1 评论 -
Vue中，计算属性computed和methods的区别
待写原创 2021-03-06 23:10:58 · 139 阅读 · 0 评论 -
Vue学习笔记——vue.config.js(路径别名)以及 .editorconfig（代码风格规定）
在主项目目录下分别创建一个vue.config.js(路径别名)以及 .editorconfig（代码风格规定）。路径别名作用：设置好了路径别名后，可在使用这些路径下的内容时，不用使用 **…/**来进行目录回退，可直接使用别名，即使文件目录发生变化，只要规定的这些别名没有变化，则不需要改变。路径别名设置举例：module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a原创 2020-12-12 09:44:35 · 326 阅读 · 0 评论