首先到官方網站下載vue.js:
官方下載網：https://vuejs.org/v2/guide/installation.html
而非教程官網：https://cn.vuejs.org/v2/guide/installation.html
下載後直接用html做個簡單的測試
將下面的代碼copy，修改一下vue.js的路徑就可以測試
測試一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<!--輸入框關聯-->
<div id="app">
<div>{{ message }}</div>
<input v-model="message" />
<div>{{test}}</div>
</div>
<!--標籤獲值方式-->
<div id="test1">
<p v-html="test1"></p>
<p v-text="test2"></p>
<p>{{test3}}</p>
</div>
<!--循環測試-->
<div id="testFor">
<ul v-for="obj in arr">
<li v-text="obj.name"></li>
</ul>
</div>
<!--渲染和隱藏-->
<div id="testIf">
<p v-if="isShow">123</p>
<p v-show="isShow">456</p>
</div>
<!--點擊事件綁定-->
<div id="testBtn">
<button v-on:click="doClick">點擊測試一</button>
<button @click="doClick">點擊測試二</button>
</div>
<!--屬性綁定-->
<div id="testCla">
<img v-bind:src="imageSrc" />
<div :class="cla">測試屬性綁定</div>
<div :class="obj">測試屬性綁定2</div>
<button :disabled="true">測試不可點擊</button>
</div>
</body>
<style>
.bg{background-color: red;}
.border{}
.round{border-radius: 8px;}
</style>
<script>
new Vue({
el:'#testCla',
data:{
imageSrc:"",
cla:["bg","border","round"],
obj:{
bg:false,
border:true,
round:true
}
}
})
new Vue({
el:'#testBtn',
methods:{
doClick:function(){
console.log('點擊事件')
}
}
})
new Vue({
el:'#testIf',
data:{
isShow:false //true 爲顯示
}
})
new Vue({
el:'#testFor',
data:{
arr:[{name:'張三'},{name:'李四'},{name:'王五'}]
}
})
new Vue({
el: '#test1',
data: {
test1:'<a style="color:red;">666666</a>',
test2:'內容測試',
test3:'值測試'
}
})
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
test:'測試...'
}
})
</script>
</html>
測試二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
.cla {
background: bisque;
cursor: pointer;
}
</style>
<body>
<div id="app">
<h1 v-text="title"></h1>
<ul v-for="obj in arr">
<li v-text="obj.name" v-bind:class="{cla:obj.bg}" v-on:click="testClick(obj)"></li>
</ul>
背景顏色：
<input type="radio" v-model="fx" value="true" />有
<input type="radio" v-model="fx" value="false" />無
<input v-model="en" v-on:keyup.enter="upEnter" />
<span>回車（enter）</span>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
title: '測試中...',
arr: [{
name: '小明',
bg: true
}, {
name: '小黑',
bg: false
}, {
name: '小白',
bg: true
}],
en: '',
fx: 'true'
},
methods: {
testClick: function(obj) {
console.log(obj.name)
},
upEnter: function() {
var fx;
if(this.fx == 'true'){
fx = true;
}else{
fx = false;
}
this.arr.push({
name: '' + this.en,
bg: fx
})
console.log('回車完成!' + this.en+" "+this.fx);
this.en = '';
}
}
})
</script>
</html>
測試完後簡單的基礎就有個瞭解了