vue基础
关注
分享
扫一扫
文章平均质量分 82
vue基础知识
失忆症患者_
从事前端开发工作，技术栈vue、uniapp、微信原生，希望和大家一起交流进步
展开
-
vue2.x组件间传值（父传子、子传父、兄弟组件间）
vue2.x父组与件子组件之间的通讯，vue框架最显著的特点就是组件化开发，比如，实现一个添加功能，在父组件中有一个添加按钮，点击添加按钮弹出一个窗口(弹窗为子组件)，当输入完表单信息保存时，就需要将数据传给其他组件执行其他逻辑。原创 2022-05-16 16:21:17 · 500 阅读 · 0 评论 -
基于vue框架使用canvas实现井字棋小游戏
引言：最近实现了一个图片上传压缩的功能，使用了canvas，所以学习一下canvas的语法，实现一个井字棋小游戏，这个小游戏可以人人对弈，如果大家有兴趣，可以对代码进行迭代，比如采用极大值极小值搜索法来实现人机对弈或者机机对弈。废话少说，先看演示效果:点击此处预览效果1. 创建画布<div id="app" > <div style="border: solid 1px #000000 ;width: 600px;height: 600px;" @click="getLo原创 2022-04-06 11:06:28 · 4089 阅读 · 0 评论 -
实现微信小程序和手机app（基于vue）PDF预览功能
引言：最近在做微信小程序和手机端app开发（基于vue），实现一个pdf预览功能。需求：点击pdf列表，跳转到预览pdf页面，页面上强制阅读10s后，显示一个按钮返回，更新阅读状态；要求：不能调用本地浏览器预览，不能让用户下载pdf，强制阅读10s后才可返回；准备：pdf在线文档：“http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf”1.微信小程序端方式一：webview<web-view src="htt原创 2021-12-15 17:45:18 · 8884 阅读 · 1 评论 -
vue基础——计算属性
计算属性computed:{计算属性名称:function(){}}计算属性与方法的区别：计算属性是基于他们的依赖进行缓存的方法不存在缓存字符串反转案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head>原创 2020-10-05 20:45:22 · 118 阅读 · 0 评论 -
Vue基础——过滤器（有参+无参数）
vue中的过滤器分为两种：局部过滤器和全局过滤器定义无参数全局过滤器（可定义多个）<div>{{msg | upper }}</div> Vue.filter('upper',function(val){ //将字符串的一个字符大写,slice从第一个字符之后截取 return val.charAt(0).toUpperCase()+val.slice(1); });定义无参数局部过滤器<div>{{msg | upper1}}</原创 2020-10-05 21:24:41 · 433 阅读 · 0 评论 -
vue基础——自定义指令
vue自定义指令可以使用Vue.directive( ‘指令名称’ , {} ) 来定义全局自定义指令也可以使用 directives{ 指令名称 : {} } 来定义局部自定义指令全局自定义指令<div id="app"> <input type="text" v-focus /></div>Vue.directive('focus',{ inserted:function(el){ el.focus(); }});var vm原创 2020-10-05 19:47:59 · 216 阅读 · 0 评论 -
vue实现简单选项卡
tab选项卡（简单版）<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style type="text/css"> .tab ul li{ display: inline-block; list-style:原创 2020-10-05 19:11:27 · 279 阅读 · 0 评论 -
神坑，vue中 router-view 无法渲染的问题！！！！！！
在创建路由实例对象时，路由规则数组是 routes 而不是 routers！！！！！！！！//创建路由实例对象 const router = new VueRouter({ //routes是路由规则数组 routes: [ //每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性 //path 表示当前规则匹配的 hash 地址 //component 表示当前路由规则对应要展示的组件,接收的是对象 {pat原创 2020-11-04 16:25:59 · 5125 阅读 · 0 评论 -
vue-router的基本使用
基本使用步骤：引入相关库文件（可在vue官网下载） <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>添加路由链接 <!--router-link是vue中提供的标签，默认会被渲染为a标签--> <!--to属性默认会被渲染为 href 属性--> <!--to属性的值默认会被渲染为#开头的hash地址--> <rou原创 2020-11-04 15:58:31 · 122 阅读 · 1 评论 -
vue基础——监听器
监视器watch:{ 所监听的对象:function(val){ }, }使用watch,来实现model的数据变化即可触发监听uname和xing；当input值发生改变时，fullName随之改变，完成字符串的拼接；<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src=原创 2020-10-05 21:08:47 · 167 阅读 · 0 评论 -
vue基础——循环分支结构
循环结构v-for遍历数组(数组里面的值可以是对象)item每项的数据index每项的索引<li v-for="item in flag">{{item}}</li><li v-for="(item,index) in flag">{{item+"-------"+index}}</li> flag:["apple","banana","arange"],key的作用：帮助Vue区分不同的元素，从而提高性能<li :k="ite原创 2020-10-04 09:04:20 · 162 阅读 · 0 评论 -
vue基础——表单域修饰符
number：转化为数值<input type="text" v-model.number="age"><script src="vue.js"></script><script> var vm = new Vue({ el: '#app', data: { age: '' } })</script>trim：去掉开始和结尾的空格<i.原创 2020-10-05 19:36:55 · 110 阅读 · 0 评论 -
vue前后端交互模式
1.前后端交互模式1.1 接口调用方式原生ajax基于jQuery的ajaxfetch（可理解为ajax的升级版）axios（相比于fetch更加强大）1.2 URL地址格式1.传统形式的URL格式schema://host:port/path?query#fragment① schema：协议。例如：http、https、ftp等；② host：域名或者IP地址；③ port：端口，http默认端口80，可以省略；④ path：路径，例如：/abc/a/bc⑤ quer原创 2020-10-06 16:25:29 · 201 阅读 · 0 评论