vue
vue相关
朲間烝茷
写写基础性的东西
展开
-
vue 父子组件 组件挂载 组件通信 slot插槽
目录vue 父子组件挂载父组件往子组件中传值子组件向父组件传值 this.$emit()this.$refs 父组件可以通过它直接引用注册过的子组件DOM中的数据vue 父子组件挂载步骤1、导入子组件步骤2、components中加载子组件步骤3、视图模板中书写组件标签<!-- 子组件 --><template><div> 张三是个小朋友</div></template><script>export d原创 2020-12-29 19:29:47 · 495 阅读 · 0 评论 -
vue指令 v-model双向绑定
目录v-model简单介绍v-model搭配radiov-model 搭配checkboxv-model搭配select使用v-model简单介绍主要作用便是监听数据的变化后,将模板和实例中的相应数据绑定在一起,实际上相当于 v-bind和@input的结合操作<!-- name 和name1中能达到的效果基本一致 --><template><div> <label for="name">姓名<input type="text" nam原创 2020-12-28 10:53:38 · 109 阅读 · 0 评论 -
vue VUEX的安装与使用
目录vuex的安装 npm i vuex -s引入和配置state数据中的调用state值得修改 通过mutations进行调用 使用this.$store.commit(方法名,值) 同步时使用this.\$set设置/更改 或者 this.\$delete删除 state内的值getters 用于将属性值处理后返回Actions 的异步调用mutations修改state内的值vuex的安装 npm i vuex -snpm i vuex -s引入和配置在src目录下新建 store文原创 2020-12-26 15:57:19 · 1070 阅读 · 1 评论 -
vue filters过滤器的统一封装
目录统一封装规则统一封装规则1、src文件夹下创建 filters文件夹,然后再filters文件夹下创建index.js即:src/filters/index.js2、在main.js中引入src/filters/index.js文件,并在下方遍历调用filters中的方法,使用VUE.filters切记:将遍历代码写在new VUE()上方3、在src/utils文件夹下的文件中创建各种工具类方法4、在src/filters/index.js中引入utils中的方法进行调用src原创 2020-12-26 10:29:55 · 306 阅读 · 0 评论 -
vue全局Api vue专有函数方法 $set() $delete
目录this.$set() 方法 给对象/数组添加值或者替换值this.$set() 方法 给对象/数组添加值或者替换值语法:this.$set(目标对象/数组,键名/索引,新值)使用1:可以给目标对象增加属性使用2:可以给目标对象替换属性使用3:可以给目标数组增加元素使用4:可以给目标数组替换元素 let obj = { name: '张三丰', age: 12, school: '中学' } this.$set(obj,原创 2020-12-25 19:25:30 · 239 阅读 · 0 评论 -
vue指令 v-show 控制显示和不显示的状态
使用v-show的时候,被隐藏的属性还在页面上,只不过css中的属性被设置为了 display:none,当页面需要频繁切换的时候可以使用v-show<template> <div class="hello"> <div> <label v-show="sta">张三丰</label> <label v-show="!sta">张翠山</label> </div>原创 2020-12-25 15:19:20 · 2466 阅读 · 1 评论 -
vue input框的复用 使用key值进行控制
当input框复用的时候,切换框会将隐藏掉的框的内容带过去加上key属性之后,既不会出现上述情况,应用面比较窄<template> <div class="hello"> <!-- 复用写法 --> <label v-if="type === false">联系电话 <input type="text" name="tel_num" /> </label> <label v原创 2020-12-25 15:12:52 · 687 阅读 · 0 评论 -
vue v-if v-else-if v-else 在简单场景中使用computed计算属性的替换写法
<template> <div class="hello"> <!-- 写法1 --> <div> <label v-if="count < 0">我还没出生</label> <label v-else-if="count === 0">我诞生了</label> <label v-else-if="count <= 3">我还是个婴儿原创 2020-12-25 14:50:41 · 1711 阅读 · 0 评论 -
vue指令 v-bind 用于绑定数据和元素属性
目录基础用法基础用法v-bind用于绑定数据和元素属性语法糖简化为 : 等价于 v-bind:可以绑定 href/class/style/src等多种属性<template> <div class="hello"> <h1>{{ msg }}</h1> <ul> <li v-for="u in users" :key="u.id">{{u.id}}--{{u.name}}<原创 2020-12-20 15:18:25 · 620 阅读 · 0 评论 -
vue指令 v-html 绑定html代码
更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。<template> <div class="hello"> <span v-html="aHtml"></span> </div></template><script>export default { name: 'HelloWorld', data () { retu原创 2020-12-20 15:00:13 · 529 阅读 · 0 评论 -
vue指令 v-once 只渲染元素和组件1次
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。<template> <div class="hello"> <h1>{{ msg }}</h1> <div v-once>{{msg}}</div> <div @click="changeMsg()">v-once</div> </div><原创 2020-12-20 14:52:15 · 1261 阅读 · 0 评论 -
vue指令 v-on:监听事件事件监听
绑定事件监听器。事件类型由参数指定。可以简写为@ :语法糖v-on:click="do()" 等价于 @click="do()"<template> <div class="hello"> <div @click="pushFunc()">v-on语法糖</div> <div @click="pushFunc()">v-on</div> </div></template>原创 2020-12-20 14:28:37 · 639 阅读 · 0 评论 -
vue指令 v-for 数据遍历 列表渲染
目录列表渲染列表渲染<template> <div class="hello"> <ul> <li v-for="u in users" :key="u.id">{{u.id}}--{{u.name}}</li> </ul> </div></template><script>export default { name: 'HelloWorld',原创 2020-12-19 22:15:53 · 1877 阅读 · 1 评论 -
vue选项 实例的属性值 el data methods computed filters watch
目录el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标data Vue 实例的数据对象。el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。只在用 new 创建实例时生效。data Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 g原创 2020-12-19 22:04:48 · 401 阅读 · 1 评论 -
vue 路由的挂载 vue-router router-view router-link replace linkActiveClass mode
目录vue-router的安装普通路由的挂载 (vue+cli_webpack + vue-router安装状态下)子路由的配置vue-router的安装注:如果是使用 vue-cli + webpack进行创建vue项目的时候,其中惠游一个选项告知是否安装vue-router,如果选的是YES,则可以跳过npm依赖安装的步骤再项目根目录键入指令npm install vue-router --save普通路由的挂载 (vue+cli_webpack + vue-router安装状态下)1原创 2020-12-19 15:52:17 · 2510 阅读 · 1 评论 -
vue框架的封装 axios
目录V、VUE的安装 vue-cli+码云gitee的项目创建A、axios的封装A-1错误码文件的封装axios依赖的引入在根目录service文件夹下新建文件request.js创建axios实例 ——request.js下请求器和拦截器的创建 ——request.js下post/get方法的封装——request.js下接口调用V、VUE的安装 vue-cli+码云gitee的项目创建A、axios的封装A-1错误码文件的封装在根目录下创建service文件夹,文件夹内新建文件errorCod原创 2020-12-17 20:07:34 · 336 阅读 · 0 评论 -
vue 安装vue
目录打开cmd,在User下安装vue-cli脚手架安装vuecd到项目目录下,使用webpack创建一个vue项目cd到pyp-vue中,然后安装依赖打开cmd,在User下安装vue-cli脚手架npm install -g vue-cli --force注:1、必须要在user下2、最好使用–force模式安装vuenpm install vue -gcd到项目目录下,使用webpack创建一个vue项目vue init webpack pyp-vue注:无特别需要的话一路小原创 2020-12-16 09:30:46 · 99 阅读 · 0 评论 -
vue.js+php 实现二进制流图片数据下载到本地
思路:生成微信小程序码的时候,微信服务器返回的是图片二进制数据流,因此我们现在服务端将二进制流转换为base64进制数据流,然后返回给前端。前端将请求到的base64进制流转换进行下载。这样可以有效避免需要通过访问图片url造成的跨域等等的一些列问题。后端代码这里以微信小程序码为例。其中$binary是二进制数据,$base64String为64位数据信息,其余代码根据自己需求书写 /** * 生成学校小程序码的base64位数据流 * @return \sf\ViewMo原创 2020-09-03 08:56:40 · 735 阅读 · 0 评论