Vue.js基礎詳解

omgdog 發布于2019-08-20 19:02 / 1169人閱讀

摘要：指令帶有前綴，以表示它們是提供的特殊屬性。最后，我們需要為賦值世界舞王尼古拉斯趙四世界舞王尼古拉斯趙四初學就到這里了，相信你已經在腦子里確定了的原理的概念也已經非常清楚了，希望你能夠在學習的道路上越走越遠，最后感謝你的瀏覽。

vue.js vue介紹

Vue.js（讀音 /vju?/，類似于 view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
vue是一款簡單的mvvm（model-view-viewmodel）框架。

vue起步

vue的引入與javascript其他庫的引入相同，通過一對閉合的script標簽包裹

聲明式渲染

vue是一個允許采用簡潔的模板語法來聲明式的將數據渲染進DOM

{{msg}}

var data={
    msg:"世界舞王，尼古拉斯-趙四"
}
// model-模型  數據

var box = new Vue({
    el:"#box",
    data:data   
})
// viewmodel視圖模型 用來將數據渲染到模板上
// 用new Vue 創建一個 Vue 對象
// el：接選擇器 類選擇器，id選擇器等都可以

世界舞王，尼古拉斯-趙四

現在我們就運用聲明式渲染生成了我們第一個Vue應用。

除了給文本賦值，我們還可以利用Vue綁定DOM元素屬性


    
        鼠標懸停幾秒鐘查看此處動態綁定的提示信息！

var box = new Vue({
    el:"#box",
    data: {
        msg: "頁面加載于" + new Date().toLocaleString()
        }  
})

鼠標懸停幾秒鐘查看此處動態綁定的提示信息！

這里我們遇到點新東西。你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。簡言之，這里該指令的作用是：“將這個元素節點的 title 屬性和 Vue 實例的 msg 屬性保持一致”。
再次打開瀏覽器的 JavaScript 控制臺輸入 box.msg = "新消息"，就會再一次看到這個綁定了 title 屬性的 HTML 已經進行了更新。
Vue更多的學習指令和組件。

條件與循環

Vue控制一個DOM元素的顯示和隱藏也很簡單，只需運用指令v-if就可以了


    顯示模式

new Vue({
    el: "#box",
    data: {
        seen: true
    }
})

顯示模式

當我們將data數據里的seen更改為false時，我們會發現元素已經隱藏。

如果們需要將數據渲染到一個項目列表中，那么我們就需要使用到v-for指令


    
        
            {{ todo.text }}

new Vue({
    el: "#box",
        data: {
            todos: [
            { text: "學習 JavaScript" },
            { text: "學習 Vue" },
            { text: "整個牛項目" }
            ]
    }
})

1.學習 JavaScript
2.學習 Vue
3.整個牛項目

在控制臺里，輸入 box.todos.push({ text: "新項目" })，你會發現列表中添加了一個新項。

處理用戶事件

v-on可以綁定一個事件監聽器。


    {{ message }}

new Vue({
    el: "#box",
    data: {
        message: "Hello Vue.js!"
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split("").reverse().join("")
    }
}
})

v-model可以實現模板和數據之間的雙向綁定，我們既可以通過改變數據改變值，還可以通過改變模板內的值改變數據


    {{ message }}

new Vue({
    el: "#box",
    data: {
        message: "Hello Vue!"
    }
})

組化應用構建

組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用

首先我們需要注冊一個組件

Vue.component("EXPle", {
    template: "這是個待辦項"
})

然后我們需要為組件創建一個模板

我們可以用上面剛剛學到的v-for來為幾個不同的標簽防止不同的值
所以組件我們應當這樣

Vue.component("todo-item", {
  // todo-item 組件現在接受一個
  // "prop"，類似于一個自定義屬性
  // 這個屬性名為 todo。
  props: ["todo"],
  template: "{{ todo.text }}"
})

我們還要運用v-bind將指令穿如不同的值，所以html應當這樣修改

最后，我們需要為box賦值

var app7 = new Vue({
    el: "#box",
    data: {
    groceryList: [
    { id: 0, text: "世界舞王" },
    { id: 1, text: "尼古拉斯" },
    { id: 2, text: "趙四" }
    ]
    }
})

1.世界舞王
2.尼古拉斯
3.趙四

Vue 初學就到這里了，相信你已經在腦子里確定了Vue的原理
model-view-viewmodel的概念也已經非常清楚了，希望你能夠在學習Vue的道路上越走越遠，最后感謝你的瀏覽。

喜歡的點個贊唄！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85059.html

Vue-router(vue路由基礎詳解)

摘要：你可以在創建實例的時候，在配置中給某個路由設置名稱。如果沒有設置名字，那么默認為。 Vue.js路由(Vue-router) 安裝直接引入 vue-router下載鏈接https://unpkg.com/vue-router/... npm下載 npm install vue-router 如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：在你的文...

JasinYip 2019-08-21 16:26 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0