轉(zhuǎn)載https://www.cnblogs.com/majj/p/9957597.html#top

vue的介紹

• 前端框架和庫的區(qū)別
• nodejs的簡單使用
• vue的起步
• 指令系統(tǒng)
• 組件的使用
• 過濾器的使用
• watch和computed
• 鉤子函數(shù)

---

漸進(jìn)式的JavaScript框架

vue react angualr作者:尤雨溪 facebook 谷歌公司文檔:中文 建議:如果你想學(xué)好vue 1.看視頻 初步的了解vue 2.學(xué)vue的課 時(shí)刻看官網(wǎng)文檔 https://cn.vuejs.org/

前端框架和庫的區(qū)別

功能上的不同

jquery庫：包含DOM(操作DOM)+請求，就是一塊功能。art-template庫：模板引擎渲染，高性能的渲染DOM (我們后端的一種模板 跟python的模板類似)框架：大而全的概念，簡易的DOM體驗(yàn)+請求處理+模板引擎在KFC的世界里，庫就是一個(gè)小套餐，框架就是全家桶。

代碼上的不同

一般使用庫的代碼，是調(diào)用某個(gè)函數(shù)或者直接使用拋出來的對象，我們自己處理庫中的代碼。 一般使用框架，其框架本身提供的好的成套的工具幫我們運(yùn)行我們編寫好的代碼。

框架的使用

• 初始化自身的一些行為
• 執(zhí)行你所編寫的代碼
• 釋放一些資源

nodejs

去官網(wǎng)https://nodejs.org/en/download/ 下載 安裝(傻瓜式安裝)

打開終端 cmd : 執(zhí)行node -v 如果出現(xiàn)版本號，證明安裝node成功 ，跟安裝python雷同

下載完node之后，會自帶包管理器 npm，好比 是python中 pip3包管理器。pip3 install xxx

使用npm

1.要初始化npm的項(xiàng)目 :

npm init --yes 自動(dòng)生成一個(gè)package.json文件

```javascript {"name": "vue_lesson","version": "1.0.0","description": "這是我的vue的第一個(gè)項(xiàng)目","main": "index.js","scripts": {"test": "echo "Error: no test specified" && exit 1"},"author": "mjj","license": "ISC","dependencies": {"vue": "^2.5.16"}}```

2.下載依賴包

npm install vue --save
npm install jquery --save

3.卸載包 npm uninstall vue --save

4.下載所有的依賴包 npm install

vue的起步

• 引包:
• 創(chuàng)建實(shí)例化對象

new Vue({ el:'#app',//目的地 data:{msg:"hello Vue" } }); /* {{}}: 模板語法插值{{變量}}{{1+1}}{{'hello'}}{{函數(shù)的調(diào)用}}{{1==1?'真的':'假的'}} */

指令系統(tǒng)

//常用 v-text v-html v-if v-show v-for v-bind v-on表單控件的value (看后面)

v-if和v-show

v-if 是“真正”的條件渲染，因?yàn)樗鼤_保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。 v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會開始渲染條件塊。 相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。 一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好。//保存數(shù)組或者對象 格式 v-for = '(item,index) in menuList' v-for = '(value,key) in object' //item指的是數(shù)組中每項(xiàng)元素 <a href="" class='box'></a> <img src="" alt=""> 使用v-bind:class = '{}||[]||變量名||常量' 對我們的頁面中標(biāo)簽的屬性進(jìn)行綁定 所有的屬性都可以進(jìn)行綁定,注意只要使用了v-bind 后面的字符串一定是數(shù)據(jù)屬性中的值

?### v-on、v-bind、v-for

// 1.事件源 2.事件 3.事件驅(qū)動(dòng)程序 vue中使用v-on:click對當(dāng)前DOM綁定click事件 注意:所有的原生js的事件使用v-on都可以綁定v-if和v-on 來對頁面中DOM進(jìn)行操作v-bind:class和v-on對頁面中DOM的樣式切換v-bind和v-on在vue中它可以簡寫: v-bind: :class 等價(jià)于 v-bind:class :src 等價(jià)于v-bind:src :id 等價(jià)于v-bind:id v-on:click 等價(jià)于 @click = '方法名' v-text v-html {{}}: 對頁面的dom進(jìn)行賦值運(yùn)算 相當(dāng)與js中innerText innerHTMLv-if = 'true': //創(chuàng)建 var oP = document.createElement('p') ; oDiv.appendChild(op)v-if = 'false' //銷毀 oDiv.removeChild(op) v-show = 'true' oDiv.style.display = 'block' v-show:'true' oDid.style.display = 'none'v-bind:class oDiv.className += ' active'/* 漸進(jìn)式的JavaScript框架 做加法和做減法:大部分的人覺得做加法簡單,做減法難 vue這個(gè)框架 將 做減法的事情都給咱們做了(難的部分) 學(xué)習(xí)簡單的部分就能實(shí)現(xiàn)復(fù)雜的dom操作 */

組件的使用

局部組件的使用

? 打油詩: 1.聲子 2.掛子 3.用

var App = {tempalte:`<div class='app'></div>` };//2.掛子new Vue({el:"#app",//用子 template:<App />components:{App}})

(1)父組件向子組件傳遞數(shù)據(jù):通過Prop

1.在子組件自定義特性。props:['自定義的屬性1','自定義屬性2']當(dāng)一個(gè)值傳遞給一個(gè) prop 特性的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè)屬性,那么我們就可以像訪問data中的值一樣 2.要在父組件中導(dǎo)入的子組件內(nèi)部 綁定自定義的屬性 <Vheader :title = '父組件中data聲明的數(shù)據(jù)屬性'/>

? 注意:一個(gè)組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。

(2)如何從子組件傳遞數(shù)據(jù)到父組件

1.給子組件中的某個(gè)按鈕綁定原聲事件,。我們可以調(diào)用內(nèi)建的 this.$emit('自定義的事件名','傳遞的數(shù)據(jù)')，來向父級組件觸發(fā)一個(gè)自定義的事件.2.在父組件中的子組件標(biāo)簽中 要綁定自定義的事件,

全局組件的使用

Vue.component('全局組件的名字',{跟new Vue() 實(shí)例化對象中的options是一樣，但是要注意：不管是公共組件還是局部組件 data必須是個(gè)函數(shù) 函數(shù)一定要返回 {} }) <slot> 元素作為承載分發(fā)內(nèi)容的出口

過濾器的使用

局部過濾器

//1.注冊局部過濾器 在組件對象中定義 filters:{'過濾器的名字':function(value){} } //2.使用過濾器 使用管道符 | {{price | '過濾器的名字'}}

全局過濾器

// 注冊全局的過濾器 //第一個(gè)參數(shù)是過濾器的名字，第二個(gè)參數(shù)是執(zhí)行的操作Vue.filter('reverse',function(value) { return value.split('').reverse().join(''); });//使用跟 局部過濾器一樣

計(jì)算屬性computed和偵聽器（watch）

偵聽的是單個(gè)屬性

watch:{數(shù)據(jù)屬性的名字：function(value){},數(shù)據(jù)屬性的名字2：function(value){} }

偵聽多個(gè)屬性:計(jì)算屬性 computed

{{str.split('').reverse().join('')}}

計(jì)算屬性 :默認(rèn)只有g(shù)etter方法data(){return {name:'alex',age:18}}compuetd:{key:value計(jì)算屬性的方法名:funtion(){return ${this.name}他的年齡是${this.age}歲}}var musicData = [{id:1,name:'于榮光 - 少林英雄',author:'于榮光',songSrc:'./static/于榮光 - 少林英雄.mp3'},{id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},{id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},{id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}];

生命周期(鉤子函數(shù))

beforeCreate(){// 組件創(chuàng)建之前console.log(this.msg);},created(){// 組件創(chuàng)建之后// 使用該組件，就會觸發(fā)以上的鉤子函數(shù)，created中可以操作數(shù)據(jù)，發(fā)送ajax，并且可以實(shí)現(xiàn)vue==》頁面的影響 應(yīng)用：發(fā)送ajax請求console.log(this.msg);// this.msg = '嘿嘿黑';},beforeMount(){// 裝載數(shù)據(jù)到DOM之前會調(diào)用console.log(document.getElementById('app'));},mounted(){// 這個(gè)地方可以操作DOM// 裝載數(shù)據(jù)到DOM之后會調(diào)用 可以獲取到真實(shí)存在的DOM元素，vue操作以后的DOMconsole.log(document.getElementById('app'));},beforeUpdate(){// 在更新之前，調(diào)用此鉤子，應(yīng)用：獲取原始的DOMconsole.log(document.getElementById('app').innerHTML);},updated(){// 在更新之前，調(diào)用此鉤子，應(yīng)用：獲取最新的DOMconsole.log(document.getElementById('app').innerHTML);},beforeDestroy(){console.log('beforeDestroy');},destroyed(){console.log('destroyed');},activated(){console.log('組件被激活了');},deactivated(){console.log('組件被停用了');}

$屬性

• $refs獲取組件內(nèi)的元素
• $parent:獲取當(dāng)前組件的父組件
• $children:獲取當(dāng)前組件的子組件
• $root:獲取New Vue的實(shí)例化對象
• $el:獲取組件對象的DOM元素

獲取更新之后的dom添加事件的特殊情況

$nextTick 是在下次Dom更新循環(huán)結(jié)束之后執(zhí)行的延遲回調(diào)，在修改數(shù)據(jù)之后使用$nextTick ，則可以在回調(diào)中獲取更新之后的DOM

?

轉(zhuǎn)載于:https://www.cnblogs.com/ming-yuan/p/10036581.html

總結(jié)

以上是生活随笔為你收集整理的转载 vue的基础使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。