Vue前端框架常用指令

文章目錄

常用指令

常用指令

插值表達式：

語法:{{要插入的值}}
此時相當於佔位符，到時候{{關鍵字}}會被替換成Model中的數據

注意點:

當網速較慢時，Vue初始化未完成時，插值表達式不能被解析，會直接顯示
出來，加載完畢之後又會被替換成真實結果，造成閃爍效果（Vue的加載代碼寫在HTML元素之後時會出現該bug）

v-cloak:時鐘指令

針對上面出現的問題,引出了v-clock指令
此指令是把它當作HTML元素的一個屬性使用
示例：<p v-cloak>{{msg1}}</p>
特點：
當Vue加載完畢後，v-cloak屬性會自動消失。
運行機理：
等同於添加了如下CSS樣式：讓所有帶v-cloak屬性的元素隱藏，Vue加載完成後顯示實現，以解決使用插值表達式閃爍的問題:

 [v-cloak]{
      		display: none;
		  }

v-text:文本信息綁定指令

語法：<p v-text="msg1"></p>
作用：和插值表達式一樣，用於給HTML元素添加文本
區別：

v-text不會存在閃爍問題
v-text會將Model中的數據完全替換到HTML元素中（覆蓋）
插值表達式只會將Model中的數據替換到插值表達式中（佔位符內容的替換）

相同點：
4. 插值表達式和v-text都可以給HTML元素顯示文本
5. 插值表達式和v-text都不會解析要添加文本中的HTML標籤（原樣顯示）

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
	<!--插值表達式 -->
    <p v-cloak>{{msg}}</p>
    <!--v-text指令-->
    <p v-text="msg1"></p>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
	    el:"#app",
	    data:{
	        msg:"hello,vue",
	        msg1:"hello"
	         }
    })
</script>
</body>
</html>

思考一個問題:要是我們在data中寫一段html代碼,那麼替換到上面的div中,會被解析嗎?

不會,因爲不管是插值表達式還是v-text指令都是將字符串進行了替換,不會解析html代碼…那有沒有什麼方法可以做到呢? v-html指令就出現了

v-html:Html信息綁定指令

和v-text的唯一區別：給HTML添加內容時會解析內容中的HTML代碼
示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

結果:(可以看到這裏確實將msg2中寫入的代碼進行了解析並展示了出來)

接下來我們再來看一種綁定字符串的方式…

v-bind:元素屬性值綁定指令

語法：在HTML元素的屬性目前加上綁定標識，此時HTML的該屬性的值就會根據屬性值的名字從Model中獲取數據
示例：<p>用戶名：<input type="text" name="username" v-bind:value="msg" /></p>
注意：

【v-bind:】用於綁定HTML元素屬性的值
使用v-bind指令是需要加載一個命名空間的:xmlns:v-bind="http://www.w3.org/1999/xhtml",使用:就可以不用導入了…
【v-bind:】可以簡寫爲 :
Vue框架會把使用了v-bind:標識的HTML的屬性的值當作一個Javascript表達式來使用
只要表達式合法，就能執行（當然，數據必須是自變量或來自於Model中）
如：
:value=“msg+‘你好’”
:value=“msg+msg”
示例:

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
    <!--方法的綁定-->
    用戶名:<input type="text" name="username" v-bind:value="msg" />
    用戶名:<input type="text" name="username" :value="msg" />
    用戶名:<input type="text" name="username" v-bind:value="msg+'你好'" />
    用戶名:<input type="text" name="username" :value="msg+msg1" />
</div>

<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             }
    })
</script>
</body>
</html>

結果:

接下里我們看看如何綁定方法…

v-on:方法綁定指令

解釋：在HTML的事件屬性（屬性名不帶on）前加上綁定標識，此時HTML觸發此事件時，會執行事件中綁定的代碼
示例：
<button v-on:click="vueTest()">點擊有驚喜</button>
<button @click="vueTest()">點擊有驚喜</button>

注意：

常見的web網頁的事件都支持綁定
事件名字不能帶on
v-on指令需要導入命名空間:xmlns:v-on="http://www.w3.org/1999/xhtml",使用@就不用導入命名空間了…
事件觸發的方法必須在methods中有定義
v-on標識的屬性會被Vue解析爲特定JavaScript，只要內容符合JavaScript規範都能正確執行（例如:傳入參數）
v-on:等價於 @

示例:

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
<div id="app">
    <p v-cloak>{{msg}}</p>
    <p v-text="msg1"></p>
    <p v-html="msg2"></p>
    <!--方法的綁定-->
    用戶名:<input type="text" name="username" v-bind:value="msg" />
    用戶名:<input type="text" name="username" :value="msg" />
    用戶名：<input type="text" name="username" v-bind:value="msg+'你好'" />
    用戶名:<input type="text" name="username" :value="msg+msg1" />
    <br/>
    <hr/>
    <button v-on:click="vueTest1()">點擊有驚喜1</button>
    <button @click="vueTest2()">點擊有驚喜2</button>
</div>
<script src="../lib/vue.js" type="application/javascript"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello,vue",
            msg1:"hello",
            msg2:"<h1>這是用來測試v-html指令的...</h1>"
             },
        methods:{
            vueTest1:function () {
                alert("你好！");
            },
            vueTest2:function () {
                alert("你好！");
            }
        }
    })
</script>
</body>
</html>

v-mode:雙向綁定指令

唯一的一個實現雙向數據綁定的指令
語法：<input type="text" v-model="num1" />

適用元素：表單元素，其它元素不能使用v-model指令
input系列（可以輸入內容的）、select、textarea

雙向綁定：
model層數據的改變會影響view層HTML結果
HTML中表單元素值的改變會寫入對應的model層的數據中

示例:通過雙向綁定v-model指令實現一個簡易的計算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的雙向數據綁定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div class="box">
        <h1>Vue中的雙向數據綁定指令v-mode</h1>
        <label>單價：<input type="text" v-model="price"></label><br/>
        <label>數量：<input type="text" v-model="num"></label><br/>
        <button @click="calc()">點擊計算總價</button><br/>
        <label>總價：<span style="color:deeppink" v-text="sum"></span></label>
        <hr/>
        <h1>使用v-mode雙向數據綁定實現建議計算器</h1>
        <label>操作數1：<input type="text" v-model="num1" /></label>
        <select v-model="opr">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <label>操作數1：<input type="text" v-model="num2" /></label>
        <button @click="doCalc()">=</button>
        <span style="font-size: 20px;color:deeppink" v-text="result"></span>
    </div>
    <script type="text/javascript">
        var vm2 = new Vue({
            el:".box",
            data:{
                price:12,
                num:1,
                sum:12,
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                calc(){
                    this.sum = this.price*this.num;
                },
                doCalc(){
                    this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
                }
            }
        });
    </script>
</body>
</html>

結果:

知識點:
JavaScript的eval()方法可以把一個字符串當作JavaScript代碼執行，並返回執行結果,如：
this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
注意：
當代碼很複雜或難以控制時可以使用此方法，上面代碼中會包含太多的判斷,因此使用了eval()方法,大多數還是使用標準方法執行JavaScript代碼

v-for:循環指令

使用v-for指令遍歷簡單數組
<p v-for="name in names">{{name}}</p>
<p v-for="name,index in names" v-text="name+'---'+index"></p>
使用v-for指令遍歷對象數組
<p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>
使用v-for指令遍歷對象屬性值
<p v-for="value,key in cqCity">{{key+'--'+value}}</p>
使用v-for指令遍歷數字（作用就是標準的for循環次數遍歷）
<p v-for="num,index in 12" v-text="num+'---'+index"></p>

總結:

格式爲v-for="xxx in xxx"
index是v-for中的默認屬性,值下標,從0開始…
遍歷方式類似於我們java中學過的增強for
對於遍歷對象,可以直接user.id這種形式,不需要使用get方法來獲取屬性值

注意

遍歷得到的值可以使用【插值表達式、v-text、v-html】顯示
不管遍歷何種數據類型，都可以得到值和索引
遍歷對象屬性和值時可以得到【值、屬性名字、索引】
值的賦值順序是：值、【鍵名】、索引
一次遍歷中，多個結果之間使用,分割即可對應賦值（value,key,index）
遍歷過程中接受值的變量名字可以任意
遍歷數字時數字是從1開始，不能是負數（因爲該功能是固定次數遍歷）
在組件中使用數據時，一定要用key唯一綁定數據（保證對UI組件的操作不會因爲其它組件的變化而發生變化）

注意：

key必須是基本數據類型（string/number）
報錯：Avoid using non-primitive value as key, use string/number value instead.
key的數據值一定不要重複
報錯：Duplicate keys detected: ‘3’. This may cause an update error.

技巧：一般使用對象中的值唯一屬性（主鍵）作爲key，比如id
語法：

<p v-for="user in users" :key="user.id">
<label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
</p>

看不懂key和value?看看下面的代碼

<script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                names:["張三","李四","王五","趙六","田七"],
                users:[
                    {id:1,name:"胡歌",age:32},
                    {id:2,name:"袁弘",age:33},
                    {id:3,name:"霍建華",age:35}
                ],
                allClass:{no:"年級",classteacher:"班主任",classnum:["重點班","實驗班","普通版","火箭班"]
                }
            }
        });
    </script>

解釋:

names爲數組,可以直接遍歷
users爲對象數組,也可以直接遍歷
allClass爲一個對象,但是內部包含了很多屬性,就要用到key和value來進行調用…

知識點

如果組件的屬性的值是一個變量，則必須使用v-bind:或者:進行屬性值的綁定
數組的push()方法用於向數組末尾加入元素，數組的unshift()方法用於向數組最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
在遍歷對象數組並結合組件（表單元素）一起使用時，一定要指定唯一的key屬性，進行組件和數據
的唯一關聯，避免被其它操作（指非本元素）影響

Vue前端框架常用指令

文章目錄

常用指令

插值表達式：

v-cloak:時鐘指令

v-text:文本信息綁定指令

v-html:Html信息綁定指令

v-bind:元素屬性值綁定指令

v-on:方法綁定指令

v-mode:雙向綁定指令

v-for:循環指令

如何使用 JS 判斷用戶是否處於活躍狀態

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

會話之Cookie和Session的使用

ServletContext、Request、Response應用

SQL注入及解決辦法

Java中各種配置文件表頭代碼(持續更新)

JSP基礎語法與EL表達式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結