vue頁面初始化

HTML:

    <div id="app">
        <input type="" class="app"  v-model="txt_name" />
        <div  @click="clk" class="btn">點我</div>
        <div class="text">{{ txt_name }}</div>
    </div>

JS：

 

<script>
    (function(){
        //text一般為從后台獲取的數據，需要在頁面初始化的時候直接將text渲染到input中，給用戶展示。
        let text = "初始化賦值123"
        //實例化vue
        new Vue({
            el:"#app",
            //data用於存放數據或者變量
            data:{
                txt_name:""
            },
            //用於數據初始化
            created:function(){
                this.txt_name = text;
            },
            //用於存放所有的事件方法集合
            methods: {
                clk(){
                    txt_name = this.txt_name;
                    alert(txt_name);
                }
            },
            //用於檢測新值和舊址的變化,返回值是function
           watch: {
               //監聽txt_name的變化,新值是n,舊值是m
               txt_name(n,m){
                   if(n!= m){
                       console.log(n,m)
                   }
               }
           }
        })  
    })()
</script>

 

 效果：

我們將text的值初始化到input中，如下圖:

 

數據雙向綁定：

 

最后就是點擊按鈕啦，點擊之后獲取用戶編輯之后的input內容啦。

 watch當然就是檢測新值和舊值的變化啦。

 

總結：

　　解決了：

　　1.頁面數據初始化問題

　　2.數據雙向綁定

　　3.獲取用戶最新輸入的內容

　　4.監控值的變化

 

文章的由來及感受：

　　First day learning vue(被逼的)，真的顛覆了我的三觀...視頻聽着感覺好像都會了。但當真的實戰自己寫代碼的時候，好像什么都不會了，別人寫出來，發現都是你視頻中覺得自己會的代碼，好崩潰，怎么辦呢？總不能每次都問別人吧！

 　   so，

　  就在聽視頻的某一剎那間，I think of 視頻中老師講的內容，應該和實際的項目結合呀，就是學了這個知識點，實際在項目中會應用到什么地方，這樣學起來也不感覺到盲目了，所以就有了這篇文章。

　　以后我會繼續學習，繼續總結的。

 

---