Vue簡介
Vue是js的一個庫,類似于JQuery
Vue當前版本已經發展到2.X版本,并且現在市面上基本使用的都是2.X版本.
現在一些知名的互聯網公司,例如滴滴,美團等,都在大量的使用vue
本段內容主要講解Vue的基本知識和指令,了解vue的基本概念
注意: Vue 不支持 IE8 及以下版本
vue中文官網https://cn.vuejs.org/
Vue的使用
直接用 script 引入
<script src="Vue.js"></script>
下載地址
開發版本：https://vuejs.org/js/vue.js 包含完整的警告和調試模式
生產版本：https://vuejs.org/js/vue.min.js 刪除了警告
創建第一個Vue實例
<div id="root"></div>var vm = new Vue({ // 綁定DOM元素,指定控制范圍 接管頁面當中的指定元素el:"#root",// 設置控制的數據data:{msg:"你好",}
})
在使用vue時會發現我們沒有任何DOM的操作,都是對數據的操作
掛載點,模板和Vue實例之間的關系
掛載點: <div id="root"></div> vue實例的掛載點 vue只會處理掛載點里面的內容
模板: 掛載點里面的內容我們稱之為模板內容可以將模板寫到vue的實例當中 通過template屬性
實例:new Vue({})
實例當中只需要指定掛載點,
vue會自動的結合模板和數據,生成要展示的內容
最后將內容放到掛載點當中
模板語法和指令
數據綁定最常見的形式就是使用{{...}}（雙大括號）的文本插值：
<span>{{ msg }}</span>
data屬性里可以存放數字 字符串 數組 對象
文本指令
v-text="變量名" 只能操作字符串 不能解析標簽
v-html="變量名" 可以解析標簽 用于輸出html代碼
屬性操作
v-bind: 屬性操作
<img v-bind="filename" alt="">
data:{filename:"圖片路徑"
}
class類名操作：
1.數組語法
<div v-bind:class="[activeclass]"></div>
data:{activeclass:active
}
2.對象語法
<div v-bind:class="{active:isActive}"></div>
data:{isActive:true
}
<div v-bind:class="obj"></div>
data:{obj:{active:true}
}
內聯樣式綁定：
v-style: :style:style={color:c,backgroundColor:d} 設置單個注意:雙拼詞將-去掉第二個單詞首字母大寫:style="obj"
表單值的操作 實現數據雙向綁定
v-model
循環
v-for="value in arr"
v-for="(val,key) in object"
事件
v-on:click="函數名"簡寫:@click="函數名"
mouseover
mouseout
mousedown// 在vue實例中添加methods屬性
methods:{show:function(){// alert('1')}
}事件修飾符
.stop 阻止冒泡
.prevent 阻止默認行為
顯示隱藏
v-show="true/false"
條件
v-if
v-else
v-else-if
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。
Vue中的計算屬性和偵聽器
// 計算屬性
computed:{fullname:{return 變量1+變量2}
}
// 偵聽屬性
watch:{// 監聽 fullname 如果fullname的值發生變化就會執行偵聽fullname:function(){}
}
Vue-ajax
vue本身沒有ajax的方法，要使用vue實現ajax 我們需要借助插件 可以使用jquery 也可以使用 vue-resource 等vue-resource的使用
1.引入插件
2.this.$http.post(請求路徑).then(請求成功的函數,請求失敗的函數)
)
