Vue.js實戰 · 從初識到計算屬性

什麼是Vue.js

簡單小巧的核心

Vue.js壓縮後很小，隻有17KB

漸進式技術棧

可以一步一步地、階段性地來使用Vue.js，隻使用自己現階段需要的，不必一開始就使用它所有的東西

MVVM（Model-View-ViewModel）模式

由MVC模式衍生而來

視圖層變化時，自動更新到視圖模型，反之亦然，兩者之間通過雙向資料綁定建立聯系

使用Vue.js

傳統的前端開發模式

<code>jQuery</code>+<code>RequireJS/SeaJS</code>+<code>artTemplate/doT</code>+<code>Gulp/Grunt</code>

Vue.js的開發模式

1.引入Vue.js

自動識别最新的穩定版的Vue.js

或者指定某個具體的版本的Vue.js

還可以将代碼下載下傳下來，通過自己本地的路徑來引用

2.建立Vue執行個體

<!doctype html>

<html>

<head>

<title>第一個Vue應用</title>

</head>

<body>

<h1>{{textcontent}}</h1>

</div>

var app = new Vue({

el:'#app', //或者document.getElementById("app")????

data:{ //????

textcontent:''

}

})

</script>

</body>

</html>

????<code>el</code>用于指定頁面中的一個DOM元素挂載Vue執行個體。挂載後，可以通過'$'來通路該元素（注：Vue的執行個體屬性和方法以'$'開頭）

el:'#app',

data:{

a:2

console.log(app.$el);

????<code>data</code>用于聲明需要雙向綁定的資料。可以通過Vue執行個體本身來通路；除了顯示地聲明資料以外，還可以指向一個變量

console.log(app.a); //2

<pre><code>var mydata = {

a:3

var app2 = new Vue({

data:mydata

console.log(app2.a); //3

//因為是雙向資料綁定，是以無論是修改屬性還是修改原資料，都會相應地改變

app2.a = 4;

console.log(mydata.a); //4

mydata.a = 5;

console.log(app2.a); //5

</code></pre>

生命周期

Vue執行個體建立時會經曆一系列初始化過程，這其中會調用相應的<code>生命周期鈎子</code>（類似于jQuery中的ready()），利用這些鈎子我們可以選擇時機執行我們的業務邏輯，常用的鈎子有:

(1)<code>created</code> 執行個體建立完後調用

(2)<code>mounted</code> el挂載到執行個體上後調用

(3)<code>beforeDestroy</code> 執行個體銷毀之前調用

這些鈎子與<code>el</code>和<code>data</code>類型，作為選項寫入Vue執行個體内，鈎子的<code>this</code>指向調用它的Vue執行個體

el:document.getElementById('#app'),

created:function(){

console.log(this.a); //2

mounted:function(){

console.log(this.$el); //<div id='app'></div>

插值、表達式

使用'<code>{{}}</code>'來表達<code>文本插值</code>，會自動将雙向綁定的資料實時顯示出來

textcontent:'《實戰Vue.js》'

例????顯示目前時間

<title>顯示目前時間</title>

date:new Date()

var _this = this; //聲明一個變量指向Vue執行個體this,保證作用域一緻

thi.timer = setInterval(function(){

_this.date = new Date(); //修改date

},1000);

beforeDestroy:function(){

if(this.timer){

clearInterval(this.timer); //Vue執行個體銷毀前清除定時器

<code>v-html</code>輸出HTML，不解析

el:"#app",

link:'<a href="#">一個連結</a>'

<code>v-pre</code>顯示{{}}标簽，不進行替換

在'{{}}'中，除了使用簡單的綁定屬性值外，還可以使用javascript的表達式；不能使用自定義的全局變量，隻能使用<code>Vue白名單</code>内的全局變量

<title>在{{}}内使用表達式</title>

number:100,

ok:false,

text:'123,456'

過濾器

通過在'{{}}'插值尾部添加一個<code>管道符</code>（'|'），自定義一個過濾的規則，并在Vue執行個體中設定<code>filters</code>選項來進行過濾

例????對時間進行格式化處理

var padDate = function(value){

return value < 0 ? '0' + value:value;

filters:{

formatDate:function(value){

var date = new Date(value);

var year = date.getFullYear();

var month = padDate(date.getMonth()+1);

var day = padDate(date.getDate());

var hours = padDate(date.getHours());

var minutes = padDate(date.getMinutes());

var seconds = padDate(date.getSeconds());

return year+'-'+month+'-'+day+'-'+hours+':'+minutes+':'+seconds;

var _this = this;

this.timer = setInterval(function(){

_this.date = new Date();

clearInterval(this.timer);

<code>setInterval()</code>

過濾器可以多個串聯，也可以接收參數

注：過濾器常用于處理簡單的文本轉換，如果涉及複雜的資料變換，應當使用計算屬性

指令與事件

指令以'v'為字首，當其表達式的值改變時，相應地将某些行為應用到DOM上

<p v-if='show'>顯示這段文本</p>

show:false //show的值為false時會将<p>移除，反之，将<p>插入，這展現了Vue.js資料驅動的核心理念

動态更新HTML元素上的屬性

url:'https://www.baidu.com',

imgUrl:'https://imagecs.fenxianglu.cn/images/wallpaper/側卧聆聽1619012145373.jpg'

用來綁定事件監聽器

<p v-if='show'>這是一段文本</p>

<button v-on:click='handleClose'>點選隐藏文本</button>

show:true

methods:{

handleClose:function(){

this.show = false;

v-on監聽原生的DOM事件，如<code>click</code>、<code>dblclick</code>、<code>keyup</code>、<code>mousemove</code>等

表達式可以是方法名（方法寫在Vue執行個體的<code>methods</code>屬性裡），也可以直接使用内聯語句（類似内聯樣式）的形式

<button v-on:click='show=false'>點選隐藏文本</button>

可以像通路資料那樣來通過執行個體來調用方法，例如：

init:function(text){

console.log(text);

this.init('初始化時調用');

});

app.init('在Vue執行個體外部調用');

文法糖

文法糖是在不影響功能的情況下，添加某種方法以實作相同的效果，友善程式的開發（可簡單看成是簡寫）

<code>v-bind</code>簡寫為':'

<code>v-on</code>簡寫為'@'

計算屬性

當'{{}}'内的表達式過長或邏輯複雜時，難以維護，這是就需要使用計算屬性

計算屬性以函數的形式寫在Vue執行個體的<code>computed</code>屬性内

例如：

<div>

使用計算屬性改寫為下：

computed:{

reversedText:function(){

return this.text.split(',').reverse().join(',');

計算屬性還可以依賴多個Vue執行個體的資料

<title>計算屬性可以依賴于多個Vue執行個體</title>

總價：{{prices}}

package1:[

{

name:'iphone7',

price:7199,

count:2

name:'iPad',

price:2999,

count:1

package2:[

name:'apple',

price:3,

count:5

name:'banana',

price:2,

count:10

]

prices:function(){

var prices = 0;

for(var i = 0;i < this.package1.length;i++){

prices += this.package1[i].price*this.package1[i].count;

for(var i = 0;i < this.package2.length;i++){

prices += this.package2[i].price*this.package2[i].count;

return prices;

每一個計算屬性都包含一個<code>getter</code>和一個<code>setter</code>，不特殊聲明時預設使用<code>getter</code>讀取計算屬性，手動修改一個計算屬性的值時會觸發<code>setter</code>函數，執行一些自定義的操作

<title>getter與setter</title>

姓名：{{fullName}}

firstName:'Jack',

lastName:'Green'

fullName:{

//getter，用于讀取

get:function(){

return this.firstName + ' ' + this.lastName;

//setter，寫入時觸發

set:function(newValue){

var names = newValue.split(' ');

this.firstName = names[0];

this.lastName = names[names.length-1];

手動修改fullName時，setter函數會被調用，視圖同時會被更新

除了處理文本插值外，計算屬性還常用于動态地設定元素的樣式名稱class和内聯樣式style，使用元件時，也常用于動态傳遞props

計算屬性可以依賴于其他的計算屬性；而且不僅可以依賴目前Vue執行個體的資料，還可以依賴其他執行個體的資料

<title>依賴其他Vue執行個體的資料</title>

var app1 = new Vue({

el:'#app1',

el:'#app2',

return app1.text.split(',').reverse().join(',');

使用計算屬性還是methods

使用方法（在Vue執行個體内設定<code>methods</code>選項）有時也能達到與使用計算屬性（在執行個體内設定<code>computed</code>選項）相同的效果，但計算屬性是基于它的依賴緩存的，隻要依賴的資料發生變化，計算屬性就會被更新；而如果依賴不是響應式的，計算屬性也不會更新，這時應使用methods，隻要重新進行渲染，就可實作更新

now:function(){

return Date.now();

<title>點選以獲得Date.now()</title>

now:''

showNow:function(){

this.now = Date.now();

Vue.js實戰 · 從初識到計算屬性

繼續閱讀

PAT (Advanced Level) Practise 1131 Subway Map (30)

ZOJ 3938 Defuse the Bomb

CSU 1565 Word Cloud

ZOJ 3700 Ever Dream

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

ZOJ 1199 Point of Intersection

CSU 1567 Reverse Rot

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

web開發之前後端渲染

Vue $emit 子元件向父元件傳遞參數

403 Forbidden，You don't have permission to access / on this server.Forbidden

vue搭建過程及出現問題

詳解STM32單片機的堆棧