Vue
Table of Contents
1. 数据绑定
- 计算属性 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果
- 监视属性: 通过通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算
计算属性高级: 通过getter/setter实现对属性数据的显示和监视 计算属性存在缓存, 多次读取只执行一次getter计算
const app = Vue.createApp({ data() { return { count: 4 } } }) const vm = app.mount('#app') console.log(vm.$data.count) // => 4 console.log(vm.count) // => 4 // 修改 vm.count 的值也会更新 $data.count vm.count = 5 console.log(vm.$data.count) // => 5 // 反之亦然 vm.$data.count = 6 console.log(vm.count) // => 6
2. npm
npm install 将会执行package.json 的设定， 在IDAE里可以选中package.json 里的 build:prod字段，run
3. 操作
vd 是vue里的data属性
vm 是vue里的mothods方法
ht 是html里的标签
| {{vd}} | 占位 | |
| v-text="vd" | 替换 | |
| v-html="vd" | 替换并渲染 | |
| v-bind:ht="vd" | :ht="vd" 设置属性 | 可用3元表达式或者数据的元素对象指定 |
| v-on:ht="vm" | @ht="vm" | on methode(可自定义) |
| v-mode="vd" | 只在表单中暴露vd,并操作 | |
| v-for="(item,index) in "vd"" | vd时vue中可迭代元素或在对象 | |
| v-for="i in 10" | 1,,,,,9 | |
| push | 后加 | |
| unshift | 前加 | |
| v-if | 删除不显示的元素 | |
| v-show | display 不显示的元素 | |
4. 生命周期
| beforeCreate | 加载vue系统构造，但是可以接触到Dom元素 |
| created | 加载自定义的data,mothods, filter….. |
| beforeMounte | 创建特性在内存 |
| mounted | 加载特性，渲染页面 |
| beforeupdate | 更改特性 |
| updated | 渲染更改的特性 |
| beforedestroy | 准备清除特性 |
| destroy | |
5. component
1, 用extends编写template 2, 在component中编写template 3, 在vue 外部，script模块中编写template 4, 在vue的组件中使用变量和方法，必须在组件中用函数定义，
6. Mustache
{{item }} item von el can be here
7. v-bind
v-bind: kann verbunden werden mit id, href, key, für characters von DOM elements
7.1. multi class 动态绑定v-band
- 三目运算指定class
- 集合，可删除class，不可增加,不会被拦截
- 数组，可加可减
7.2. multi style 动态绑定v-band
- 三目运算指定style
- 集合，可删除style，不可增加， 不会被拦截
- 数组，可加可减
8. v-show
if v-show is false, the DOM element is already included, but will not be presented.
9. v-if
if v-if is false, the DOM element will be deleted
10. watch multiple value
watch(
() => [PlasData.Amount_Package_Plasmid_1, PlasData.Concentration_Package_Plasmid_1],
([Amount_Package_Plasmid_1, Concentration_Package_Plasmid_1]) => {
PlasData.Volume_Package_Plasmid_1 = +((1/Concentration_Package_Plasmid_1)*Amount_Package_Plasmid_1).toFixed(2)
})
11. reactive multiple value
const platedata :PlatedataType[] = reactive([]) platedata.push({id:1, name:"6 Well", highlight: false, editable: true, show: false})