vue學習筆記整理
1、安裝
- 我們可以在 Vue.js 的官網上直接下載 vue.min.js 並用 script 標籤引入
- 使用 CDN 方法，在script 標籤下src="https://cdn.jsdelivr.net/npm/[email protected]"寫入
- NPM，在用 Vue 構建大型應用時推薦使用 NPM 安裝，# 最新穩定版
$ npm install vue
2、創建一個 Vue 實例
var vm = new Vue({
// 選項
})
3、插值
- 通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新
- 雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。爲了輸出真正的 HTML，你需要使用 v-html
- 你的站點上動態渲染的任意 HTML 可能會非常危險，因爲它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容使用插值。
- Mustache 語法不能作用在 HTML attribute 上，遇到這種情況應該使用 v-bind 指令：
4、指令
v-bind:綁定一個值，v-on:綁定一個事件
簡寫：v-bind ------- : ，v-on ------------- @。
綜合例子：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="div">
<input type="button" value="start" v-on:click="run"></input>
<input type="button" value="stop" @click="stop"></input>
<h1>{{msg4}}</h1>
<p v-Cloak>--- {{msg}} +++</p>
<h1 v-text="msg1"></h1>
<h4 v-html="msg2"></h4>
<input type="button" value="按鈕" v-bind:title="msg3" v-on:click="show">
</div>
<script>
var vm = new Vue({
el:'#div',
data:{
msg:'Hello world!',
msg1:'<h1>Best!</h1>',
msg2:'<h1>Best!</h1>',
msg3:'This is a Button!',
msg4:"一直走不停留！",
intervalId: null,
},
methods:{
show:function () {
alert("Hello!");
},
run(){
if(this.intervalId==null){
this.intervalId = setInterval(()=>{
var start = this.msg4.substring(0,1);
var end = this.msg4.substring(1);
this.msg4 = end + start;
},300)
}
},
stop(){
clearInterval(this.intervalId);
this.intervalId=null;
}
}
})
</script>
</body>
</html>
運行截圖：
