亚厦前端-ys-vue 学习笔记

目录

1、各属性作用
2、Vue实例及结构
3、Vue组件引用
4、tab页处理
5、表单
6、Grid
7、下拉选择框
8、时间选择器
9、多选框
10、按钮
11、提示框
 
 

一、各个属性作用

:代表 v-bind:的缩写，v-bind表示绑定属性（任何属性），是单项数据流（vue=>页面）
v-model 也是绑定数据（必须是有value属性的），是双向数据流（vue<=>页面）
@click="“代表 v-on:click=”"的缩写，v-on表示绑定事件
v-text:innerText

v-html:innerHTML

v-if:是否插入元素

v-show：是否隐藏元素

v-for ：表达式循环，组件：v-for=“item in array” 数据源： return [“apple”,“banana”,“orange”]
展示： {{ item}} 就会重复三遍，高级用法： :class=“item.score”，其他属性也可以用item内的值
除了item，还有index、key、val等属性

option详解

option ： 根属性之一，绑定data中返回的option，可选择的有（data函数成员，methods对象成员
，模板template，挂载元素el，生命周期钩子，props属性声明，computed计算成员， watch监视成员）

option详解-选项：watch监视

watch监视是一个对象，键是需要观察的表达式，值可以是

1.回调函数，

2.值也可以是方法名，

3.或者包含选项的对象。

ps:表达式暂时可以理解为一个可以得到值的式子

Ⅰ回调函数，来监视一个值的变化（监视data函数体的变量）
如：

  data () {
    return {
      replaceList: []
    }
  },
  watch: {
    replaceList: function (val, oldVal) {
      console.log('replaceList changed')
    }
  }

Ⅱ第2种形式：”值也可以是方法名“，可以把watch的函数移到methods内。

则上面的形式可以改为：

  data () {
    return {
      replaceList: []
    }
  },
  watch: {
    replaceList: 'changed'
  }，
  methods: {
    changed: function (val, oldVal) {
      console.log('replaceList changed')
    }
  }

Ⅲ包含选项的对象

如：上面两种就等同于

  data () {
    rerurn {
      replaceList: 1
    }
  },
  mounted: function () {
    this.$watch('replaceList',function(val, oldVal){
        console.log('replaceList changed')
    })
  },
  methods: {
  
  }

option详解-选项：computed计算成员

虽然在Mustache语法内可以使用表达式，即{{}}。比如为数字前加入￥符号，可以使用表达式：

{{‘￥’+money}}

在vue-cli脚手架的.vue组件中
实现RMB前加上美元符号
 
<template>
  <input v-model="money"> // 响应式的
  <span>{{RMB}}</span> // {{}}中可以是变量，也可以是方法名
</template>
 
<script>
  data () {
    rerurn {}
  },
  computed: {
    RMB: function () {
      return '￥'+ this.money
    }
  }
</script>

ref和refs属性

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象（持有已注册的所有子组件的信息）进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册。
例如：

this.$refs.refName ==  document.getElementById("refId")//这两个是一回事，但是前者会减少获取dom节点的消耗

这样可以直接操作注册的组件（或者叫DOM元素），但是需要注意的是，由于$refs不是响应式，渲染后才存在，所以不要用于绑定数据，且不要用于模板和属性计算中。

二、vue实例

对于一个vue对象来说:

var vm = new Vue({
        el: '#vue',//挂载的页面元素ID
        template: "<div><h1>{{site}}</h1></div>",//页面入口
        data: {
            site: "学习VUE",
            url: "www.test.com",
            alexa: "10000"
        },//传统返回数据，但实例会生成多个
        data: function(){
        	return {
        		site: "学习VUE",
            	url: "www.test.com",
            	alexa: "10000"
        	}
        },//常用返回数据，实例不会产生多个
        components:{//声明要包含的组件
        	app : App, //key是组件名，value是组件对象
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    });

创建vue实例后,输出该实例，此时可在其他组件使用该实例（也可以直接输出一整套实例对象）

export default vm

然后其他模块引用

import other-component from "./other-component";

三、Vue组件

可直接使用

Vue.component('my-component',{template:"<div><h1>666</h1><div>"});

运用：

<my-component ref="com"></my-component>//明显的引用子组件

一个模块中引用另一个模块

import other-component from "./other-component";

components: {other-component},

四、tab页的使用

 <ys-el-tabs  v-model="activePage"  @tab-remove="removeTab">
      <el-tab-pane label="数据维护" name="mainWin"  >
      </el-tab-pane>
  	  <el-tab-pane v-for="(tab,index) in editeTabs" :key="tab.tabName"
                   :label="$store.state.currencyContractStore.currentTabTitle"
                   :name="tab.tabName" :closable="true">
       <other-component></other-component>//另一个模块名，子组件
      </el-tab-pane>
</ys-el-tabs>

五、表单

动态表单：

<ys-form-v2  :option="formOption" ref="mainForm" @init-end="test" >
<el-row>//一行
<el-form-item label="乙方"></el-form-item>
<ys-title title="工程项目信息"></ys-title>
</el-row>
</ys-form-v2>

静态表单：

<ys-el-form :data-model="$store.state[storeId].contractCommonFormData"
                ref="form"
                :validation="formValidation"
    >

普通表单：(区别？？)

<el-form></el-form>

六、表格Grid:

<ys-grid :option="mainGridOption" ref="mainGrid"  @init-end="mainGridOptionInitEnd"></ys-grid>

动态Grid数据源：（需配置grid构建器）

	data: function(){
		return {
			mainGridOption: {
          		dataWindowId: "dataWindowId",
          		buttonsFunc: {
            		editSupplier: (vm, gridVm, item) => {
            	},
            	showSupplier: (vm, gridVm, item) => {
            	}
          	}
        },
     }

静态Gird数据源：

	data: function(){
		return {
			mainGridOption: {
          		
          	}
        },
     }

grid的操作

1、获取grid的全部数据和选中数据

let gridAllData = this.$refs.gridOptionName.getData();
let gridSelectData = this.$refs.gridOptionName.getSelectedItems();

2、给grid加一行数据

this.$refs.gridOptionName.addItem(item);

3、删除grid中的某一行数据和选中的数据。

this.$refs.gridOptionName.deleteItem(item);//删除指定数据行

const selectedItems = this.$refs.gridOptionName.getSelectedItems();
selectedItems.forEach( item  => {
       this.$refs.gridOptionName.deleteItem(item);
});//删除所有选中行

4、查询grid数据

let queryParam = {"field1":"test","field2":"test2"};
that.$refs.gridOptionName.defaultRetrieve(queryParam);

七、下拉选择器（可以套在el-form-item中）

<ys-data-selector :option="projectSelectorOption"
                            prop="projectNo"
                            :readonly="isComboxReadOnly"
                            ref="projectSelectorOption"
                            policy_id="projectSelector"
                            @select="comboBoxSelector"
                            v-model="projectNo"
                            init-id="projectSelectorControl"
          ></ys-data-selector>

八、时间选择器（可以套在el-form-item中）

<ys-date-picker v-model="queryFormData.end_time"
                              policy_id="endTime"
                              prop="endTime"
                              width="130"
              ></ys-date-picker>

九、多选框

<ys-muti-combo-box :option="statusOption"
                                 v-model="queryFormData.status"
                                 policy_id="status"
                                 prop="status"
                                 width="220"
              ></ys-muti-combo-box>

十、按钮

<ys-button text="重置" btn-type="primary" @btn-click="resetForm" width="90"></ys-button>

十一、提示框

that.$message.success("删除成功！");
that.$message.warnning("删除成功！");
that.$message.error("删除成功！");