前言：專案使用vue，記錄搭建專案到上線心得，會一直跟新………

頁面渲染

vue是不會去操作dom節點，是有資料去操控節點，在js檔案資料都在data裡

*js程式碼片*
export default {
    data() {
      return {
        formInline: {
          user: 'admin',
          region: 'shanghai'
        }
      }
   }
}

*vue程式碼片*

*下面的標籤是使用element ui搭建頁面，和vue沒毛關係，當成一般標籤*

<template
 
>
    <el-row>
         <el-col :span="6">
            <div class="grid-content bg-purple">
                <el-form-item label="名稱">
                <el-input v-model="formInline.name"></el-input>
              </el-form-item>
            </div>
          </el-col
 
>
    </el-row>
</template>
<script>
 import listJS from './list.js';   //引入上面的js檔案
    export default listJS;         //在把它輸出，便可以渲染頁面
</script>

vue資料渲染不只有這種方法，這是適合專案使用

渲染資料的方式個人經驗

v-modle="formInline.name"  文字框渲染值
v-html="formInline.name"   一般標籤渲染<h2><span><div
 
>等
{{="formInline.name"}}    一般標籤渲染<h2><span><div>等
v-for                     渲染列表
v-bind:value              繫結value屬性
v-on:click 或者@click       click事件(兩種寫法)
v-modle:trim              v-modle修飾符，去掉空格

//例如渲染list
 list:[
        {name:"zhang",age:"20",completed:true},
        {name:"lisi",age:"21",completed:true},
        {name:"longwu",age:"23",completed:true},
        {name:"wangqi",age:"24",completed:true},
        {name:"shang",age:"25",completed:true}
    ]

<li v-for="(item,index) in list" >
    <input type="text" v-bind:value="item.name"  v-bind:disabled="item.completed"/>
    <input type="text" v-bind:value="item.age"   v-bind:disabled="item.completed"/>
    <button v-on:click="editItem(index)">編輯</button>
</li>

item就是每一列資料，index索引值，在專案中編輯，刪除使用。

資料渲染差不多就這樣，在看看鉤子函式

*js檔案*
export default{
   //資料
  data(){
     return {
        dialogFormVisible: false,
        form: {
            id:"1",
           name: 'admin',
          region: 'beijing'
        },
    }
  },
  //事件方法
  methods :{
    editItem(index){
            this.list[index].completed=false;
    }
 },
 //掛載到例項之後載入，個人理解初始化渲染頁面這裡可以呼叫方法
 mounted() {
      this.editItem();   //這樣掛載後這個方法會被直接呼叫。
    },
}