Vue簡(jiǎn)介

Vue是js的一個(gè)庫(kù),類似于JQuery

Vue當(dāng)前版本已經(jīng)發(fā)展到2.X版本,并且現(xiàn)在市面上基本使用的都是2.X版本.

現(xiàn)在一些知名的互聯(lián)網(wǎng)公司,例如滴滴,美團(tuán)等,都在大量的使用vue

本段內(nèi)容主要講解Vue的基本知識(shí)和指令,了解vue的基本概念

注意: Vue 不支持 IE8 及以下版本

vue中文官網(wǎng)https://cn.vuejs.org/

Vue的使用

直接用 script 引入

<script src="Vue.js"></script>

下載地址

開發(fā)版本：https://vuejs.org/js/vue.js 包含完整的警告和調(diào)試模式

生產(chǎn)版本：https://vuejs.org/js/vue.min.js 刪除了警告

創(chuàng)建第一個(gè)Vue實(shí)例

<div id="root"></div>var vm = new Vue({ // 綁定DOM元素,指定控制范圍 接管頁(yè)面當(dāng)中的指定元素el:"#root",// 設(shè)置控制的數(shù)據(jù)data:{msg:"你好",} })

在使用vue時(shí)會(huì)發(fā)現(xiàn)我們沒(méi)有任何DOM的操作,都是對(duì)數(shù)據(jù)的操作

掛載點(diǎn),模板和Vue實(shí)例之間的關(guān)系

掛載點(diǎn): <div id="root"></div> vue實(shí)例的掛載點(diǎn) vue只會(huì)處理掛載點(diǎn)里面的內(nèi)容 模板: 掛載點(diǎn)里面的內(nèi)容我們稱之為模板內(nèi)容可以將模板寫到vue的實(shí)例當(dāng)中 通過(guò)template屬性 實(shí)例:new Vue({})

實(shí)例當(dāng)中只需要指定掛載點(diǎn),
vue會(huì)自動(dòng)的結(jié)合模板和數(shù)據(jù),生成要展示的內(nèi)容
最后將內(nèi)容放到掛載點(diǎn)當(dāng)中

模板語(yǔ)法和指令

數(shù)據(jù)綁定最常見的形式就是使用{{...}}（雙大括號(hào)）的文本插值： <span>{{ msg }}</span>

data屬性里可以存放數(shù)字 字符串 數(shù)組 對(duì)象

文本指令

v-text="變量名" 只能操作字符串 不能解析標(biāo)簽 v-html="變量名" 可以解析標(biāo)簽 用于輸出html代碼

屬性操作

v-bind: 屬性操作

<img v-bind="filename" alt=""> data:{filename:"圖片路徑" }

class類名操作：

1.數(shù)組語(yǔ)法 <div v-bind:class="[activeclass]"></div> data:{activeclass:active } 2.對(duì)象語(yǔ)法 <div v-bind:class="{active:isActive}"></div> data:{isActive:true } <div v-bind:class="obj"></div> data:{obj:{active:true} }

內(nèi)聯(lián)樣式綁定：

v-style: :style:style={color:c,backgroundColor:d} 設(shè)置單個(gè)注意:雙拼詞將-去掉第二個(gè)單詞首字母大寫:style="obj"

表單值的操作 實(shí)現(xiàn)數(shù)據(jù)雙向綁定

v-model

循環(huán)

v-for="value in arr" v-for="(val,key) in object"

事件

v-on:click="函數(shù)名"簡(jiǎn)寫:@click="函數(shù)名" mouseover mouseout mousedown// 在vue實(shí)例中添加methods屬性 methods:{show:function(){// alert('1')} }事件修飾符 .stop 阻止冒泡 .prevent 阻止默認(rèn)行為

顯示隱藏

v-show="true/false"

條件

v-if v-else v-else-if

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。

Vue中的計(jì)算屬性和偵聽器

// 計(jì)算屬性 computed:{fullname:{return 變量1+變量2} } // 偵聽屬性 watch:{// 監(jiān)聽 fullname 如果fullname的值發(fā)生變化就會(huì)執(zhí)行偵聽fullname:function(){} }

Vue-ajax

vue本身沒(méi)有ajax的方法，要使用vue實(shí)現(xiàn)ajax 我們需要借助插件 可以使用jquery 也可以使用 vue-resource 等vue-resource的使用 1.引入插件 2.this.$http.post(請(qǐng)求路徑).then(請(qǐng)求成功的函數(shù),請(qǐng)求失敗的函數(shù))

總結(jié)

以上是生活随笔為你收集整理的Vue相关知识总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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