vue
文章平均质量分 64
悠哉码农的日常
这个作者很懒,什么都没留下…
展开
-
vue路由的配置
vue路由的配置安装:npm install vue-router将路由模块抽离为单独的js文件新建文件 /src/router/index.js在index.js文件配置:import Vue from 'vue'import router from 'vue-router'//导入需要路由映射的组件import HelloWorld from '../components/HelloWorld.vue'//实例化并导出路由对象export default new router({原创 2020-11-30 11:29:59 · 153 阅读 · 0 评论 -
vue通过自定义指令实现文本框只能输入正整数
directives: { numInput(el) { el.addEventListener("keypress", function (e) { e = e || window.event; let charcode = typeof e.charCode === "number" ? e.charCode : e.keyCode; let re = /\d/; if ( !re.test(Stri原创 2020-11-11 20:48:00 · 285 阅读 · 0 评论 -
vue使用v-model实现子向父传值
使用v-model实现子向父传值一、父组件<template> <div> <child v-model="inputValue"></child> {{ inputValue }} </div></template><script>import child from "./child";export default { components: { child, },原创 2020-11-11 20:11:43 · 329 阅读 · 0 评论 -
Vue实现数字累加动画效果
<template><div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow">0</span></div></template><script>export default { props: { time: { type: Numbe原创 2020-10-16 10:39:05 · 2783 阅读 · 2 评论 -
Nuxt,js项目配置可局域网访问
在package.json文件里配置:“config”: {“nuxt”: {“host”: “0.0.0.0”,“port”: 3000}}文件位置:原创 2020-10-16 09:27:43 · 1249 阅读 · 1 评论 -
Vue手动实现排他功能
效果样式:其效果就是当用户点击某个按钮高亮他,其他的变灰色,这就是一个典型的排他功能。利用Vue当中动态绑定css的方式就可以很好的实现它:<style> .nav { list-style: none; display: flex; justify-content: space-between; background-color: #66ccff; }原创 2020-09-05 17:08:30 · 3482 阅读 · 0 评论 -
vue解除数据双向绑定
Vue是典型的MVVM模型的前端框架,但是有的时候,我们并希望某个数据在某种情况能解除掉数据双向绑定:let obj = JSON.parse(JSON.stringify(data));将对象转为json字符串之后再转对象就能解除掉数据的双向绑定...原创 2020-06-14 19:15:25 · 1794 阅读 · 0 评论 -
听说你还不会vue?(持续更新中)
什么是Vue?Vue.js(读音 /vjuː/, 类似于 view) 是一个渐进式JavaScript框架Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。创建Vue实例要使用Vue这个框架,肯定需要先引入Vue我们打开vue的官网https://cn.vuejs.org/v2/guide/vue实例<!DOCTYPE html><html lang="en"><head>原创 2020-05-26 22:59:40 · 1000 阅读 · 5 评论