mpvue 注意事项

1、页面跳转，注意是普通跳转navigateTo还是底部导航跳转 switchTabstarQuestion(){const url = '../subject/main'// switchTabnavigateTowx.switchTab({ url })},2、变量图片文字引入组件<img :src="item.ad_...

远一航一

5722人浏览 · 2018-03-29 10:07:54

远一航一 · 2018-03-29 10:07:54 发布

      1、页面跳转，注意是普通跳转navigateTo还是底部导航跳转 switchTab 
 
  starQuestion(){ 
 
  const 
  url = 
  '../subject/main' 
 
  // switchTab navigateTo 
 
  wx. 
  switchTab({ 
  url }) 
 
   },

 
  2、变量 图片 文字 引入组件 

 
 < 
 img 
 :src=" 
 item. 
 ad_url" 
 alt= 
 "" 
 > 

 
  < 
  toast 
  :message=" 
  msg" 
  :visible.sync=" 
  visible" 
  position= 
  "center" 
  ></ 
  toast 
  > 
 
3、模板注意 设置props 模板名称name 

 
  < 
  template 
  > 
 
  < 
  div 
  class= 
  "userinfo" 
  > 
 
  < 
  img 
  class= 
  "userinfo-avatar" 
  :src=' 
  avatarUrl' 
  background-size= 
  "cover" 
  /> 
 
  < 
  div 
  class= 
  "userinfo-nickname" 
  > 
 
  < 
  p 
  >{{ 
  nickName}} 
  </ 
  p 
  > 
 
  </ 
  div 
  > 
 
  </ 
  div 
  > 
 
  </ 
  template 
  > 
 
  < 
  script 
  > 
 
  // 头像信息模板 
 
  export 
  default { 
 
  name: 
  'inform', 
 
  props: { 
 
  nickName: 
  'String', 
 
  avatarUrl: 
  'String' 
 
   } 
 
   } 
 
  </ 
  script 
  >

 
  4、关于formid 按钮要把formsubmit 改为@submit 
  如  
  bindchange="eventName" 
   事件，需要写成  
  @change="eventName" 
 
 
  <!-- <form report-submit="true" bindsubmit="formSubmit" class="formSubmit"> --> 
 
 
  < 
  form 
  report-submit= 
  "true" 
  @submit=" 
  formSubmit" 
  class= 
  "formSubmit" 
  > 
 
 
  < 
  button 
  class= 
  "starButton" 
  formType= 
  "submit" 
  >开始出题 
  </ 
  button 
  > 
 
 
  </ 
  form 
  > 
 
 
  
 
 

小程序组件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

示例代码：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^