Vue整理01---模板語法

sean 發布于2019-08-23 18:01 / 2747人閱讀

摘要：部分起始值步長增加減少輸出結果部分這個例子用到了框的雙向綁定。的打印結果大于結果小于動態改變背景圖片

1.基礎知識

1.new Vue 創建一個實例，傳入一個對象。
2.對象包括：

el：作用域
data：所用到的數據
methods：所用到的函數

3.{{}} 數據綁定其中不止可以綁定data，也可以綁定函數(如果這個函數有返回值并且返回值是字符串之類的可以輸出的東西)
4.{{}}大括號只能綁定內容，不能在html屬性里使用，如：< a href={{}}} >,這是不行的
5.上面那個可以使用 v-bind:href="link" --> 屬性值的綁定,告訴html : 后面的數據是綁定的。
6.使用v-html綁定html標簽而不是直接輸出字符串，不過這樣會造成跨站腳本攻擊，不安全。

幾個簡單的例子： 1. 2個輸入框，1個接收初始值，一個接收步長，兩個按鈕，一個增加一個減少，一行輸出文字。

html部分：


            起始值
            步長
            
            
            

            
            輸出結果：{{result}}

js部分

這個例子用到了：
1.v-model input框的雙向綁定。
2.v-on:click 監聽click事件，其他事件道理類似。

2.在上一個例子的基礎上，如果resultPrint是一個函數，返回目前值是大于5還是小于5，還有一個增加另一個變量的按鈕2。


            起始值
            步長
            
            
            
            

            
            輸出結果：{{resultPrint()}} 
            

            sum2 is {{sum2}}

解析：如果resultPrint是一個函數的話，不管我點擊按鈕1還是按鈕2，由于并不知道按鈕2是否會影響到resultPrint的輸出值，因此無論頁面做什么操作，resultPrint都會渲染重新執行,如果resultPrint是一個計蒜屬性的話，既可以解決普通屬性無法加邏輯的局限，又可以避免寫成一個函數的話不必要的執行。

computed:{
                resultPrint:function(){
                    console.log("resultPrint的打印")
                    return this.result>10? "結果大于10":"結果小于10"
                }
            },

3.v-bind動態改變背景圖片

GPU云服務器云服務器 php01 Beta01 java01++ database01

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104544.html

前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

BicycleWarrior 2019-08-30 14:08 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

DTeam 2019-08-22 15:20 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

Clect 2019-08-01 18:41 評論0 收藏0