一、 vue實例和數據綁定
1、引入vue的代碼
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
2、創造vue的實例
通過構造函數 Vue 就可以創建一個 Vue 的根實例，並啓動 Vue 應用---入口
var app ＝new Vue({
el:'',
data:{
}
})- 必不可少的一個選項就是 el 。 el 用於指定一個頁面中己存在的 DOM 元素來掛載 Vue實例,可以是標籤。也可以是css語法
- 通過 Vue 實例的 data 選項，可以聲明應用內需要雙向綁定的數據。建議所有會用到的數據都預先在 data 內 聲明，這樣不至於將數據散落在業務邏輯中，難以維護。也可以指向一個已經有的變量
3、訪問數據方式
- 訪問vue實例元素
app.$el- 訪問data元素的屬性
直接app.屬性名，如 app.msg二、生命週期鉤子
1、 created
實例創建完成後調用，此階段完成了數據的觀測等，但尚未掛載， $el 還不可用。需要初始化處理一些數據時會比較有用，
2、 mounted
el 掛載到實例上後調用，一般我們的第一個業務邏輯會在這裏開始 。相當於 $(document).ready()---剛剛掛載
3、beforeDestroy
實例銷燬之前調用。主要解綁一些使用 addEventListener 監聽的事件，定時器等。
舉例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app2">
{{ msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app=new Vue({ //通過構造函數新建一個vue的實例，
el:"#app2",//用於掛載頁面上已經存在的dom元素
data:{
msg:"vue學習開始了"
},
created:function(){
alert('我是vue實例，已經創建完成，但還未掛載到dom上')
},
mounted:function(){
alert('我是vue實例，已經掛載到dom')
}
})
console.log(app.$data) //訪問vue實例的屬性
console.log(app.msg) //訪問data元素的屬性
//vue實例就是vue應用的一個入口，傳遞
</script>
</body>
</html>三、 文本插值和表達式
1、語法：
使用雙大括號（ Mustache 語法）“｛｛｝｝”是最基本的文本插值方法，它會自動將我們雙向綁定的數據實時顯示出來，
2、用法
在｛｛｝｝中，除了簡單的綁定屬性值外，還可 以使用 JavaScript 表達式進行簡單的運算 、 三元運算等
3、實例
Vue .js 只支持單個表達式，不支持語句和流控制。
{{ 6+6 *3}}---可以進行簡單的運算
{{ 6<3 ? msg :a}}---可以用三元運算符 <br>
{{if(6>3){}}-----注意：文本插值的形式，其中不能書寫表達式,支持單個表達式
4、注意
{{var a = 6}}--也是多行表達式----var a ;a = 6;
〈！一這是語旬，不是表達式 一〉