脚本宝典收集整理的这篇文章主要介绍了小轮子:无需重构,向下兼容,在既有项目中用vue的方式开发微信小程序,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
simple-wXMp-vueify
介绍
既有项目无法重构,但想在某些页面的JS中使用vue的语法?不想手动调用小程序内的setData()?这个库可能帮你解决一些问题。
特性
使用ES6的Proxy实现对page.data的代理
使用Demo
$ gIT clone https://github.COM/qk44077907/simple-wxmp-vueify.git
之后文件夹拷贝至项目根目录
//你的路径
import '/simple-wxmp-vueify/index.js'
Page({
reactive: true,//在初始化页面时传入此字段,库将自动把页面转化为响应式
data: {
questionName: '',
questionDesc: '',
questionList: [
{
content: '',
},
{
content: '',
},
],
questionTypeList: ['单选', '多选'],
questionTypeIndex: 0,
},
computed: {
questionType: @H_512_94@function () {
return this.questionTypeList[this.questionTypeIndex]
}
},
addItem() {
this.questionList.push({
content: '',
})
},
removeItem(e) {
let index = e.target.dataset.index
if (this.questionList.length <= 2) {
return
}
this.questionList.splice(index, 1)
}
});
wxML模板
<view class="question-panel">
<view
class="item"
wx:for="{{questionList}}"
wx:for-item="question"
wx:for-index="index"
wx:key="name"
>
<!--
注意双向绑定更新需要在对应元素上指定data-path属性
代表需要更新的属性相对data的路径,使用 '.'拼接
如 'questionList.0.content'
-->
<textarea
bindinput="updateVM" data-path="questionList.{{index}}.content"
type="text" placeholder="{{'选项'+(index+1)}}"
placeholder-style="font-Size:30rpx"
maxlength="40"
value="{{question.content}}"
auto-height
>
</textarea>
<view
class="icon"
bindtap="removeItem"
data-index="{{index}}"
>
删除
</view>
<view
class="icon"
bindtap="addItem"
data-index="{{index}}"
>
添加
</view>
</view>
</view>
TODO
- watch功能
以上是脚本宝典为你收集整理的小轮子:无需重构,向下兼容,在既有项目中用vue的方式开发微信小程序全部内容,希望文章能够帮你解决小轮子:无需重构,向下兼容,在既有项目中用vue的方式开发微信小程序所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。