目錄
框架：
助解：
框架：
VUE
什么是Vue.js?
Vue.js優點
Vue安裝
方式一：直接用<script>引入
方式二：命令行工具
第一個Vue程序
代碼
代碼解釋：?
運行
Vue指令
v-text? v-html
v-text
v-html
代碼
運行
v-bind? ?v-on
v-on
v-bind
代碼
運行
v-model
代碼
運行
v-if v-show
v-if?
v-show
代碼
運行?
Vue生命周期
代碼
運行
框架：
助解：
現在蓋高樓大廈是如何蓋的？
鋼筋混凝土澆筑框架
然后在框架結構的基礎上再次進行裝修
框架結構（把很多的基礎功能已經實現了，水，電，網線，下水...）
框架：
在語言的基礎上，把一些常用的重復出現的功能進行封裝，使得開發人員可以更高效的進行開發。
html、css、js
前端框架
js框架（對js進行封裝，簡化代碼方便操作）
UI框架（把一些常用的組件（表單，表格，按鈕...）進行封裝）
Java后端框架
VUE
什么是Vue.js?
Vue是一個前端js框架，簡化js操作，
其中MVVM思想實現數據雙向綁定（標簽展示和js中的數據），
任意一方發生改變，框架都會自動的更新另一方，
程序員不需要直接操作DOM對象（標簽）
Vue.js優點
效率高
生態豐富，學習成本低
vue.js只是對js進行了封裝，并不是代替js，基礎的語法還是js
Vue安裝
方式一：直接用<script>引入
下載Vue.js并導入js文件
<script src = "js/vue.js"></script>
方式二：命令行工具
命令行輸入：
$ npm install vue@^2
第一個Vue程序
1. 導入開發版本的 Vue.js
2. 創建 Vue 實例對象，設置 el 屬性和 data 屬性
3. 使用簡潔的模板語法把數據渲染到頁面上
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><!-- 插值表達式 直接可以將data中定義的數據獲取-->{{ message }}{{a}}<div>{{message}}</div></div><script>//new Vue 對象var app = new Vue({el: '#app',//將id為app的標簽與Vue對象進行綁定data: {//data中用來定義與標簽進行雙向綁定的數據，可以定義多組的message: 'Hello Vue!',a:10}})</script></body>
</html>
代碼解釋：?
1、{{ 變量 }} ,插值表達式獲取 data 數據
2、new Vue();創建 Vue 對象(VM 對象)
3、el:數據掛載的 dom 對象
? ? ?Vue 會管理 el 選項命中的元素及其內部的后代元素
? ? ?可以使用其他的選擇器，但是建議使用 ID 選擇器
? ? ?可以使用其他的閉合標簽，不能使用 HTML 和 BODY
4、data:{ message:’hello world’} model 數據
? ? ?Vue 中用到的數據定義在 data 中
? ? ?data 中可以寫復雜類型的數據,如對象,數組
運行
Vue指令
指令帶有前綴 v- 開頭，以表示它們是 Vue 提供的特殊屬性。
v-text? v-html
<P>{{msg}}</P> ?插值表達插入變量。不會覆蓋
v-text，v-html ? 會覆蓋標簽體中的內容
v-text
v-text 會把內容當作文本處理
<p v-text="msg"></p> ?
v-html
v-html ?會把內容當作 html的內容處理,可以解析標簽
<p v-html="msg"></P>
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><P>{{msg}} vue</P><p v-text="msg"></p><p v-html="msg"></p></div><script> var app = new Vue({el: '#app', data: { msg: '你好！', }})</script></body>
</html>
運行
v-bind? ?v-on
v-on
v-on:事件名 ?為標簽添加事件
事件名不需要寫 on 指令可以簡寫為@
v-bind
v-bind:標簽屬性名="變量" 可以動態的來改變屬性的值，只需要在js中改變屬性的值即可
作用是為元素綁定屬性
完整寫法是 v-bind：屬性名
簡寫的話可以直接省略 v-bind，只保留：屬性名
代碼
?<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script><style type="text/css">.imgcss{width: 100px;height: 100px;}</style></head><body><div id="app"><img v-bind:src="img"><img :src="img"><!-- 為class屬性動態添加取消樣式 --><img :src="img" :title="title" v-bind:class="{imgcss:isActive}"><input type="button" value="改變1"/ v-on:click="test1()" ><input type="button" value="改變2"/ @click="test2('aaaaaa')" ></div><script> var app = new Vue({el: '#app', data: { img:"img/1.jpg",title:"這不是花",isActive:true},methods:{ //定義函數 可以在函數中使用this關鍵字訪問data中的數據改變變量值test1(){this.img = "img/2.jpg";this.title = "這是一朵花";this.isActive = false;},test2(a){this.img = "img/1.jpg";this.title = a; this.isActive = true;}}})</script></body>
</html>?運行
初始態
test1
test2
v-model
v-model="msg" 可以將輸入框中value值 與 vue中數據進行綁定
當輸入框值發生改變時，會自動的更新到數據中
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><p>{{msg}}</p><input type="text" v-model="msg"/></div><script> var app = new Vue({el: '#app', data: { msg: "", }})</script></body>
</html>
運行
v-if v-show
v-if v-show 都可以控制標簽是否顯示或隱藏
v-if?
v-if隱藏標簽時直接將標簽從網頁中刪除，大量操作開銷較大
v-show
v-show隱藏標簽時只是改變了標簽的display值
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script></style></head><body> <div id="app"><img :src="img" v-if="isShow"/><img :src="img" v-show="isShow"/></div><script> var app = new Vue({el: '#app', data: { img:"img/1.jpg",isShow:true},methods:{ }})</script></body>
</html>
運行?
Vue生命周期
每個 Vue 實例在被創建時都要經過一系列的初始化過程——例如，需要設置數 據監聽、編譯模板、將實例掛載到 DOM 并在數據變化時更新 DOM 等。同時 在這個過程中也會運行一些叫做生命周期鉤子的函數，這給了用戶在不同階段添 加自己的代碼的機會。
beforeCreate: function () { console.log('beforeCreatea ’); },
created: function () { console.log('createda ' ); },
beforeMount:function(){ console.log('beforeMounta’); },
mounted:function(){ console.log('mounteda’); }
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 導入vue封裝的js文件 --><script src="js/vue.js"></script></style></head><body><div id="app"></div><script> var app = new Vue({el: '#app', data: {},methods:{ },//vue對象的聲明周期鉤子函數，在生命周期的每個階段提供一個函數，供我們執行某些需要的操作beforeCreate() {console.log("vue對象創建之前")},created() {console.log("vue對象創建完成")},beforeMount() {console.log("vue對象與標簽綁定之前")},mounted() {console.log("vue對象與標簽綁定之后")//常用的，當vue對象創建成功后，與標簽綁定成功后執行我們想要的操作//類似于之前的onlood事件this.test(); }})</script></body>
</html>
運行
?
)
)
)
