vue 基础总结

超好看，拿来即用的后端开发框架

https://github.com/PanJiaChen/vue-element-admin

https://panjiachen.github.io/vue-element-admin/#/table/tree-table

http://webapplayers.com/inspinia_admin-v2.8/dashboard_5.html

手机登陆模板界面

https://colorlib.com/wp/html5-and-css3-login-forms/

mint-ui 实例

https://github.com/Panda-Hope/vue-qqmusic

https://github.com/ssshooter/img-vuer 图片展示

http://vanthink-ued.github.io/vue-core-image-upload/index.html#/cn/home 图片上传

http://www.17sucai.com/pins/22602.html html5手机上传多张图片

 

欢迎加群学习：

 

860416262

 

1、下拉选择框

<el-form-item label="权限状态" prop="reMark">
    <el-select v-model="form.status" clearable placeholder="请选择">
        <el-option value="1" label="操作方法"></el-option>
        <el-option value="2" label="地址"></el-option>
    </el-select>
</el-form-item>

2、:model和v-model的区别

 :model是v-bind:model的缩写

3、Element表单验证

http://www.cnblogs.com/lantuoxie/p/9305353.html

4、校验

levelType: [
    { required: true, message: '必填', trigger: 'blur'},
    {type:'number',message: '必须是数字',trigger: 'change'}
],

5、element 数字验证

<el-form-item
    label="年龄"
    prop="age"
    :rules="[
  { required: true, message: '年龄不能为空'},
  { type: 'number', message: '年龄必须为数字值'} //如果有trigger: 'blur'，需要去掉。
]">
    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
</el-form-item>

6、post 请求

this.axios({
    method: 'post',
    url: '/admin/config/createOrUpdateAdminAction',
    data: this.form
}).then(response => {//以后必须按照这种写法function (response)这种局限性太大
    alert('chengong!');
    // ref.resetFields();
    this.$refs[formName].resetFields();
})

 注：如果用function (response) 的写法，运行this.$refs[formName].resetFields();就会报错说：refs 未定义

第二次踩坑：refs 未定义是因为this不是指向Vue这个实例了，

chooseImage() {
  let that = this  //注意这里的写法
  that.images.serverId = [];//清空serverid集合
  wx.chooseImage({
    count: 9, // 默认9
    sizeType: ['compressed'], // 压缩图
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) { //没用=>导致的一直获取不到this的实例，那是因为使用函数之后，this的实例改变了
      $('.wxChooseImages ').remove();
      var localIds = res.localIds;
      if (localIds != "") {
        for (var i = 0; i < localIds.length; i++) {
          var imgDivStr = '<div class="bankPage wxChooseImages multiselect"><img src="' + localIds[i] + '" class="pageImg" /></div>';
          $(".chooseImage").before(imgDivStr);
        }
      }
      // debugger;
      that.images.localId = res.localIds;
      that.uploadImage(res.localIds);  没有使用=》导致一直说函数未定义
    }
  });
},

 

 

7、element 树结构从后端获取数据渲染（我这里手动写多一层数据）

treeData: [{
    id: 0,
    name: '顶级分类',
    adminActions:[],
}],
defaultProps: {
    children: 'adminActions',
    label: 'name'
}

//获取权限列表
getPermission(){
    this.axios({
        method: 'get',
        url: '/admin/config/getAdminActoinGroupByParentId',
    }).then(response => {
        this.treeData[0].adminActions = response.data.content;
    })
},

 

8、报错

但是当你新建一个vue项目时，需要重新安装stylus，否则报错：

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue in ./src/components/a.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-1d57e5ea","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue

解决方法：

  npm install stylus-loader css-loader style-loader --save-dev

 npm install sass-loader node-sass --save（自己测试到这里就行了，其他大佬还说在试下下面那个）

npm install vue-style-loader --save-dev 

9、console.log(typeof this.form.mobile);打印变量类型

10、如果使用的是别人的代码，发现布局不完美，但是又发现不了是哪个div出现问题，这时候就只能在附近的div中一个一个点击，看看是哪一个div出现问题了。

11、当然有一些就是基础知识的问题了：

display: flex;

justify-content: space-around;

由于看不懂导致出现的问题

12、vue修改样式不成功的问题<!-- Add "scoped" attribute to limit CSS to this component only -->

答：英语差的原因

<style scoped>style样式中加了scoped就限制了单前样式只会在这个组件中生效，而不会覆盖其他的css样式，英语不好，怪自己咯，说明在上面，自己都不看，-。-

13、vue是可以直接使用80 端口的，除非被占用，才会在运行的时候使用81端口，而vue 的dev不能被外网映射，但是微信网页授权却能获取到code

14、微信浏览器可以使用  debugx5.qq.com  开启vconsole 控制器查看调试信息

总结：一直郁闷为什么手机的浏览器一直不能发送axios请求，原来是我请求的地址出错了，才回导致这个问题，使用了控制台查看报错一下就解决问题了。

注意：微信的这个控制台还有点小bug，我还卸载了微信重装才好的。估计是我哪里设置不好导致的。用vue的热部署，更新代码之后不要刷新页面，控制台就不会被关闭，可以实时的查看请求

15、前后端分离的请求后端接口，千万不要使用localhost，否则，在手机端调试的时候，等哭吧

16、在vue的method中的function方法中，是可以使用jquery的ajax的

   //从微信服务器保存到七牛云服务器
      uploadToQiniu(staffid, serverIds) {
        $.ajax({
          type: "post",
          url: "/admin/weixinToken/wechatJsSDKUploadToQiniu",
          dataType: "json",
          async: false,
          data: {
            staffId: staffid,
            mediaIds: serverIds,
            sessionid: "sadas",
            type: $("#CredentialsEnum_OLDUS").val()
          },
          success: function (data) {

          },
          error: function (xhr, status, error) {

          }
        });
      },