vue.js
关注
分享
扫一扫
mischen520
JAVA高级架构师
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
什么是跨域以及为什么会出现跨域以及跨域的解决方案
1.什么是跨域？跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。• 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；跨域举例：2.为什么会出现跨域？我们都知道要想访问一个网站，首先要知道这个网站的URL，才能够进入该网站。而URL是由协议、域名、端口组成的（协议，浏览器自动填充；域名的端口默认为80，所以通常这两项不用输入）。而跨域就是说去访问的网站信息中的协议、域名、端口号这三者之中任意一个与当前页面的UR原创 2022-07-02 10:39:02 · 16574 阅读 · 0 评论 -
VS code怎样安装常用插件
vscode原创 2022-06-03 09:29:49 · 406 阅读 · 0 评论 -
Vue 的 keep-alive 的作用?
keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。propsinclude - 字符串或正则表达，只有匹配的组件会被缓存exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存<template> <原创 2021-07-30 18:53:56 · 166 阅读 · 0 评论 -
vue路由参数跳转具体实现方式
业务场景大概是这样的，我查询一个列表，展示在页面上，当我点击某一条信息的时候，可以给我跳到他相应的上面去，列表页展示如下：我当选择某一条信息之后，他就给我跳到相应的单个列表详情页，页面截图如下所示：可以看到，跳转的路径为：http://localhost:8080/blog/1，这里要想达到跳转的时候自动带上每个标题的id，这就需要路由来进行控制，首先，在main.js里面添加路由支持，具体代码如下：// The Vue build version to load with the原创 2021-04-20 06:37:18 · 301 阅读 · 0 评论 -
vue实现自定义搜索功能
vue实现自定义搜索功能需要使用computed函数，具体代码实现如下：<template> <div v-theme:column="'narrow'" id="show-blogs"> <h1>博客总览</h1> <input type="text" v-model="search" placeholder="搜索"> <div v-for="blog in filteredBlogs" cl原创 2021-04-18 21:08:16 · 1305 阅读 · 1 评论 -
vuejs实现标题颜色随机变幻（使用自定义指令实现）
1.在标签上面自定义一个指令，代码如下：2.在main.js中使用Vue.directive绑定自定义指令，代码如下：// 自定义指令Vue.directive('rainbow',{ bind(el,bing,vnode){ //颜色随机生成 el.style.color ="#"+Math.random().toString(16).slice(2,8); }})3.页面效果如下：需要注意的是，在vue中所有自定义指令均应以v-开头，例.原创 2021-04-18 19:42:15 · 622 阅读 · 0 评论 -
vuejs怎样将checkbox样式设置为一排展示
开始拿到一个页面，页面是这样展示的：这个展示的太不友好，现在希望将这个弄成一排展示，最后达到这样的效果：因为前面已经设置了label样式，所以现在只需要根据id进行设置样式就行，之前的代码是这样的：修改之后的代码为：<style scoped>#add-blog *{ box-sizing: border-box;}#add-blog{ margin: 20px auto; max-width: 600px; paddin原创 2021-04-18 14:47:32 · 1165 阅读 · 0 评论 -
vue.js3.0 select 列表 获取表单注意事项
今天在写vuejs的时候，发现获取select标签的时候默认属性并没有获取到，调试了一半天，才找到了原因，最开始的时候我是这样写的，发现通过blog.author去获取data里面的属性根本获取不到，达不到页面默认的效果，页面效果是这样展示的，可以看到，作者还是没有获取到data里面的属性，所以我就将v-model里面的属性重新绑定了一下，修改为：页面效果如下：这样下拉框里面就默认展示为空了，当我需要选择的时候才展示下拉框里面的值，这个在vuejs2.0里面都是通过b原创 2021-04-18 08:36:15 · 447 阅读 · 0 评论 -
Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue的两种解决办法
在使用VScode编辑器vue开发过程中，v-for在Eslint的规则检查下出现报错：Elements in iteration expect to have ‘v-bind:key’ directivesEslint规则检查显示如下：现在说说解决他的两种方法：1.直接在v-for循环后面绑定一个属性，跟前面需要循环的属性一一对应，截图如下：2.在vscode中去掉Eslint规则检查，具体操作截图如下：文件–》首选项–》设置–》在搜索框中输入：vetur.validation原创 2021-04-18 07:55:45 · 3270 阅读 · 0 评论 -
vue路由跳转的几种方式
<template> <div> <h1>Home</h1> <button @click="goToMenu" class="btn btn-success">Let's order!</button> </div> </template><script>export default { methods:{ goToMe.原创 2021-04-14 21:12:05 · 190 阅读 · 0 评论 -
vue.js生命周期（钩子函数）以及使用场景
什么是vue的生命周期Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期它的大致流程图是这样的：下面来详细的说一说vue的8个钩子函数：beforeCreate() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法created（）被创建 dat原创 2021-04-13 00:37:52 · 2679 阅读 · 0 评论 -
vuejs子向父组件传值
子向父组件传值使用：this.$emit，在里面绑定需要传值的对象，代码如下：<template> <header v-on:click="changeTitle"> <h1>{{title1}} -- {{title}}</h1> </header></template><script>export default { name: 'app-header', props:{原创 2021-04-12 23:54:02 · 169 阅读 · 0 评论 -
vue.js父组件向子组件传值
父组件向子组件传值使用v-bind:users，绑定对象，子组件里面使用props来接收，具体代码如下：父组件：<template> <div id="app"> <app-header></app-header> <users v-bind:users="users"></users> <app-footer></app-footer> </div></te原创 2021-04-12 22:04:58 · 262 阅读 · 0 评论 -
vuejs组件css作用域
关键字是使用scoped，在每一个样式里面添加scoped，具体代码如下：<template> <div id="app"> <h1>{{title}}</h1> <users></users> </div></template><script>//局部注册组件import Users from './components/Users'export defa原创 2021-04-12 20:32:24 · 162 阅读 · 0 评论 -
vue局部注册组件的使用
1.Users.vue:<template> <div class="users"> <ul> <li v-for="user in users"> {{user}} </li> </ul> </div></template><script>export default { name: 'users', data () {原创 2021-04-12 00:08:35 · 548 阅读 · 0 评论 -
vue全局组件引用示例
1.在开始引用之前需要安装node.js，并保证已经可以使用vue命令，然后才能开始下面的操作步骤，目录结构为：src下面的目录结构为：它的默认加载顺序是index.html-->main.js-->App.vue1.首先需要在components下面新增一个Users.vue，格式如下：<template> <div class="users"> <ul> <li v-for="user in users原创 2021-04-12 00:02:43 · 2397 阅读 · 0 评论 -
vue实例化多个对象调用
//实例化vue对象var one = new Vue({ el:"#app-one", data:{ characters:["ddd","34","df"], users:[ {name:"mischen",age:30}, {name:"mischen1",age:33}, {name:"mischen2",age:35}, {name:"mischen3",age:36} ], success:false, title:.原创 2021-04-11 22:28:35 · 484 阅读 · 0 评论 -
v-for标签使用示例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src="https://unpkg.com/vue"></script> </he.原创 2021-04-11 15:49:43 · 710 阅读 · 1 评论 -
v-if和v-show的区别和使用场景
先来看看v-if的最简单使用：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src="https://unpkg.com/vue"></scrip原创 2021-04-11 11:19:45 · 568 阅读 · 0 评论 -
vus.js动态绑定css样式
首先，要知道vuejs动态绑定需要用到哪个属性，即v-bind:class这个值，下面我们来看看具体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="styles.css"> <script src原创 2021-04-11 10:41:35 · 525 阅读 · 0 评论 -
vue.js中computed和methods的区别以及使用场景
先来看一下methods调用的使用场景：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"></s原创 2021-04-11 09:41:24 · 863 阅读 · 2 评论 -
vue.js数据双向绑定示例
vusjs数据双向绑定指令为：v-model，具体代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"原创 2021-04-11 01:20:04 · 399 阅读 · 1 评论 -
vue.js绑定enter事件
直接上代码吧：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <link rel="stylesheet" href="style.css"> <script src="https://unpkg.com/vue"></script>原创 2021-04-11 01:03:56 · 655 阅读 · 0 评论 -
vue.js绑定单击事件和双击事件（共用同一个方法代码示例）
首先，先来学习一下绑定单击事件和双击事件的2个常用标签：v-on:click 表示单击v-on:dblclick 表示双击示例代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue.js 学习</title> <script src="https://unpkg.com/vue">..原创 2021-04-10 18:11:19 · 2757 阅读 · 0 评论 -
vue.js属性绑定示例
直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue"></script> </head> <body> <!--app是根容器 --> <div id="app">原创 2021-04-10 17:47:45 · 154 阅读 · 0 评论 -
vue.js怎样拿到当前实例化对象
直接上代码，<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="app"> <h1>{{ greet('af原创 2021-04-10 17:21:54 · 917 阅读 · 0 评论 -
windows怎样安装nodejs(安装node js，输入命令，提示：‘node‘ 不是内部或外部命令，也不是可运行的程序)
1.先到node.js官网下载最新node.js的包,地址为https://nodejs.org/en/，2.点击上图中的下载，下载下来的包为：3.然后依次点击安装，全部默认就行，可以根据自己的需要修改默认安装路径，安装完之后的文档结构图为：4.检验安装输入是否成功，Windows打开cmd窗口，输入node -v发现提示“'node' 不是内部或外部命令，也不是可运行的程序”，表明此时还没有环境变量支撑，这个时候需要去安装环境变量。5.安装环境变量的步骤为：右键单击电脑-.原创 2021-04-10 10:10:59 · 448 阅读 · 0 评论