前端就业之vue介绍
vue介紹
1、什么是vue.js
? 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。vue的設(shè)計可以自底層向上逐層應(yīng)用。vue的核心庫只關(guān)注視圖層。可以為單頁面應(yīng)用提供驅(qū)動。
2、起步
下載vue.js jar包，引入頁面進(jìn)行運用。
不推薦直接使用vue-cli，尤其在不熟悉node.js的構(gòu)建工具的時候。
3、聲明式渲染
vue的核心就是使用簡單的模板語言聲明式的將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)。
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app">{{message}}</div><script>var vm = new Vue({el:'#app',data:{message:'hello vue.js'}})</script></body> </html>效果
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-irI0u7La-1604128329147)(E:\政通路\課堂筆記\S3\vue英豪\vue\vue入門\assets\image-20200827155250678.png)]
我們創(chuàng)建了第一個vue應(yīng)用。使數(shù)據(jù)和DOM建立了聯(lián)系。
<div id="app2"><span v-bind:title="msg">提示信息</span></div>var app2 = new Vue({el:'#app2',data:{msg:'頁面提示'+new Date().toLocaleString()}})v-bind特性稱之為指令。帶有v-，表示是vue提供的特殊特性。將元素節(jié)點的title特性和msg屬性進(jìn)行了一致性的保持。
4、條件與循環(huán)
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-71DAjMs7-1604128329150)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870314654.png)]
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-e36IR8Gm-1604128329152)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870325182.png)]
發(fā)現(xiàn)在控制臺輸app3.seen=false，會發(fā)現(xiàn)之前的“你好”，消失了
vue提供了一個強(qiáng)大過渡效果系統(tǒng)，可以在vue插入/更新/刪除元素時，自動的過度應(yīng)用效果
v-for指令綁定數(shù)組的數(shù)據(jù)渲染一個項目列表
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-7CAtgC40-1604128329156)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871037825.png)]
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ZXjlJivV-1604128329157)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871050641.png)]
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-DP5TzkHK-1604128329161)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871080828.png)]
在控制臺輸入app4.todos.push({text:‘maven’})，他會在列表后面添加一個新項目
5、處理用戶輸入
為了讓用戶和你的應(yīng)用進(jìn)行交互，可以用v-on指令添加一個事件監(jiān)聽器，通過它調(diào)用vue實例中定義的方法
<!--v-on指令--><div id="app5"><p>{{mm}}</p><button v-on:click="reversemm">翻轉(zhuǎn)消息</button></div>var app5 = new Vue({el:'#app5',data:{mm:'abcdefg'},methods:{reversemm:function(){this.mm = this.mm.split('').reverse().join('')}}})[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Aj7O77wu-1604128329165)(C:\Users\ADMINI~1\AppData\Local\Temp\1563872080347.png)]
vue提供v-model指令，實現(xiàn)雙向綁定
使用v-model實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
<!--v-model雙向綁定--><div id="app6"><p>{{msm}}</p><input v-model="msm" /></div>var app6 = new Vue({el:'#app6',data:{msm:'abcdefg'}})6、組件化應(yīng)用構(gòu)建
組件系統(tǒng)是vue的另一個重要的概念。它是一種抽象的，允許我們使用小型、獨立和通常可以復(fù)用的組件構(gòu)建大型的項目。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-fGJYjvEu-1604128329168)(C:\Users\ADMINI~1\AppData\Local\Temp\1563935364848.png)]
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/vue.js" ></script></head><body><div id="app"><ol><li>我是li標(biāo)簽</li><todo-item></todo-item></ol></div><script>//定義 todo-itme 是一個組件Vue.component('todo-item',{template:'<li>我是一個組件元素</li>'})new Vue({el:'#app',data:{}})</script></body> </html>本章回顧：
1、vue.js是一個漸進(jìn)式的框架
2、下載vue.js的jar，引入頁面
3、數(shù)據(jù)的加載 語法：｛｛變量名｝｝，new一個事例 el 和 data
4、指令 以v-開頭，這是vue的特殊命令
5、組件化構(gòu)建，什么是組件
作業(yè)：
1、下載vue.js,引入
</body> ```本章回顧：
1、vue.js是一個漸進(jìn)式的框架
2、下載vue.js的jar，引入頁面
3、數(shù)據(jù)的加載 語法：｛｛變量名｝｝，new一個事例 el 和 data
4、指令 以v-開頭，這是vue的特殊命令
5、組件化構(gòu)建，什么是組件
作業(yè)：
1、下載vue.js,引入
2、把這章講到的知識點，熟練運用，結(jié)合官方API
總結(jié)
以上是生活随笔為你收集整理的前端就业之vue介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Asp.Net就业课堂之模板控件
- 下一篇： vue实例、指令、生命周期