vue 總結2

一、使用html模板的方式

 

html

     <div v-html="htmldome"></div>

     <div v-html="htmlfun"></div>

scrtip

 

     export default{

          data(){

              return {

                   htmldome:"<span>我是字符串</span>" 

               } 

          },

          methods:{

              htmlfun:function(){

                   return "<div>我是函數返回的</div>" 

               } 

          }

     }

 

生成的html頁面

     <div>

          <span>我是字符串</span>

     </div>

     <div>

          <div>我是函數返回的</div>

     </div>

     

 

二、v-model自定義組件

 

默認的v-model雙向綁定

     <input v-model="something">

能夠寫成

     <input v-bind:value="something" v-on:input="something = $event.target.value">

其中v-bind:value和v-on:input是固定寫法，接受一個value屬性，在有新的值的時候觸發input事件

 

組件裏代碼例子

html

    <textarea ref="textarea" v-bind:value="value" v-on:input="updataValue($event.target.value)"></textarea>

script

     export default {

          methods:{

              updataValue:function(value){

                    this.$emit('input',value)'

               } 

          }     

     } 

 

三、列表頁內容溢出，產生滾動效果，監聽屏幕高度

 

假設要打開一個頁面，編寫這個頁面的組件以下

html  

     <template>

          <div>

               <div class="header" ref="diyheader></div>

               <div class="diybody" :style="{'height':currentHeight + 'px'}">

                    <div>

                   <!--主體內容-->

                    </div>

               </div>

          </div>

     </template>

script

     export default {

         name:"diypage",

         data(){

              return{

                   currentHeight:this.height, 

               } 

          },

          watch:{

              height(val){

                   if(val){

                        this.currentHeight=val; 

                    } 

               }

          },

          mounted(){

              this.currentHeight=document.documentElement.clientHeight - this.$refs.diyheader.offsetHeight; 

          }

     }

 

四、在vue中使用canvas，引入html2canvas

 

引入html2canvas

     npm install html2canvas //加--save 安裝失敗

script

     import html2canvas from 'html2canvas'

 

     makeImage(){

          html2canvas(document.getElementById("view"),{

              onredered:function(canvas){

                    console.log(canvas.toDataURL("image/png"))    //使用html2canvas轉成base64數據流

               } 

          })

     }

 

五、使用路由進行數據傳遞

      1）使用路由傳遞的內容只能是字符串，不是的要轉成字符串才能夠

     2）傳遞的參數要在路由配置頁面寫明，只有該參數才能獲取數據

     3）配置頁面要有設置name屬性

 

路由配置頁面

     {

          path:'/detail:listdata'

          name:'detail',

          component:Detail 

     }

上一級頁面

html

     <div :to="{ path:'detail',name:'detail',params:{listdata:JSON.stringify(data)}}">點擊我進入一個頁面，並帶參數</div> //傳遞數據

下一級頁面

script    

     export default{

         data(){

              return{

                   cutdata:JSON.parser(this.$route.params.listdata) //獲取數據 

               } 

          } 

     }

     

 

 六、實現跨路由刷新操做

     利用localStorage緩存機制和路由跳轉執行mounted的方式來實現

     localStorage中存的都是字符串，全部數字‘0’，會變成字符串，不要用這個來做爲初始值

 

上一級頁面A頁面

     export default {

         mounted(){

              this.watchStorage() 

          },

          methods:{

              watchStorage(){

                   var num=localStorage.getItem("num"); 

                    if(!num){     //判斷num是否存在，不存在，賦初始值1；存在則判斷是否爲2，成立怎刷新頁面

                        localStorage.setItem("num",1); 

                    }else if(num==2){

                        console.log("執行刷新函數") 

                    }

               } 

          }

     }

下一級頁面B頁面

html    

     <div @click="uppagedata">我要刷新A頁面的數據</div>

script

     export default {

         methods:{

               uppagedata:function(){

                   localStorage.setItem("num",2);

               } 

          } 

     }