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. 调用函数或者定义的变量时需要用 this.函数名 或 this.变量名
例: this.get_data(); 或 this.c1
4.axios.post( 接口地址 , 要传输的数据) 成功 .then(response => {} 失败 .catch(function(response) {})
例: axios.post('接口地址', qs.stringify(data))
.then(response => {
//成功回来后做的事情
})
.catch(function(response) {
//失败回来后做的事情
});
5. 子级模块操作函数传给父级模块,使父级模块来操作
例: 父级 <revise @on-hide="onHide"></revise>
子级 <button class="btn" v-on:click="$emit('on-hide')">确定</button>
6.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就是索引 从零开始
7.watch里面想监听一个对象的属性是 this不能用
解决办法:在data里面return上面给this重新赋值 如 : xthis=this , 然后再在watch里面操作
8.组件父级想要点击或者传对象：
例：
父级：<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>
9.父级调用子组件写内容传送：
<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标签都会引入进来
10.父组件调用子组件函数：
父组件：<found ref='editUser'></found >
<div @click="add()">+</div>
methods: {
add(){
this.$refs.editUser.query()
},
}
子组件：
methods: {
query (){
console.info(‘111’)
},
}
11.阻止事件冒泡：event.cancelBubble = true; 或者： @click.stope=”aa()”
12.input输入完按enter触发按钮：
<input @keyup.enter=”aaa()”></input>
<button @click=”aaa()”>查询</button>
13.v-model
a.多个复选框将选中的值放到一个数组里
<input type="checkbox" v-model={check} value="A" id="a"/>
<label for="a">这是A</label>
<input type="checkbox" v-model={check} value="B" id="b"/>
<label for="b">这是B</label>
定义check的时候应该为数组 check:[] 这样如果选中的话check里面就会显示出来['A','B']
b.修饰符
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
c.多个输入框内容数值相加 .number
<input type='number' v-model.number='num1' value='1' />
<input type='number' v-model.number='num2' value='2' />
{{num1+num2}} 结果就是3 两个输入框数量相加
d.去掉输入框空格 .trim
<input type='text' v-model.trim='text1' value=' aa ' />
{{text1}} 结果为aa 前后都没有空格
14.v-if和v-show的区别
v-if如果条件不满足则该标签不存在
v-show如果条件不满足则该标签存在只是display:'none'
15.v-bind简写为:
v-on简写为@
16.vue生命周期
beforeCreate: function () {
console.info('创建之前调用');
},
created: function () {
console.info('创建之后调用');
},
beforeMount: function () {
console.info('挂载之前调用');
},
mounted: function () {
console.info('挂载结束调用');
},
beforeUpdate: function () {
console.info('更新之前调用');
},
updated: function () {
console.info('更新之后调用');
},
beforeDestroy: function () {
console.info('销毁之前调用');
},
destroyed: function () {
console.info('销毁之后调用');
},
17.set作用及用法
当修改数组中的一个值 视图并不会直接更新 这时用set来赋值就可以实现实时刷新
全局写法：Vue.set(this.arr,0,{name:'222'}) //内容分别代表：要修改的数组，索引，修改后的值
内部写法：this.$set(this.arr,0,{name:'222'})
对象写法：this.$set(this.obj,'list','111') //内容分别代表：要修改的对象，字段名，修改后的值
18.Vue构造器内部的属性
methods:事件处理器 如：点击事件等方法
computed:计算属性 里面写的方法可以认为在data里面定义的变量 可以直接在页面{{方法}}得到此方法的返回值
watch:侦听器 监听数据改变 方法:function(改变后的数据,改变前的数据){} '方法.a'：function(){} 监听方法数据里面的a变量 是否变化 deep:true 深度监听，可以检测到数据内部是否发生变化 注：函数拿到的值只是改变后的数据 要想拿到改变前的数据 用上面的'方法.a'
filters 过滤器 '方法':function(val){} 在页面{{text | 方法}} 就可以对text变量进行方法里面的处理 也可以在绑定class上做处理 例：<div :class="text | 方法"></div> 将text用方法处理后输出出来 生成最后的class名 注：只能在{{}}或者v-bind中使用
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
以后如果还遇见问题了 还会继续更新。。。
