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(請求成功的函數,請求失敗的函數)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。