Vue 做项目经验

Easter79
• 阅读 457

Vue 做项目经验

首先需要知道最基本的东西是:

Vue 项目打包:npm run build

Vue生成在网页上看的端口:npm run dev

修改端口号的地方在: config文件夹下index.js文件port

改变首页面在main.js

const routes = [{

  path: '/',

  component: gnlb

}

 大概在100行

编辑代码时的一些经验和坑

Vue相关经验

1. 引入自己编写的标签需要在当前页面import标签名from文件路径,注入进来之后再下面的

components里面写入标签名 然后在template里面直接使用

例:  import table_top from '../components/table-top'

components: {table_top },  注意components:{},methods:{}  之间要用逗号隔开

2. 定义变量需要在data () {return {  }}里面定义,定义完一个变量后面要加逗号

例:  data () {return {c1: '', c2:'' }}

3. created: function(){ }里面书写的是软件加载完成之前执行的函数

4. mounted: function(){}里面书写的是软件加载完成之后执行的函数

5. methods: {}里面书写正常函数 书写方法:函数名:function(){}, 定义完一个函数后面要加逗号

6. 调用函数或者定义的变量时需要用  this.函数名   或    this.变量名

例:  this.get_data();   或   this.c1

7.axios.post( 接口地址 , 要传输的数据)       成功 .then(response => {}                             失败 .catch(function(response) {})

例:  axios.post('接口地址', qs.stringify(data))

      .then(response => {

          //成功回来后做的事情

      })

      .catch(function(response) {

         //失败回来后做的事情

  });

8. 子级模块操作函数传给父级模块,使父级模块来操作

  例: 父级  <revise @on-hide="onHide">

      子级 

9.for循环数组直接出id

   v-for="(循环出的内容,循环出的ID) in要循环的数组"

   例 : v-for="(obj,index)  in  list"

  v-for循环得到key值

       <button v-for=”(gx_item,index) in list”>{{gx_item}}_{{index}}

       gx_item是循环list得出来的数据  index就是索引 从零开始

10.watch里面想监听一个对象的属性是  this不能用

  解决办法:在data里面return上面给this重新赋值  如 : xthis=this , 然后再在watch里面操作

11.组件父级想要点击或者传对象:

例:

父级:

子级:props:{

         btn: {

            type: Object,

            default:0

         },

          },

          methods:{

         btn_click(){

           this.$emit(this.btn.click);

         }

      }

<button @click="btn_click" v-if="btn.key==1">{{btn.value}}

12.父级调用子组件写内容传送:

你的权限:

    {{item}}

在pan-thumb组件里面布好外面之后直接在中间加这样父组件之间的字和span标签都会引入进来

13.父组件调用子组件函数:

父组件:

+

methods: {

  add(){

    this.$refs.editUser.query()

  },

}

子组件:methods: {

  query (){

    console.info(‘111’)

  },

}

14.阻止事件冒泡:event.cancelBubble = true;   或者: @click.stope=”aa()”

15.input输入完按enter触发按钮:

       <input @keyup.enter=”aaa()”>

       <button @click=”aaa()”>查询

Vuex相关经验

1.Vuex就是提供一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般vue对象里面的data

例:  state: {

       Datas: [],

       All_datas: {}

     },

调用: mutations: {

        setTexts (state, x) {

           state.Datas[‘list’]=111

        },

     },

2.mutations: {}里面书写的函数是不允许阻塞的 需要很顺畅的执行完毕 , 函数和函数之间用逗号隔开  调用这里面的函数:context.commit('函数名',参数)

 例:  mutations: {

    setTexts(state, x) {

      state.list = x

},

IncBaoNo(state) {

       state.All_settings['bao_NO']++;

       state.cur_sminfo=[];

   }

调用:  context.commit(setTexts, x)

3.actions:{}里面可以写任意函数,调用这里面的函数:this.$store.dispatch(函数名,参数); 

例:  setcomstate(context, x) {

      函数内容

    }

调用:  this.$store.dispatch(setcomstate, {val: x_val});

4.getter就是把组件中共有的对state 的操作进行了提取,它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。

例如: getters: {

       smdatas: state => {

         return state.Datas.slice(0, 20)

       }

     }

调用: smdatas: (state,getter) => getter. Smdatas

5.state里面的属性 再次操作赋值的时候监听不到  不可以操作

解决办法: 将对象升维 变成顶层的对象

6.在组件里面修改state的值

this.$store.state.csmx.isAllActive=1

Element 插件经验

1.点击跟随弹一个小窗 点击事件必须在el之后

 

        <el-popover

          ref="popover"

          placement="bottom"

          width="144"

          trigger="click">

         

            <span @click="set_btn()">aaa

           

            bbb

           

            ccc

         

       

        Vue 做项目经验

     

2. 不能使用v-for否则会出现警告   解决办法  外层加一个div循环div

以后如果还遇见问题了  还会继续更新。。。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。 language JavaScript "name": "vuecliversion2", "version": "1.0.0", "desc
技术小男生 技术小男生
2个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi /etc/profile2:按字母键i进入编辑模式,在最底部添加内容: JAVAHOME/opt/jdk1.8.0152 CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jar PATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、 在IOS中图片不显示(给图片加了圆角或者img没有父级) <div<img src""/</div div {width: 20px; height: 20px; borderradius: 20px; overflow: h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。 盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
> MemFire Cloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Easter79 Easter79
1年前
swap空间的增减方法
(1)增大swap空间 去激活swap交换区: #swapoff -v /dev/vg00/lvswap 扩展交换lv: #lvextend -L 10G /dev/vg00/lvswap 重新生成swap交换区: #mkswap /dev/vg00/lvswap 激活新生成的交换区: #swapon -v /dev/vg00/lvswap
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置 1、virsh edit centos7 找到“memory”和“vcpu”标签,将 <name>centos7</name> <uuid>2220a6d1-a36a-4fbb-8523-e078b3dfe795</uuid>
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
# Javascript ## 判断对象是否为空 ```js Object.keys(myObject).length === 0 ``` ## 经常使用的三元运算 > 我们经常遇到处理表格列状态字段如 `status` 的时候可以用到 ``` vue