Linux + ProxyPool 搭建屬於爬蟲代理IP池
阿新 • • 發佈:2021-02-03
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=" text/javascript" src="../js/vue.js" ></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"親愛的魁拔",
info:"歡迎回來"
}
})
</script>
</body>
執行效果:
注意點:
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" src="../js/vue.js" ></script>
<script>
var app = new Vue({
el:"#app",
data:{
/*content:"魁拔",*/
content:"<b>魁拔<b>"
}
})
</script>
</body>
執行效果:
總結:
- 只有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中資料