Vue Manual

官方文档参考

语法

路由地址中獲取參數

參數不確定是字符串還是字符，需要手工指定。

@click="openTaskGroup(route.params.id as string)

激活hook

直接的組件有效

onActivated(() => { 
  elHelper.alertBox("onActivated")
  initView()
})

### 定時器

```css
 setTimeout(() => {
          dialog_gc_visible.value = false
        }, 1000)

延長vue 銷毀的時間

var myVar = setInterval(myTimer, 10000);

function myTimer() {
    var d = new Date();
    d.toLocaleTimeString();
}

onBeforeUnmount(() => { 
  clearInterval(myVar)
})

組件每次重新加載

dialogVisible = true時，重新加載組件
dialogVisible = false時，銷毀組件

 v-if=“dialogVisible”

<el-drawer v-if="dialog_gc_visible" v-model="dialog_gc_visible" 

direction="ltr" size=60% :with-header="false">

HTML{{直接調用函數，以及返回值的問題}}

VUE 中形參不可以直接返回嗎？？？？？

此方法可以正常返回

export const getDictionaryFromClient = (code: string, value: string) => {
  let dic = {} as DictionaryItem

  sys_dic_client.value.forEach((_dic: DictionaryItem) => {
    if (_dic.code == code && _dic.value == value) {
      dic = _dic
    }
  })
  return dic
}

下面的方法，沒有返回

export const getDictionaryFromClient = (code: string, value: string) => {
  sys_dic_client.value.forEach((_dic: DictionaryItem) => {
    if (_dic.code == code && _dic.value == value) {
      return _dic
    }else{
      return {} as DictionaryItem
    }
  })
}

css 使用变量

const color_black = ref(‘#000000’)

:style="{'color':color_black,'font-size':'20px'}

default=“scope” 和el-checkbox-group 在不同的位置使用，语法不同

<el-dialog v-model="taskVisible" title="To be sure task list" style="width: 1000px;">
    <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
        <el-table :data='dataHelper.getAllData("code","Group",10)'>
        <el-table-column prop="name" label="Name"/>
        <el-table-column prop="state" label="Send Invoice">
            <template #default="scope">
                <el-checkbox  :key=scope.row.code :label=scope.row.code>{{scope.row.name}}</el-checkbox>
            </template>
        </el-table-column>
        <el-table-column prop="city" label="Print Invoice"/>
        <el-table-column prop="address" label="Send Statement"/>
        <el-table-column prop="zip" label="Print Statement" />
        <el-table-column prop="zip" label="Print Courier"/>
        <el-table-column fixed="right" label="Operations">
        <template #default="scope">
            <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.$index)"
            >
            Remove
            </el-button>
        </template>
        </el-table-column>
    </el-table>
    </el-checkbox-group>
</el-dialog>

获取 table的行数据

使用表格时通过template的slot-scope=“scope”，使用scope.row拿到当前行的数据

<el-table-column label="Action" align="center">
      <template #default="scope">
      @click="reqDelete(scope.$index, scope.row.id)" />

或者

  <template v-slot="scope1">
    <el-link type="primary" @click="reqByGroup">{{scope1.row.name}}</el-link>
  </template>    

打印

const  printExample = () => {
 const content = 'print..............';
 const newWin = window.open(''); 
 newWin.document.body.innerHTML = content;
 newWin.document.close();
 newWin.focus();
 setTimeout(() => {
   newWin.print();
   newWin.close();
  }, 300);
}

渲染内容

如下三种渲染方式，结果一样。v-text 與 v-html渲染網頁的方式，前者好比 textContent ，後者好比 innerHTML。

vue获取HTML元素

vue2

<template>
  <div id="app">
    <div ref="hello">小猪课堂</div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.hello); // <div>小猪课堂</div>
  },
};
</script>

vue3

<template>
  <div ref="hello">小猪课堂</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const hello = ref<any>(null);
onMounted(() => {
  console.log(hello.value); // <div>小猪课堂</div>
});
</script>

绑定数据

标准的绑定方法如下：

const customColor = ref('#409eff')
<el-progress :percentage="percentage" :color="customColor" />

或者临时定义如下：

<el-progress :percentage=20  color="#409eff" />
不定义 const customColor = ref('#409eff')
<el-progress :percentage=20  :color="'#409eff'" />

接口定义

(()=>{
   
    interface IPerson{
        id:number,
        name:string,
        age:number,
        address:string
    }
    const person:IPerson={
        id:100,
        name:'Michael',
        age: 18,
        address: 'China'
    }

    console.log(person)
}
)()

准备环境

安装CLI

C:\>npm install -g @vue/cli
OR
yarn global add @vue/cli

自动编译ts to js

1. 生成tsconfig.json
   Terminal 输入 tsc – init
2. 配置tsconfig.json

"outDir": "./js",
"strict": false,  

在vs code中安装stylus

npm install stylus stylus-loader --save-dev

安装路由

npm install vue-router --save

查看vue的版本号

npm view vue version

创建模板项目

create vue

最新官方推荐创建项目的方式。

$ vue create hello-world
$ npm run serve

vue ui图形界面创建项目

vue ui

vue + vite

npm create vite@latest my-vue-app -- --template vue

  npm install / npm i
  npm run dev

打包和部署

在这里插入代码片

npm install serve -g

serve dist

vs code extendion

Vue VSCode Snippets

辅助编辑代码片段