說明
本文參考了主要整理了一些Vue常用語法，給出相應代碼，存在有大量不足的地方，建議參考Vue官網文檔進行學習
注意：本文僅爲記錄學習軌跡，如有侵權,聯繫刪除
一、前期準備
工具採用idea 2019，開始前下載Vue.js插件
設置vue新建文件模板
模板
<template>
</template>
<script>
export default {
name:"${NAME}"
}
</script>
<style scoped>
</style>
二、常用方法
demo案例
跟後端一樣，前端逐漸趨向於系統化，有條件語句、循環語句、自己的服務器（nodejs）、可獨立運行、測試和部署，不可否認的是前端正在逐漸崛起。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'hello vue！'
}
})
</script>
</body>
</html>
引進虛擬Dom、MVVM模型等，具體概念查看Vue官網，這裏主要展示代碼，多玩一下代碼就可以感受到Vue強大及其使用。
if-else
就跟後端的條件差不多
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-1">
<p v-if="seen">現在你看到我了</p>
<p v-else>現在你看不到我了</p>
</div>
<div id="app-2">
<p v-if="type=='A'">this is A</p>
<p v-else-if="type=='B'">this is B</p>
<p v-else-if="type=='C'">this is C</p>
<p v-else>this is none</p>
</div>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el: '#app-1',
data: {
seen: true
}
})
var app2 = new Vue({
el:'#app-2',
data: {
type: 'A'
}
})
</script>
</body>
</html>
for循環
這裏的for循環語法跟python有點像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="app-1">
<li v-for="item in items">
{{item.message}}
</li>
</ul>
<ul id="app-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }}
<p v-if="index == 0"> {{ item.message0 }}</p>
<p v-if="index == 1"> {{ item.message1 }}</p>
<p v-if="index == 2"> {{ item.message2 }}</p>
</li>
</ul>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el: '#app-1',
data: {
items:[
{message:'第一個元素'},
{message: '第二個元素'},
{message: '第三個元素'}
]
}
})
var app2 = new Vue({
el: '#app-2',
data: {
parentMessage:'this is parent',
items:[
{message0: '第一個元素'},
{message1: '第二個元素'},
{message2: '第三個元素'}
]
}
})
</script>
</body>
</html>
事件綁定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="app-1" v-on:click="sayHello">click me</button>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app-1',
data:{
message:'this is message'
},
methods:{
//事件的綁定，方法必須定義在Vue的methods對象中，v-on:事件
sayHello:function (event) {
alert(this.message);
}
}
})
</script>
</body>
</html>
異步請求（axios）
異步請求是最關鍵的一個技術
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>異步請求(axios)</title>
</head>
<body>
<!--get的異步請求-->
<div id="app1">
名字:{{info.data.name}}<br>
年齡:{{info.data.age}}<br>
</div>
<hr>
<!--post的異步請求-->
<div id="app2">
名字:{{info.data.name}}<br>
年齡:{{info.data.age}}<br>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
// get的異步請求
new Vue({
el: '#app1',
data () {
return {
info: null
}
},
mounted () {
axios
.get('../json/data.json')//這裏一般請求後端的接口，接口返回一個json字符串
.then(response => (this.info = response))//將請求返回的數據賦值給info
.catch(function (error) { // 請求失敗處理
console.log(error);
});
}
})
// post的異步請求
new Vue({
el: '#app2',
data () {
return {
info: null
}
},
mounted () {
axios
.post('../json/data.json')//這裏一般請求後端的接口，接口返回一個json字符串
.then(response => (this.info = response))//將請求返回的數據賦值給info
.catch(function (error) { // 請求失敗處理
console.log(error);
});
}
})
</script>
</body>
</html>
組件基礎
組件化開發，提高代碼可複用性，詳細參考Vue官網
<!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>
</head>
<body>
<!--<p>組件是可複用的 Vue 實例，且帶有一個名字：在這個例子中是 <button-counter>。我們可以在一個通過 new Vue 創建的 Vue 根實例中，把這個組件作爲自定義元素來使用：</p>-->
<div id="bc">
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter><br>
<button-counter></button-counter>
</div>
<hr>
<!--通過title給組件blog-post傳值-->
<div id="bp1">
<blog-post1 title="this is blog-1"></blog-post1>
<blog-post1 title="this is blog-2"></blog-post1>
<blog-post1 title="this is blog-3"></blog-post1>
</div>
<hr>
<!--自定義blog-post2組件,循環傳值（複雜）-->
<div id="bp2">
<blog-post2 v-for="item in items" v-bind:value="item"></blog-post2>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 這裏有兩種組件的註冊類型：全局註冊和局部註冊。至此，我們的組件都只是通過 Vue.component 全局註冊的
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
//自定義blog-post1組件,需要給title傳值進去（簡單）
Vue.component('blog-post1',{
props:['title'],
template:'<h3>{{title}}</h3>'
})
//自定義blog-post2組件,循環傳值（複雜）
Vue.component('blog-post2',{
props:['value'],
template:'<h3>{{value}}</h3>'
})
new Vue({ el: '#bc' })
new Vue({ el: '#bp1' })
new Vue({
el:'#bp2',
data:{
items:['A','B','C']
}
})
</script>
</body>
</html>
表單屬性綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單輸入綁定</title>
</head>
<body>
<hr>
<div id="app-1">
#文本 <br>
<input v-model="message" placeholder="edit me">
<p>Message is {{message}}</p>
</div>
<hr>
<div id="app-2">
#多行文本 <br>
<span>Multiline message is:{{message}}</span><br>
<textarea v-model="message"></textarea>
</div>
<hr>
<div id="app-3">
#複選框 <br>
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<input type="checkbox" id="john" value="john" v-model="checkedNames">
<input type="checkbox" id="mike" value="mike" v-model="checkedNames">
<input type="checkbox" id="tony" value="tony" v-model="checkedNames">
<p for="checkbox">Checked names: {{checkedNames}}</p>
</div>
<hr>
<div id="app-4">
#單選按鈕 <br>
<input type="radio" id="mela" value="男" v-model="picked">男
<input type="radio" id="femela" value="女" v-model="picked">女
<p for="checkbox">Picked : {{picked}}</p>
</div>
<hr>
<div id="app-5">
#選擇框單選 <br>
<select v-model="selected">
<option disabled value="">---請選擇---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{selected}}</p>
</div>
<hr>
<div id="app-6">
#選擇框多選 <br>
<select v-model="selected" multiple style="width: 50px;">
<option disabled value="">---請選擇---</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{selected}}</p>
</div>
<hr>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app-1',
data: {
message: ''
}
})
new Vue({
el: '#app-2',
data: {
message: ''
}
})
new Vue({
el: '#app-3',
data: {
// checkedNames: ''
checkedNames: []
}
})
new Vue({
el:'#app-4',
data:{
picked:''
}
})
new Vue({
el:'#app-5',
data:{
selected:''
}
})
new Vue({
el:'#app-6',
data:{
selected:[]
}
})
</script>
</body>
</html>
計算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計算屬性</title>
</head>
<body>
<!-- 導入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app1",
data:{
message:"hello world"
},
methods:{
currentTime1:function () {
return Date.now();//返回一個時間戳
}
},
computed:{//計算屬性（相當於緩存）:metheds,computed方法名不能重名，重名之後之後調用methods的方法
currentTime2:function () {
this.message;
return Date.now();//返回一個時間戳
}
}
});
</script>
</body>
</html>
插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插槽</title>
</head>
<body>
<div id="app1">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//slot
Vue.component("todo",{
template:'' +
'<div>' +
' <slot name="todo-title"></slot>' +
' <ul>' +
' <slot name="todo-items"></slot>' +
' </ul>' +
'</div>'
});
Vue.component('todo-title',{
props:['title'],
template: '<li>{{title}}</li>'
});
Vue.component('todo-items',{
props: ['item'],
template:'<li>{{item}}</li>'
});
new Vue({
el:'#app1',
data:{
title:"this is title",
todoItems:['C/C++','Java','Python']
}
});
</script>
</body>
</html>
自定義內容轉發
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義內容分發</title>
</head>
<body>
<div id="app1">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items"
v-for="(item,index) in todoItems"
v-bind:item="item"
v-bind:index="index"
v-bind:key="index"
v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//slot
Vue.component("todo",{
template:'' +
'<div>' +
' <slot name="todo-title"></slot>' +
' <ul>' +
' <slot name="todo-items"></slot>' +
' </ul>' +
'</div>'
});
Vue.component('todo-title',{
props:['title'],
template: '<li>{{title}}</li>'
});
Vue.component('todo-items',{
props: ['item','index'],
template:'' +
'<li>' +
' {{item}}' +
' <button @click="remove">刪除</button>' +
'</li>',
methods: {
remove:function (index) {
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:'#app1',
data:{
title:"this is title",
todoItems:['C/C++','Java','Python']
},
methods:{
removeItems:function (index) {
console.log("刪除了"+this.todoItems[index]+"OK");
this.todoItems.splice(index,1);//一次刪除一個元素
}
}
});
</script>
</body>
</html>
三、補充
上面的一些方法，建議去官網瞭解了相關的概念後再看，在知道相關概念後學習效率最高，其次個人覺得只要看得懂代碼，知道怎麼用即可，沒必要深究，畢竟現在時間寶貴，講究高效學習，後面的開發也不會用這種原生的代碼，很多都是用的框架，Vue則會使用Vue-cli腳手架進行快速開發和獨立部署，即所謂的前後端分離。