當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue2.0基础学习（1）

發(fā)布時間：2025/3/20 vue 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue2.0基础学习（1）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?（一）　　內(nèi)部指令

第一節(jié)：準備工作

　　1.引入Vue.js(官方網(wǎng)站：https://cn.vuejs.org/v2/guide/installation.html)

　　　　·在開發(fā)時請用開發(fā)版本，遇到常見錯誤它會給出友好的警告

　　2.使用?live-server

　　　　全局安裝

　　　　　　npm install live-server -g?

　　　　在項目目錄中打開　

?　　　??live-server?

　　3.第一個代碼　　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>MyVue</title> 8 <script src="../assets/js/vue.js"></script> 9 </head> 10 11 <body> 12 <h1>Hello World</h1> 13 <div id="app"> 14 <h2>{{message}}</h2> 15 </div> 16 17 <script> 18 var vm = new Vue({ 19 el: '#app', 20 data: { 21 message: 'my first vue demo' 22 } 23 }) 24 </script> 25 </body> 26 27 </html>

第二節(jié)：?v-if? v-show 指令　?

　　1. v-if　

　　　　根據(jù)表達式的值的真假條件渲染元素

　　2.? v-show

?　　　　根據(jù)表達式之真假值，切換元素的?display?CSS 屬性

?　　3. v-if 和 v-show 的區(qū)別

　　　　·?v-if：判斷是否加載，可以減輕服務(wù)器的壓力，在需要時加載。

　　　　·?v-show：調(diào)整css dispaly屬性，可以使客戶端操作更加流暢。

第三節(jié)：?for 指令

　　v-for指令是循環(huán)渲染一組data中的數(shù)組，v-for 指令需要以 item in items 形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。

　　1.基本用法

　　　　html

?　　　　js　?

1 var app=new Vue({ 2 el:'#app', 3 data:{ 4 items:[11,22,10,41,55,60,30,44] 5 } 6 })

　　2. 排序

　　　　我們已經(jīng)順利的輸出了我們定義的數(shù)組，但是我需要在輸出之前給數(shù)組排個序，那我們就用到了Vue的computed:屬性。

computed: {sortItems: function () {return this.items.sort(sorNumber); } }

function sorNumber(a, b) {return a - b; }

//數(shù)組對象方法排序:function sortByKey(array,key){return array.sort(function(a,b){var x=a[key];var y=b[key];return ((x<y)?-1:((x>y)?1:0));});}

?我們在computed里新聲明了一個對象sortItems，如果不重新聲明會污染原來的數(shù)據(jù)源　　

第四節(jié)：v-text　　v-html?

　　v-text:

　　　　當(dāng)我們網(wǎng)速很慢或者javascript出錯時，會暴露我們的{{xxx}}。使用v-text可以解決這個弊端。

???　　v-html：

　　　　如果在javascript中寫有html標簽，用v-text是輸出不出來的，這時候我們就需要用v-html標簽了。

?　　　　注意：在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為容易導(dǎo)致?XSS 攻擊。只在可信內(nèi)容上使用?v-html，永不用在用戶提交的內(nèi)容上。

第五節(jié)： v-on 綁定事件監(jiān)聽器

　　縮寫?：@

　　參數(shù)：event

　　在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)。如果使用內(nèi)聯(lián)語句，語句可以訪問一個?$event?屬性：v-on:click="handle('ok', $event)"

<button v-on:click="doThis"></button>  <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>  <button v-on:click="doThat('hello', $event)"></button>  <button @click="doThis"></button>  <button @click.stop="doThis"></button>  <button @click.prevent="doThis"></button>  <form @submit.prevent></form>  <button @click.stop.prevent="doThis"></button>  <input @keyup.enter="onEnter">  <input @keyup.13="onEnter">  <button v-on:click.once="doThis"></button>

第六節(jié)：v-model 指令

　　在表單控件或者組件上創(chuàng)建雙向綁定。

<input type="text" v-model="inputMsg"> <p>{{inputMsg}}</p>

???

第7節(jié)：v-bind 指令

　　縮寫：:

　　動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達式

<img v-bind:src="imageSrc">  <img :src="imageSrc">  <img :src="'/path/to/images/' + fileName">  <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]">  <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div>  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>  <div v-bind:text-content.prop="text"></div>  <my-component :prop="someThing"></my-component>  <child-component v-bind="$props"></child-component>  <svg><a :xlink:special="foo"></a></svg>

???

第八節(jié)：其他內(nèi)部指令

　　v-pre：在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了。

　　v-cloak：在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用

?　? v-once：在第一次DOM時進行渲染，渲染完成后視為靜態(tài)內(nèi)容，跳出以后的渲染過程。

（二）　　全局API

第1節(jié)：Vue.directive 自定義指令

　　構(gòu)造器外部用Vue提供給我們的API函數(shù)來定義新的功能。

// 注冊 Vue.directive('my-directive', {bind: function () {},inserted: function () {},update: function () {},componentUpdated: function () {},unbind: function () {} }) // 注冊 (指令函數(shù)) Vue.directive('my-directive', function () {// 這里將會被 `bind` 和 `update` 調(diào)用 }) // getter，返回已注冊的指令 var myDirective = Vue.directive('my-directive')

第2節(jié)：Vue.extend構(gòu)造器的延伸

?Vue.extend 返回的是一個“擴展實例構(gòu)造器”,也就是預(yù)設(shè)了部分選項的Vue實例構(gòu)造器。經(jīng)常服務(wù)于Vue.component用來生成組件，可以簡單理解為當(dāng)在模板中遇到該組件名稱作為標簽的自定義元素時，會自動調(diào)用“擴展實例構(gòu)造器”來生產(chǎn)組件實例，并掛載到自定義元素上。

data?選項是特例，需要注意 - 在?Vue.extend()?中它必須是函數(shù)

<div id="mount-point"></div> // 創(chuàng)建構(gòu)造器 var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',data: function () {return {firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'}} }) // 創(chuàng)建 Profile 實例，并掛載到一個元素上。 new Profile().$mount('#mount-point')

第3節(jié)：Vue.set全局操作

　　Vue.set 的作用就是在構(gòu)造器外部操作構(gòu)造器內(nèi)部的數(shù)據(jù)、屬性或者方法。

?　　一、引用構(gòu)造器外部數(shù)據(jù)：

　　　　什么是外部數(shù)據(jù)，就是不在Vue構(gòu)造器里里的data處聲明，而是在構(gòu)造器外部聲明，然后在data處引用就可以了。外部數(shù)據(jù)的加入讓程序更加靈活，我們可以在外部獲取任何想要的數(shù)據(jù)形式，然后讓data引用。

//在構(gòu)造器外部聲明數(shù)據(jù)var outData={count:1,goodName:'car' }; var app=new Vue({el:'#app',//引用外部數(shù)據(jù) data:outData })

　　二、在外部改變數(shù)據(jù)的三種方法：

　　　　1.用Vue.set改變

function add(){Vue.set(outData,'count',4);}

　　　　2.用Vue對象的方法添加

app.count++;

　　　　3.直接操作外部數(shù)據(jù)

outData.count++;

?　　三、Vue.set存在的意義

　　　　由于Javascript的限制，Vue不能自動檢測以下變動的數(shù)組。

　　　　　　（1）當(dāng)你利用索引直接設(shè)置一個項時，vue不會為我們自動更新。

　　　　　　（2）當(dāng)你修改數(shù)組的長度時，vue不會為我們自動更新。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>Vue.set 全局操作</title> </head> <body><h1>Vue.set 全局操作</h1><hr><div id="app"><ul><li v-for=" aa in arr">{{aa}}</li></ul></div><button onclick="add()">外部添加</button><script type="text/javascript">function add(){console.log("我已經(jīng)執(zhí)行了");app.arr[1]='ddd';//Vue.set(app.arr,1,'ddd'); }var outData={arr:['aaa','bbb','ccc']};var app=new Vue({el:'#app',data:outData})</script> </body> </html>

?這時我們的界面是不會自動跟新數(shù)組的，我們需要用Vue.set(app.arr,1,’ddd’)來設(shè)置改變，vue才會給我們自動更新，這就是Vue.set存在的意義。

第4節(jié)：Vue的生命周期（鉤子函數(shù)）

　　Vue一共有10個生命周期函數(shù)，我們可以利用這些函數(shù)在vue的每個階段都進行操作數(shù)據(jù)或者改變內(nèi)容。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>構(gòu)造器的聲明周期</title> </head> <body><h1>構(gòu)造器的聲明周期</h1><hr><div id="app">{{message}}<p><button @click="plus">加分</button></p></div><button onclick="app.$destroy()">銷毀</button><script type="text/javascript">var app=new Vue({el:'#app',data:{message:1},methods:{plus:function(){this.message ++;}},beforeCreate:function(){console.log('1-beforeCreate 初始化之后');},created:function(){console.log('2-created 創(chuàng)建完成');},beforeMount:function(){console.log('3-beforeMount 掛載之前');},mounted:function(){console.log('4-mounted 被創(chuàng)建');},beforeUpdate:function(){console.log('5-beforeUpdate 數(shù)據(jù)更新前');},updated:function(){console.log('6-updated 被更新后');},activated:function(){console.log('7-activated');},deactivated:function(){console.log('8-deactivated');},beforeDestroy:function(){console.log('9-beforeDestroy 銷毀之前');},destroyed:function(){console.log('10-destroyed 銷毀之后')}})</script> </body> </html>

第5節(jié)：Template 制作模版

　　一、直接寫在選項里的模板

　　　　直接在構(gòu)造器里的template選項后邊編寫。這種寫法比較直觀，但是如果模板html代碼太多，不建議這么寫。　　　

var app=new Vue({el:'#app',data:{message:'hello Vue!'},template:`<h1 style="color:red">我是選項模板</h1> ` })

?　　這里需要注意的是模板的標識不是單引號和雙引號，而是，就是Tab上面的鍵。

　　二、寫在<template>標簽里的模板

　　　　這種寫法更像是在寫HTML代碼，就算不會寫Vue的人，也可以制作頁面。?

<template id="demo2"><h2 style="color:red">我是template標簽?zāi)０?span style="color:#0000ff;"></h2></template><script type="text/javascript">var app=new Vue({el:'#app',data:{message:'hello Vue!'},template:'#demo2'})</script>

　　三、寫在<script>標簽里的模板

　　　　這種寫模板的方法，可以讓模板文件從外部引入。

第6節(jié)：Component 組件

　　一、全局化注冊組件

　　　　全局化就是在構(gòu)造器的外部用Vue.component來注冊，我們現(xiàn)在就注冊一個<myComponent></myComponent>的組件來體驗一下。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>component-1</title> </head> <body><h1>component-1</h1><hr><div id="app"><myComponent></myComponent></div><script type="text/javascript">//注冊全局組件 Vue.component('myComponent',{template:`<div style="color:red;">全局化注冊的myComponent標簽</div>` })var app=new Vue({el:'#app',data:{}})</script> </body> </html>

?我們在javascript里注冊了一個組件，在HTML中調(diào)用了他。這就是最簡單的一個組件的編寫方法，并且它可以放到多個構(gòu)造器的作用域里。

　　二、局部注冊組件

　　　　局部注冊組件和全局注冊組件是向?qū)?yīng)的，局部注冊的組件只能在組件注冊的作用域里進行使用，其他作用域使用無效。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>component-1</title> </head> <body><h1>component-1</h1><hr><div id="app"><panda></panda></div><script type="text/javascript">var app=new Vue({el:'#app',components:{"panda":{template:`<div style="color:red;">局部注冊的panda標簽</div>` }}})</script> </body> </html>

??　　從代碼中可以看出局部注冊其實就是寫在構(gòu)造器里，但是需要注意的是，構(gòu)造器里的components 是加s的，而全局注冊是不加s的。

　　三、組件和指令的區(qū)別

?　　　　組件注冊的是一個標簽，而指令注冊的是已有標簽里的一個屬性。在實際開發(fā)中我們還是用組件比較多，指令用的比較少。因為指令看起來封裝的沒那么好。

第7節(jié)：Component 組件props 屬性設(shè)置

　　props選項就是設(shè)置和獲取標簽上的屬性值。

　　一、定義屬性并獲取屬性值

　　　　定義屬性我們需要用props選項，加上數(shù)組形式的屬性名稱，例如：props:[‘here’]。在組件的模板里讀出屬性值只需要用插值的形式，例如{{ here }}。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>component-2</title> </head> <body><h1>component-2</h1><hr><div id="app"><panda here="China"></panda></div><script type="text/javascript">var app=new Vue({el:'#app',components:{"panda":{template:`<div style="color:red;">Panda from {{ here }}.</div>`, props:['here']}}})</script> </body> </html>

上面的代碼定義了panda的組件，并用props設(shè)置了here的屬性值，在here屬性值里傳遞了China給組件。

　　最后輸出的結(jié)果是紅色字體的Panda from China.

　　二、屬性中帶’-‘的處理方式

我們在寫屬性時經(jīng)常會加入’-‘來進行分詞，比如：<panda???from-here=”China”></panda>，那這時我們在props里如果寫成props:[‘form-here’]是錯誤的，我們必須用小駝峰式寫法props:[‘formHere’]。

html文件：?

?javascript文件：

var app=new Vue({el:'#app',components:{"panda":{template:`<div style="color:red;">Panda from {{ here }}.</div>`,props:['fromHere']}}})

PS：因為這里有坑，所以還是少用-為好。

　　三、在構(gòu)造器里向組件中傳值

　　把構(gòu)造器中data的值傳遞給組件，我們只要進行綁定就可以了。就是我們第一季學(xué)的v-bind:xxx.

　　html文件：

　　javascript文件：

var app=new Vue({el:'#app',data:{message:'SiChuan'},components:{"panda":{template:`<div style="color:red;">Panda from {{ here }}.</div>`,props:['here']}}})

轉(zhuǎn)載于:https://www.cnblogs.com/lshilin/p/7692762.html

總結(jié)

以上是生活随笔為你收集整理的vue2.0基础学习（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

基础

上一篇： 2016级算法第一次练习赛-E.Alvi
下一篇： MATLAB化坐标系（转载的）