title: Vue

#+startup: overview

数据绑定

计算属性在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

#+RESULTS:

npm

npm install 将会执行package.json 的设定，在IDAE里可以选中package.json 里的 build:prod字段，run

操作

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 不显示的元素

生命周期

beforeCreate 加载vue系统构造，但是可以接触到Dom元素 created 加载自定义的data,mothods, filter..... beforeMounte 创建特性在内存 mounted 加载特性，渲染页面 beforeupdate 更改特性 updated 渲染更改的特性 beforedestroy 准备清除特性 destroy

component

1, 用extends编写template 2, 在component中编写template 3, 在vue 外部，script模块中编写template 4, 在vue的组件中使用变量和方法，必须在组件中用函数定义，

Mustache

{{item }} item von el can be here

v-bind

v-bind: kann verbunden werden mit id, href, key, für characters von DOM elements

multi class 动态绑定v-band

三目运算指定class
集合，可删除class，不可增加,不会被拦截
数组，可加可减

multi style 动态绑定v-band

三目运算指定style
集合，可删除style，不可增加，不会被拦截
数组，可加可减

v-show

if v-show is false, the DOM element is already included, but will not be presented.

v-if

if v-if is false, the DOM element will be deleted

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)
  })

reactive multiple value

const platedata :PlatedataType[]  = reactive([])
platedata.push({id:1, name:"6 Well", highlight: false, editable: true, show: false})

my collection