IDC：2020 年第四季度中國平板電腦出貨約 614 萬臺，同比增長 5.6%
阿新 • • 發佈：2021-02-08
1.Vue指令：v-text
作用：設定標籤的內容（textCount）
<body>
<div id="app">
<h2 v-text="message +'!!!'">迷麟</h2>
<h2 v-text="info + '!!!'">迷麟</h2>
<h2>{{ info + '!!!'}}迷麟</h2>
</div>
<script type=" 執行效果：
注意點：
1.雙引號裡面不能再加雙引號，只能用單引號引用。
2.預設寫法會替換標籤中全部內容，使用**差值表示式{{}}**可以替換指定的內容
2.Vue指令：v-html
作用：設定元素的innerHtml，內容中有html結構的會被解析成標籤
<body>
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!--引入vue.js檔案，開發環境版本，包含了有幫助的命令列警告-->
<script type="text/javascript" 執行效果：
總結：
- 只有v-html指令才會解析含有html結構的內容。
- v-text將內容直接輸出
3.Vue指令：v-html
作用：為元素繫結事件
<body>
<div id="app">
<input type="button" value="單擊" v-on:click="cl" /><!--單擊-->
<input type="button" value="滑鼠指標穿過" v-on:mouseenter="mou" /><!--滑鼠指標穿過-->
<input type="button" value="雙擊" v-on:dblclick="db" /><!--雙擊-->
<input type="button" value="簡寫雙擊" @dblclick="db" />
<h2 @click="changeFood">{{ food }}</h2>
</div>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
var app = new Vue({
el:"#app",
data:{
food:"陳一刀辣椒炒肉"
},
methods:{
cl:function () {
alert("單擊");
},
mou:function () {
alert("指標穿過");
},
db:function () {
alert("雙擊");
},
changeFood:function (){
alert(this.food);
this.food += "好吃"
}
},
})
</script>
</body>
執行效果：
點選“陳一刀辣椒炒肉”彈出彈窗並有下圖顯示：
總結：
- 事件名不需要寫on
- 指令可以簡寫為@
- 繫結的方法在methods屬性中
- 方法內部通過this關鍵字可以訪問定義在data中資料