vue加载显示{{xxx}}的解决方法 v-cloak
摘要:一般vue.js文件放在最后,由于浏览器是从头到尾的渲染机制,在没有读取到识别符对应的js控制语句就会直接显示{{xxx}} 这个问题可以用vue的一个特点解决,就是Vue会自动屏蔽掉自定义属性 我们可以为对应的dom节点添加一个自定义属性,比如 dom-hidden(官方:v-cloak) 然后c
阅读全文
posted @
2020-07-23 14:24
JoeYoung
阅读(1912)
推荐(1) 编辑
uniapp中自定义组件的封装及使用
摘要:在项目根目录下,创建 components 文件夹,新建文件myinput.vue。 <template name="myinput"> <view> <input class="myinput" type="text" placeholder="请输入信息" value="" /> </view>
阅读全文
posted @
2020-05-22 17:06
JoeYoung
阅读(14945)
推荐(0) 编辑
uni-app 全局变量的几种实现方式
摘要:公用模块 定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。 示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公
阅读全文
posted @
2020-05-21 15:32
JoeYoung
阅读(5811)
推荐(1) 编辑
uniapp小实例-新闻列表及详情
摘要:首先新建详情info文件夹及info.vue文件,然后在index页写列表部分代码: <template> <view class="content"> <navigator class="newslist" :url="'../info/info?threadid=' + item.threadi
阅读全文
posted @
2020-05-20 15:47
JoeYoung
阅读(4305)
推荐(0) 编辑
uniapp 分享接口
摘要:注意:仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码。一般通过canvas绘制图片,插件市场有很多生成图片的插件。 小程序分享: // 小程序分享 onShareAppMessage() { return { title: 'test', path: 'pa
阅读全文
posted @
2020-05-19 16:38
JoeYoung
阅读(4137)
推荐(0) 编辑
vue h5转换uni-app指南(vue转uni、h5转uni)
摘要:如果你已经有了一个基于vue开发的H5站点,想转换为uni-app。 首先注意2个前提: 1、你的web站是适合手机屏幕的; 2、你的H5代码是全后端分离的,uni-app只处理前端代码。 一切从新建一个uni-app项目开始。然后依次进行 文件处理 把之前的vue web项目的前端代码copy到新
阅读全文
posted @
2020-05-18 15:50
JoeYoung
阅读(5157)
推荐(2) 编辑
uniapp详解及配置
摘要:网络模型的变化 以前网页大多是b/s,服务端代码混合在页面里; 现在是c/s,前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染。 文件类型变化 以前是.html文件,现在是.vue文件 文件内代码架构的变化 以前一个html大节点,里面有s
阅读全文
posted @
2020-05-15 16:22
JoeYoung
阅读(25627)
推荐(3) 编辑
uniapp快速上手
摘要:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 快速上手: 1. 通过 HBuilderX 可视化界面 可视化的方式比较简单,HBuilderX内置相关环境
阅读全文
posted @
2020-05-14 16:43
JoeYoung
阅读(954)
推荐(0) 编辑
Vuex 的项目实例11 列表数据的按需切换
摘要:如果要实现列表数据的按需切换,就需要用到 getters ,可以将数据源包装,按需来展示,并不会修改数据源。 1、定义 getters getters: { // 列表数据 infoList(state) { if (state.viewKey 'undone') { return state.li
阅读全文
posted @
2020-05-13 10:40
JoeYoung
阅读(330)
推荐(0) 编辑
Vuex 的项目实例10 底部按钮高亮切换
摘要:1、把底部按钮的默认 type 加上 <!--操作按钮--> <a-button-group> <a-button type="primary" >全部</a-button> <a-button type="default" >未完成</a-button> <a-button type="defau
阅读全文
posted @
2020-05-12 11:27
JoeYoung
阅读(546)
推荐(0) 编辑
Vuex 的项目实例9 清除已完成
摘要:点击清除已完成按钮,把列表中的已完成就会被清除,只剩下未完成的任务事项。 1、给“清除已完成”添加点击事件: <!--把已经完成的任务清空--> <a @click="clean">清除已完成</a> <script> export default { methods: { // 清除已完成的任务事
阅读全文
posted @
2020-05-11 16:57
JoeYoung
阅读(472)
推荐(0) 编辑
Vuex 的项目实例8 统计未完成事项
摘要:使用 getters 包装器 1、定义 getters 函数: getters: { // 统计未完成任务的条数 unDoneLength(state) { return state.list.filter(item => item.done false).length } } 2、引入 gette
阅读全文
posted @
2020-05-11 14:09
JoeYoung
阅读(349)
推荐(0) 编辑
Vuex 的项目实例7 修改完成状态
摘要:需求的功能是:点击对应复选框,拿到最新的状态,再根据点击对应项的 id,把最新的状态,赋值到 list 数组中对应的 item 项。 1、给复选框添加点击事件: <!--复选框--> <a-checkbox :checked="item.done" @click="checked(item.id)"
阅读全文
posted @
2020-05-09 15:41
JoeYoung
阅读(433)
推荐(0) 编辑
Vuex 的项目实例6 复选框状态绑定
摘要:1、把 list.json 文件中第一个和第三个数据的 done 改为:true 2、把完成状态和复选框做绑定 复选框是由 checked 属性来指定的。添加属性绑定: <!--复选框--> <a-checkbox :checked="item.done"> {{item.info}} </a-ch
阅读全文
posted @
2020-05-08 14:36
JoeYoung
阅读(352)
推荐(0) 编辑
Vuex 的项目实例5 删除对应事项
摘要:1、给删除按钮添加点击事件: <!--删除链接--> <a slot="actions" @click="delItem(item.id)">删除</a> <script> export default { methods: { // 删除对应事项 delItemById(id) { this.$s
阅读全文
posted @
2020-05-07 17:00
JoeYoung
阅读(500)
推荐(0) 编辑
Vuex 的项目实例4 添加事项
摘要:1、给添加事项按钮增加点击事件: <a-button type="primary" @click="addItemToList">添加事项</a-button> <script> import { mapState } from 'vuex' export default { methods: {
阅读全文
posted @
2020-05-07 11:10
JoeYoung
阅读(310)
推荐(0) 编辑
Vuex 的项目实例3 文本框的双向绑定
摘要:1、在 store/index.js 中定义新的数据 inputValue : state: { list: [], // 所以的任务列表 inputValue: 'aaa' // 文本框的内容 }, 2、回到 Home.vue 做文本框的双向绑定: <a-input placeholder="请输
阅读全文
posted @
2020-05-06 18:23
JoeYoung
阅读(562)
推荐(0) 编辑
Vuex 的项目实例2 动态加载列表数据
摘要:1、在 public 目录下新建 mock 文件夹夹,创建 list.json 文件: [ { "id": 0, "info": "Racing car sprays burnimg fuel into crowd.", "dome": false }, { "id": 1, "info": "Ja
阅读全文
posted @
2020-05-06 11:14
JoeYoung
阅读(1270)
推荐(1) 编辑
Vuex 的项目实例1 项目初始化
摘要:1、通过 vue ui 命令打开可视化面板,创建新项目:vuex-demo 2、安装 vuex 依赖包 npm install vuex axios ant-design-vue -S 当然也可以使用可视化面板的依赖安装。 ant-design-vue 是UI组件库。 3、实现 Todos 基本布局
阅读全文
posted @
2020-04-30 16:08
JoeYoung
阅读(440)
推荐(0) 编辑
VueX 的安装及简单使用
摘要:1、安装vuex依赖包 npm install vuex --save 2、导入vuex包 import Vuex from 'vuex' Vue.use(Vuex) 3、创建 store 对象 export default new Vuex.Store({ // state 中存放的就是全局共享的
阅读全文
posted @
2020-04-29 17:20
JoeYoung
阅读(11121)
推荐(2) 编辑