直接上例子！！
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" target="_blank" rel="external nofollow" ><!--引入css樣式-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!--引入vue模闆-->
</head>
<body>
<!--此div為挂載點，可以直接通過template模闆将html顯示到此挂載點的标簽中-->
<div id="app"><!--id與js中的vue對象el要一緻-->
{{ message }} {{name}}<!--插值表達式，引用vue對象中定義的data-->
<h1>Events</h1>
<p v-html="websiteTag"></p><!--js中定義的是HTML标簽-->
<input type="text" v-bind:value="name" v-bind:title="name"><!--v-bind,标簽内部屬性綁定js中的data-->
<a v-bind:href="website" target="_blank" rel="external nofollow" >web開發</a><!--data作為标簽内部變量，同上-->
<p>{{greet('night')}}</p><!--引入含參方法-->
<a v-on:click.prevent="alert()" href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >百度</a><!--警告之後，阻止網頁跳轉-->
<button v-on:click="age++">長一歲</button><!--事件中的方法可以不加括号-->
<button v-on:click="age--">減一歲</button>
<button @dblclick="subtract(10)">輕按兩下減10歲</button><!--輕按兩下事件dblclick-->
年齡：{{age}}
<div id="canvas" v-on:mousemove="updateXY">{{x}},{{y}}-<!--滑鼠移動事件-->
<!--<span v-on:mousemove="stopMoving">stop Moving</span>--><!--阻止滑鼠事件-->
<span v-on:mousemove.stop="">Stop Moving</span><!--阻止-->
</div>
<!--雙向資料綁定-->
<h1>雙向資料綁定</h1>
<!--将input中擷取到的值傳入data的變量中，将input中加入ref标記，在方法中改寫。-->
<h1>鍵盤 Events</h1>
<label>姓名：</label>
<input ref="name" type="text" @keyup.enter="logName"><span>{{name}}</span>
<label>年齡：</label>
<input type="text" v-model="age"><span>{{age}}</span><!--點選enter之後才調用logAge方法在console列印-->
</div>
<script src="index.js" charset="utf-8"></script><!--引入js-->
</body>
</html>
<!-- v-text：在dom中顯示文本 v-html:會轉義 -->
index.js:
var app = new Vue({
el: '#app',
// template:'<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >模闆</a>',/*模闆，也可以直接寫到html中；html會将其放入挂載點中*/
data: {
message: 'Hello Vue!',
name: 'xiao',
age:20,
website: "http://www.baidu.com",
websiteTag: "<a href='https://www.tmall.com/'>TMall</a>",
x: 0,
y: 0
},
methods: {
greet: function (time) {
return 'Good ' + time + "! " + this.name;
},
subtract: function (inc) {
this.age -= inc;
},
updateXY: function (event) {
console.log(event);
this.x = event.offsetX;/*可以将滑鼠移動事件中的XY偏移量指派給vue對象的變量*/
this.y = event.offsetY;
},
stopMoving: function (event) {
event.stopPropagation();/*可以阻止事件冒泡到父元素*/
},
alert: function () {
alert("Don't Access!");
},
logName: function () {
// console.log("你正在輸入姓名！");
this.name = this.$refs.name.value; // 實作了雙向綁定
console.log(this.$refs.name.value);
},
logAge: function () {
// console.log("你正在輸入年齡！");
this.age = this.$refs.age.value;
}
}
});
網頁效果：
v-on：給dom指定事件(簡寫@)事件後可以加上.alt.enter就是按了這幾個鍵事件才會生效
v-text:在标簽内部，vue資料以文本形式傳入
v-html:可以将vue對象中的資料以html的形式傳入頁面【可能受到XSS攻擊，要在server中對使用者送出的内容進行處理，一般可以用“<>”轉義。前端安全】
v-bind:标簽中屬性和vue對象中某個屬性綁定（簡寫：）
v-model:資料雙向綁定或者給标簽一個事件，一個ref參考的屬性名，在methods中通過this.$refs.age.value傳值給this.age
可以在method中定義方法，但是沒有緩存。計算屬性computed有一個緩存，計算效率更高。
也可以通過watch監聽變量的變化執行操作，watch也有緩存，但是比computed麻煩一些，對于所有的相關變量都要監聽。
<!--資料雙向綁定的執行個體-->
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!–引入vue模闆–>-->
<script src="./vue.js"></script><!--導入開發版本的vue.js-->
</head>
<body>
<div id="root">
<!--v-model實作雙向綁定-->
<label>姓名：</label>
<input ref="name" type="text" v-model="name"><span>{{name}}</span>
<label>年齡：</label>
<input ref="age" type="text" v-model="age"><span>{{age}}</span>
{{full}}
</div>
<script>
new Vue({
el: "#root",
data: {
name: 'vv',
age: '12',
count:0
},
computed: {/*計算屬性，可以将data中的變量進行計算*/
full: function () {
return this.name + ' ' + this.age;
}
},
watch: {/*偵聽器，一旦監聽的變量發生變化，就可以進行一些操作*/
full: function () {
this.count++;
}
}
})
<!--computed:vue中的計算屬性，當它所使用的變量發生改變時，會經過計算後列印full值，否則按原來預設的輸出-->
</script>
</body>
</html>
computed中的變量可以使用set和get方法，當value值改變引起full相關變量的改變時，頁面顯示的變量都會經過重新計算，将新的結果重新顯示在頁面中
computed: {/*計算屬性，可以将data中的變量進行計算*/
full:{
get: function () {
return this.name + ' ' + this.age;
},
set:function (value) {
var arr = value.split(" "); /*将arr按照空格分開*/
this.name = arr[0];
this.age = arr[1];
console.log(value);
}
}
},
v-if v-show v-for的使用
v-if 可以和v-else成對使用，或者還有v-else-ifvue在渲染頁面的時候，會盡可能複用頁面中已經存在的dom。
vue學習（一）+ 基本文法【v-on、v-click、v-model、v-if、v-for等用法&資料的雙向綁定&todoList小栗子】 vue學習（一）+ 基本文法【v-on、v-click、v-model、v-if、v-for等用法&資料的雙向綁定&todoList小栗子】 當更改show值時，會更改标簽，但是不會清空原來input框中的值。
我們可以通過在标簽中定義一個key值，這樣的話，input框的key值不同，就會被識别為不同的dom，是以就會達到為我們想要的效果。
vue學習（一）+ 基本文法【v-on、v-click、v-model、v-if、v-for等用法&資料的雙向綁定&todoList小栗子】
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--點選按鈕隐藏或顯示div-->
<!--v-if會将dom删除再重新建立-->
<!--v-show會将dom設定一個css屬性隐藏 display:none-->
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
<!--v-for循環顯示數組中元素-->
<!--:key可以提高效率 index為下标-->
<ul>
<!--<li v-for="item of list" :key="item">{{item}}</li>-->
<li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
v-for的多種使用方法
關于index的用法：現在的版本輸出index前不需要‘$’。
<li v-for="(item,index) in items">
{{ index }}
</li>
todoList小栗子
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script src="./vue.js"></script>
</head>
<body>
<!--todoList-->
<div id="root">
<div>
<input v-model="inputValue" type="text" @keyup.enter="handleSubmit"/>
<button @click="handleSubmit">送出</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleSubmit: function () {/*點選事件*/
this.list.push(this.inputValue);/*向list中添加資料*/
this.inputValue='';/*每次送出之後清空輸入框中的内容*/
}
}
})
</script>
</body>
</html>