學習vue我們必須之到它的7個屬性，8個 方法，以及7個指令。787原則
-
el屬性
-
用來指示vue編譯器從什么地方開始解析 vue的語法，可以說是一個占位符。
-
data屬性
-
用來組織從view中抽象出來的屬性，可以說將視圖的數據抽象出來存放在data中。
-
template屬性
-
用來設置模板，會替換頁面元素，包括占位符。
-
methods屬性
-
放置頁面中的業務邏輯，js方法一般都放置在methods中
-
render屬性
-
創建真正的Virtual Dom
-
computed屬性
-
用來計算
-
watch屬性
-
watch:function(new,old){}
-
監聽data中數據的變化
-
兩個參數，一個返回新值，一個返回舊值，
<div id="app">
{{msg}}
<div>這是模板的第一種使用方法1</div>
</div>
<template id="bot">這是模板的第三種使用方法，不常用3</template>
<script>
<div id="bot">模板的第四種創建方法4</div>
</script>
<script>
var vm1 = new Vue({
data: {
msg: "data屬性"
},
methods: {
Personal:function () {
console.log("methods方法存放方法")
}
},
template: `<div>模板的第二種使用方法2</div>`,
//template："#bot",
render: (createElement) => {
return createElement("h1",{"class":"類名"，"style":"color: red"},"這一個render屬性創建的虛擬dom")
},
})
</script>
methods和computed其中都可以寫算法，有什么區別呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head> <body>
<div id="app">
<p>{{message}}</p> //直接在模板中綁定表達式
<p>{{message.split('').reverse().join('')}}</p> //運用計算屬性
<p>{{reverseMessage}}</p> //運用methods方式
<p>{{methodMessage()}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
我在此將三種方式進行了比較。返回的結果是一樣的，但在寫法上computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加().
兩種方式在緩存上也大有不同，利用computed計算屬性是將 reverseMessage與message綁定，只有當message發生變化時才會觸發reverseMessage，而methods方式是每次進入頁面都要執行該方法，但是在利用實時信息時，比如顯示當前進入頁面的時間，必須用methods方式
以上就是vue常用的7個屬性，當然vue的屬性可不知這些，開發需要的話可以 在官網查閱剩余屬性。狗尾草和大家一起加油，技術改變世界！