操穴视频免费,伊人精品国产

vue特性與其他框架的區(qū)別

關(guān)于vue

vue是一個簡潔且輕量化為主要特點的前端MVVM開發(fā)框架，vue使用組件化開發(fā)的范式，組件之間可以做到高度解耦，數(shù)據(jù)的綁定、更新、動態(tài)界面等特性也一氣呵成。

特性

輕量----很小并不依賴其他基礎(chǔ)庫
數(shù)據(jù)綁定----MVVM
指令----指令控制DOM
插件化----vue-resourse、vue-cli等

vue與其他框架的區(qū)別

對比angular

都支持指令，支持過濾器，支持雙向綁定，都不支持低端瀏覽器
angular學(xué)習(xí)成本高，性能上，依賴對數(shù)據(jù)做臟檢查，watcher越多越慢。

對比react

react采用特殊的jsx語法，vue推崇編寫.vue特殊的文件格式，都需要編譯后使用
中心思想都是組件，組件實例之間可以嵌套
都支持生命周期函數(shù)
recat依賴虛擬DOM，vue使用的是DOM模板
react采用的虛擬DOM會對渲染出來的結(jié)果進(jìn)行臟檢查， vue采用的是數(shù)據(jù)劫持，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

vue實例

image.png

先上代碼：

<div id="app">//id
    {{ message }}//接受js表達(dá)式的值（ps：js語句是一種行為，不會產(chǎn)生值；js表達(dá)式會產(chǎn)生一個值）
</div>
<script>
  var app = new Vue({//new一個實例
        el: '#app',//連接DOM
        data: {
            message: 'Hello Vue!'//初始數(shù)據(jù)
        }
  })
</script>

關(guān)于構(gòu)造器

每個vue.js都是通過構(gòu)造函數(shù)vue創(chuàng)建一個vue的根實例啟動的
(在實例化vue時，需要傳入一個選項對象，他可以包括數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項。)

var vm = new Vue({
      // 選項(數(shù)據(jù)、模板、掛載元素、方法、生命周期等)
})

可以擴(kuò)展vue構(gòu)造器，從而預(yù)定選項創(chuàng)建可復(fù)用的組件構(gòu)造器(后期詳細(xì)解釋)

var MyComponent=Vue.extend({
          //擴(kuò)展選項
})
//所有的MyComponent 實例都將以預(yù)定義的擴(kuò)展選項被創(chuàng)建
var MyComponent=new MyComponent();
//所有的 Vue.js 組件其實都是被擴(kuò)展的 Vue 實例。

構(gòu)造器屬性與方法

每個vue實例都會代理其data對象里的所有的屬性

var data={a:1}
var vm=new Vue({
     data:data
})
vm.a===data.a      //true
//設(shè)置屬性也會影響到原始數(shù)據(jù)
vm.a=2;
console.log(data.a);      //2

除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。這些屬性與方法都有前綴 $:

vm.$data===data ---//true vm上的數(shù)據(jù)
vm.$el===document.getElementById('example')---// 當(dāng)前的el元素
vm. $set ---后加的屬性實現(xiàn)響應(yīng)式變化(因為如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。) eg: vm.$ set(data,'sex', '男');
vm.$options ---//vm上的所有的屬性
vm.$nextTick(()=>{console.log(vm)})---//異步方法，等待dom完成后可以操作dom，（每次數(shù)據(jù)改變之后想要獲取操作DOM，都可以使用nextTick）。
vm.$watch---是一個實例方法監(jiān)聽函數(shù)
vm.$refs ---//關(guān)聯(lián)ref屬性的DOM元素,可以操作這個關(guān)聯(lián)的元素

<div id='example'>
  <p ref='mydom'>{{msg}}</p>  
  <p ref='mydom'>{{msg}}</p>
  <div ref='mydiv' v-for="a in arr">{{a}}</div >
</div>
........
var data={msg:1,arr:[1,2,3]}
    var vm=new Vue({
        el:'#example',
        data:data,
        mounted(){
          //如果dom元素不是通過v-for循環(huán)出來的，只能獲取一個，通過-for循環(huán)出來的可以獲取多個
          console.log(this.$refs.mydom)//獲取一個p
          console.log(this.$refs.mydiv)//獲取多個div
        }
    })
     vm.$data===data    ---//true  vm上的數(shù)據(jù)
     vm.$el===document.getElementById('example')---// 當(dāng)前的el元素
     vm.$set ---后加的屬性實現(xiàn)響應(yīng)式變化(因為如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。) eg: vm.$set(data,'sex', '男');
     vm.$options  ---//vm上的所有的屬性
     vm.$nextTick(()=>{console.log(vm)})---//異步方法，等待dom完成后可以操作dom，（每次數(shù)據(jù)改變之后想 要獲取操作DOM，都可以使用nextTick）。
     vm.$watch---是一個實例方法 監(jiān)聽函數(shù)
     vm.$refs   ---//關(guān)聯(lián)ref屬性的DOM元素,可以操作這個關(guān)聯(lián)的元素

$watch是一個實例方法監(jiān)聽函數(shù)

vm.$watch('a',function(newVal,oldVal){
        //這個回調(diào)會在`vm.a`改變后調(diào)用
    })

注：不要在實例屬性或者回調(diào)函數(shù)中（如 vm.$watch('a', newVal => this.myMethod())）使用箭頭函數(shù)。因為箭頭函數(shù)綁定父上下文，所以 this 不會像預(yù)想的一樣是 Vue 實例，而是 this.myMethod 未被定義。

vue模板

文本 : {{}}---Mustache” 語法

數(shù)據(jù)綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值
<span>Message: {{ msg }}</span>
綁定的數(shù)據(jù)對象上 msg 屬性發(fā)生了改變，插值處的內(nèi)容都會更新。
<span v-once> v-once屬性會讓元素里邊的值永遠(yuǎn)不會改變{{ msg }}</span>

純html : v-html='數(shù)據(jù)'

雙大括號會將數(shù)據(jù)解釋為純文本，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令
<div v-html="rawHtml"></div>
被插入的內(nèi)容都會被當(dāng)做 HTML —— 數(shù)據(jù)綁定會被忽略

屬性： v-bind:propName='數(shù)據(jù)'

Mustache 不能在 HTML 屬性中使用，應(yīng)使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>

數(shù)據(jù)可以使用js表達(dá)式加工生成

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

vue指令

是帶有v-前綴的特殊屬性。指令屬性的值預(yù)期是單一js表達(dá)式。
指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時相應(yīng)的將某些行為應(yīng)用到DOM上。

參數(shù):
一些指令能接受一個參數(shù) 在指令后以冒號指明，例如，v-bind指令被用來響應(yīng)的更新HTML的屬性：

<a v-bind:href='url'></a>
<a v-on:click="doSomething">

修飾符
修飾符是以半角句號 . 指明的特殊后綴，用于指出一個指令應(yīng)該以特殊方式綁定。例如：prevent，stop，capture，self，once，

.prevent修飾符告訴v-on指令對于觸發(fā)事件調(diào)用 event.preventDefault();
<form v-on:submit.prevent='onSubmit'>

v-if 顯示隱藏

<div id="app-3">
    <p v-if="seen">現(xiàn)在你看到我了1</p>
    <p v-else>現(xiàn)在你看到我了2</p>
</div>

var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })

template標(biāo)簽的使用

image.png

v-show (狀態(tài)一直改變性能強(qiáng)于v-if)

<div id="app-3">
    <p v-show="seen">現(xiàn)在你看到我了</p>
</div>

var app3 = new Vue({
        el: '#app-3',
        data: {
            seen: true
        }
    })

v-for 循環(huán)

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}  //渲染每一個text 
        </li>
    </ol>
</div>

var app4 = new Vue({
        el: '#app-4',
        data: {
            todos: [
                { text: '學(xué)習(xí) JavaScript' },
                { text: '學(xué)習(xí) Vue' },
                { text: '整個牛項目' }
            ]
        }
    })

v-model：雙向綁定

<div id="app-3">
    <p>{{ text}}</p>
    <input v-model="text">
</div>

var app3 = new Vue({
        el: '#app-3',
        data: {
            text: 'hello'
        }
    })

v-text='data' 相當(dāng)于 {{data}}

v-html 相當(dāng)于可以渲染DOM的 v-text

v-bind 綁定屬性（可縮寫為 :屬性名=' data '）

<div id="app-2">
  <span v-bind:title="message">//添加title屬性(<span :title="message">)
    鼠標(biāo)懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
  </span>
</div>

var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '頁面加載于 ' + new Date()
        }
    })

v-on綁定事件（可縮寫為 @事件名=" 函數(shù)名 "）

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button>
    //縮寫為 <button @click="reverseMessage">逆轉(zhuǎn)消息</button>
</div>

var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

計算屬性computed

先貼個示例

<div id="demo">{{ fullName }}</div>
//js代碼
<script>
var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar'
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
</script>

計算屬性的緩存和 methods的比較

計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值（有緩存），相比methods節(jié)約了性能。
這就意味著只要 firstName,lastName還沒有發(fā)生改變，多次訪問 fullName計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

計算屬性和 Watched屬性的比較

當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時，你很容易濫用 watch。
通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調(diào)。

計算屬性默認(rèn)只擁有g(shù)etter方法，但是可以自定義一個setter方法。

computed: {（最大的特點：不支持異步，如果需要異步執(zhí)行要用watch）
        fullName: {
          // getter  監(jiān)聽獲取的回調(diào)
          get: function () {
            return this.firstName + ' ' + this.lastName
          },
          // setter  監(jiān)聽設(shè)置的回調(diào)（給別人賦值，自身沒有效果，所以一般不用set函數(shù)）
          set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }
      }

觀察者屬性watch（數(shù)據(jù)不變不觸發(fā)，能異步，但是性能不及computed，一次只能監(jiān)聽一個數(shù)據(jù)的變動）

通過watch屬性可以手動觀察Vue實例上的數(shù)據(jù)變動，當(dāng)然也可以調(diào)用實例上的vm.$watch達(dá)到相同的目的。
使用watch屬性的靈活性在于，當(dāng)監(jiān)測到數(shù)據(jù)變化的時候，可以做一些設(shè)置中間狀態(tài)之類的過渡處理。

var watchExampleVM = new Vue({
    el: "#watch-example",
    data: {
      question: "",
      answer: "I cannot give you an answer until you ask a question!"
    },
    watch: {
      // 如果question發(fā)生改變，該函數(shù)就會運行
      question: function (newQuestion) {
        this.answer = "Waiting for you to stop typing..."
        this.getAnswer()
      }
    },
})

watch只能監(jiān)控對象的一層數(shù)據(jù)，不能深層監(jiān)控

解決辦法

watch:{
  data:{//深度監(jiān)控的數(shù)據(jù)
    handler(){//默認(rèn)寫成函數(shù)，就相當(dāng)于默認(rèn)寫了個handler

    },deep:true
  }
}

過濾器（vue2.0已經(jīng)把過濾器刪除需要自己實現(xiàn)）

實現(xiàn)方法：https://blog.csdn.net/dream_broken/article/details/73481046

過濾器可以放在兩個地方：mustache 插值和 v-bind 表達(dá)式。

    <!-- in mustaches -->
    {{ message | capitalize }}
    <!-- in v-bind -->
    <div v-bind:id="rawId | formatId"></div>

內(nèi)置過濾器

capitalize用于將表達(dá)式中首字母轉(zhuǎn)換為大寫形式

{{'name'|capitalize}}--->'Name'

uppercase將表達(dá)式中所有的字母轉(zhuǎn)換為大寫形式

{{'name'|uppercase}}--->'NAME'

lowercase將表達(dá)式中所有的字母轉(zhuǎn)換為小寫形式

{{'NAME'|lowercase}}--->'name'

json 相當(dāng)于JSON.stringify 后邊可以跟一個數(shù)字，表示json字符串首行縮進(jìn)的個數(shù)

data:
  obj:{name:'aa',age:'bb'}
{{obj|json 4}}
//輸出
{    'name':    'aa',    'age':    'bb'}

*limitBy 限制數(shù)組為開始的前N個元素

//只顯示開始的前10個元素
<div v-for='item in items | limitBy 10'></div>
//只顯示第5到15個元素
<div v-for='item in items | limitBy 10  5'></div>

filterBy

//只顯示包含hello字符串的item
<div v-for='item in items | filterBy "hello" '></div>

orderBy返回排序后的數(shù)組 >0為升序 <0為降序

//升序排列
<div v-for='item in items | orderBy order>0'></div>

currency過濾器 : 將輸入的數(shù)字轉(zhuǎn)換成現(xiàn)金的過濾器。可以跟上貨幣符號（默認(rèn)$）和保留的小數(shù)位（默認(rèn)2）。

<li v-for="product in products">
      {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

自定義過濾器

定義一個全局的自定義過濾器，需要使用Vue.filter()構(gòu)造器。這個構(gòu)造器需要兩個參數(shù)。

Vue.filter() 
1.filterId: 過濾器ID，用來做為你的過濾器的唯一標(biāo)識；
2.filter function: 過濾器函數(shù)，用一個function來接收一個參數(shù)，
之后再將接收到的參數(shù)格式化為想要的數(shù)據(jù)結(jié)果。

定義一個filter

Vue.filter( 'discount' , function(value,discount) {
        return value  * ( discount / 100 ) ;
  });

使用

<ul>
      <li v-for="product in products">
           {{ product.name | capitalize }} - {{ product.price | discount 25 | currency }}
      </li>
</ul>

或者

let vm=new Vue({
  el:'#app',
  filters:{//自定義過濾器
    toFixed(input,param1){//這里的this指向window
      return input.toFixed(param1);//input代表的是管道符‘|’前面的內(nèi)容，param1代表的是toFixed中傳遞的參數(shù)
    }
  }
})

使用還是用豎線
{{ product.price| toFixed(2)}}//保留兩位小數(shù)

關(guān)于樣式操作

class

對象語法

我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：

<div v-bind:class="{ active: isActive }"></div>

v-bind:class 指令也可以與普通的 class 屬性共存

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data：

data: {
  isActive: true,
  hasError: false
}

結(jié)果渲染為：

<div class="static active"></div>

當(dāng) isActive 或者 hasError 變化時，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 true，class 列表將變?yōu)?"static active text-danger"。

綁定的數(shù)據(jù)對象不必內(nèi)聯(lián)定義在模板里：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

數(shù)組語法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為

<div class="active text-danger"></div>

用三元表達(dá)式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

style

對象語法

div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接綁定到一個樣式對象

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同樣的，對象語法常常結(jié)合返回對象的計算屬性使用。

數(shù)組語法

v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data: {
 baseStyles: {
   color: 'red',
   fontSize: '13px'
 },
 overridingStyles:{
   background:'#ccc',
 }
}

自動添加前綴
當(dāng) v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。

事件

一般寫法---------------- v-on:click=function

簡寫------------------- @click=''

事件對象------------------ @click=show($event);

事件冒泡阻止冒泡 -----------1）ev.cancelBubble=true;=2)@click.stop 推薦

默認(rèn)行為-----------阻止默認(rèn)行為1)ev.preventDefault() 2)@contextmenu.prevent 推薦

鍵盤類的事件

@keydown $event  ev.keyCode
回車
@keyup.enter
@keyup.13
上下左右
@keyup/keydown.left/right/up/down

method配置

注意事項

methods重定義的this始終指向Vue實例
與事件綁定的方法支持參數(shù)event即原生DOM事件的傳入
方法用在普通元素上，只能監(jiān)聽原生DOM事件，用在自定義元素組件上，也可以監(jiān)聽子組件觸發(fā)的自定義事件

$event的使用

<button @click='say("hello",$event)'>submit</button>

method:{
  say:function(msg,event){
    console.log(msg);
    event.preventDefault();
  }

}

修飾符

阻止默認(rèn)行為prevent

<button @submit.prevent='submit("hello",$event)'>submit</button>

阻止事件冒泡stop

<button @submit.stop='submit("hello",$event)'>submit</button>

捕獲模式capture

<button @submit.capture='submit("hello",$event)'>submit</button>

事件只在該元素本身觸發(fā)時執(zhí)行self

<button @submit.self='submit("hello",$event)'>submit</button>

事件的修飾符可以串聯(lián)使用

<button @click.stop.prevent='doSomething'>submit</button>

鍵盤事件

<input @keyup.enter='submit'>//enter事件

<input @keyup.tap='submit'>//tap事件

<input @keyup.up='submit'>//向上up事件

<input @keyup.delete='submit'>//delete事件

<input @keyup.space='submit'>//space空格事件

可參考文章：
http://www.itdecent.cn/p/7f86d0e744be?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue2基礎(chǔ)教程

vue2基礎(chǔ)教程

vue特性與其他框架的區(qū)別

vue實例

關(guān)于構(gòu)造器

構(gòu)造器屬性與方法

vue模板

vue指令

計算屬性computed

觀察者屬性watch（數(shù)據(jù)不變不觸發(fā)，能異步，但是性能不及computed，一次只能監(jiān)聽一個數(shù)據(jù)的變動）

過濾器（vue2.0已經(jīng)把過濾器刪除需要自己實現(xiàn)）

關(guān)于樣式操作

對象語法

數(shù)組語法

對象語法

數(shù)組語法

事件

method配置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue2基礎(chǔ)教程

vue特性與其他框架的區(qū)別

vue實例

關(guān)于構(gòu)造器

構(gòu)造器屬性與方法

vue模板

vue指令

計算屬性computed

觀察者屬性watch（數(shù)據(jù)不變不觸發(fā)，能異步，但是性能不及computed，一次只能監(jiān)聽一個數(shù)據(jù)的變動）

過濾器（vue2.0已經(jīng)把過濾器刪除需要自己實現(xiàn)）

關(guān)于樣式操作

對象語法

數(shù)組語法

對象語法

數(shù)組語法

事件

method配置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

觀察者屬性watch（數(shù)據(jù)不變不觸發(fā)，能異步，但是性能不及computed，一次只能監(jiān)聽一個數(shù)據(jù)的變動）