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"></revise>

子级  <button class="btn" v-on:click="$emit('on-hide')">确定</button>

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}}</button>

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

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

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

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

例:

父级:<button1 :btn="{key:1,value:'录入',click:'new_dd_btn'}"></button1>

子级: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}}</button>

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

<pan-thumb style="float: left" :image="avatar"> 你的权限:

<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>

</pan-thumb>

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

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

父组件:<found  ref='editUser'></found >

<div  @click="add()">+</div>

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()”></input>

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

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之后

<div>

<el-popover

ref="popover"

placement="bottom"

width="144"

trigger="click">

<div style="text-align: center;cursor:pointer;">

<span @click="set_btn()"><el-row>aaa</el-row></span>

<div class="kong_solid"></div>

<el-row>bbb</el-row>

<div class="kong_solid"></div>

<el-row>ccc</el-row>

</div>

</el-popover>

<img v-popover:popover  style="width:30px;" src="../assets/setting.png">

</div>

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

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

Vue 做项目经验的更多相关文章

  1. 使用vue做项目如何提高代码效率

    最近做了两个vue项目,算上之前做的两个项目,总共有四个vue项目的经验了,但是总体来说写的代码质量不是很高,体现在以下几点 1.代码没有高效的复用 自从使用vue做项目之后,以前使用面向过程变成的习 ...

  2. 使用vue做项目

    使用vue做项目需要用到node.js的npm来管理包 所以我们需要先下载node.js然后通过node的npm来管理包  安装完 nodejs后 我们需要执行 npm install vue-cli ...

  3. Vue项目经验

    Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...

  4. 入职一个月快速熟悉大型Vue项目经验感想

    来到和睦的公司家庭已经一个月出头了,从技术层面来说,公司项目PC端是我目前来说接触的最大最复杂的项目了,德老师也说这个不断开发更新迭代的项目的代码量相对于全国的web来说是蛮多的,对于快速熟悉这样的大 ...

  5. 利用spring boot+vue做的一个博客项目

    技术栈: 后端 Springboot druid Spring security 数据库 MySQL 前端 vue elementUI 项目演示: GitHub地址: 后端:https://githu ...

  6. 关于vue项目管理项目的架构管理平台

    关于vue项目管理项目的架构管理平台 https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/faq 31.4k 次浏览 完整项目地址: ...

  7. 【建议收藏】缺少 Vue3 和 Spring Boot 的实战项目经验?我这儿有啊!

    缺少 Vue3 和 Spring Boot 的实战项目经验?缺少学习项目和练手项目?我这儿有啊! 从 2019 年到 2021 年,空闲时间里陆陆续续做了一些开源项目,推荐给大家啊!记得点赞和收藏噢! ...

  8. Java项目经验——程序员成长的关键(转载)

    Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动.以 ...

  9. Java项目经验

    Java项目经验 转自CSDN. Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的 ...

随机推荐

  1. VUEX 总结

    What is Vuex? vuex是一个专为Vue.js应用程序开发的状态管理模式.他采用集中式储存管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变换 VUEX并不限制你的代 ...

  2. JavaScript(DOM编程三)

    节点的移动,insertBefore <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id= ...

  3. mac 隐藏文件显示

    显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults write com.apple.finder Ap ...

  4. 【LeetCode-面试算法经典-Java实现】【056-Merge Intervals(区间合并)】

    [056-Merge Intervals(区间合并)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a collection of intervals, ...

  5. CountDownLatch使用方法

    CountDownLatch是一个同步辅助类,在完毕一组正在其它线程中运行的操作之前.它同意一个或多个线程一直等待. 如果我们周末要去旅游.出游前须要提前订好机票.巴士和酒店,都订好后就能够出发了.这 ...

  6. Unity3D中C#和JS的方法互相調用

    因为Unity3D中一些腳本的方法仅仅能用在JS中.在C#中是無效的,而C#能够與服務器端通訊,JS本身卻不行.所以勢必會遇到這兩種語言腳本中方法的互相調用,下面是演示样例. 兩個文件 test1.j ...

  7. Spring-SpringJdbcTemlate配置介绍

    使用spring的jdbcTemplate进一步操作JDBC 一.普通配置  SpringJdbcTemplate连接数据库并操作数据 1.applicationContext.xml 1.1 建立D ...

  8. android:padding 与 android:margin的差别

    android:padding    Padding 为内边框,指该控件内部内容,如文本/图片距离该控件的边距 android:margin   Margin 为外边框,指该控件距离边父控件的边距

  9. openssl之BIO系列之24---SSL类型的BIO

    SSL类型的BIO ---依据openssl doc\crypto\bio_f_ssl.pod翻译和自己的理解写成 (作者:DragonKing, Mail: wzhah@263.net ,公布于:h ...

  10. bzoj3998: [TJOI2015]弦论(SAM+dfs)

    3998: [TJOI2015]弦论 题目:传送门 题解: SAM的入门题目(很好的复习了SAM并加强Right集合的使用) 其实对于第K小的字符串直接从root开始一通DFS就好,因为son边是直接 ...