Vue學習 Day01

時間 2020-01-01

標籤 vue 學習 day01 day 简体版

原文原文鏈接

介紹

這個系列記錄本身學習Vue的過程.html

Vue官方不推薦新手直接使用 vue-cli,因此前面這幾天都是根據官方文檔學習.vue

步驟

新建一個html文件.vue-cli

在html中導入vue.js依賴.npm

<head>
 <meta charset="utf-8">
 <title>firstvue</title>
 <!-- 開發環境版本，包含了有幫助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <!-- 生產環境版本，優化了尺寸和速度 -->
 <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
 </head>

如今就能夠照着官方的例子學習了.app

例子

聲明式渲染

數據和 DOM 創建了關聯,修改了js中data的值,DOM也會發生變化.ide

Hello Vue組件化

<div id="app">
     {{ message }}
 </div>

JS代碼：學習

var app = new Vue({
     el: '#app',
     data: {
         message: 'Hello Vue!'
     }
 })

v-bind 指令¹,做用是:鼠標停留幾秒,會有提示信息.優化

<div id="app-2">
     <span v-bind:title="message">
         鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
     </span>
 </div>

JS代碼：ui

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

條件與循環

控制元素顯示使用 v-if，seen的值決定是否顯示.

<div id="app-3">
     <p v-if="seen">如今你看到我了</p>
 </div>

JS代碼：

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

循環使用v-for ,在控制檯輸入app4.todos.push({text: 'push text'}),列表添加一個項

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

JS代碼：

var app4 = new Vue({
     el: "#app-4",
     data: {
         todos: [
             { text: '學習Vue' },
             { text: '整個項目' },
             { text: '完成畢設' }
         ]
     }
 })

處理用戶輸入

v-on指令添加一個事件監聽器

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反轉消息</button>
</div>

JS代碼：

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

v-model 輕鬆實現表單輸入和應用狀態之間的雙向綁定.

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

JS代碼：

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

組件化應用構建

組件系統是 Vue 的另外一個重要概念，由於它是一種抽象，容許咱們使用小型、獨立和一般可複用的組件構建大型應用。

<div id="app-7">
    <ol>
        <!--
        如今咱們爲每一個 todo-item 提供 todo 對象
        todo 對象是變量，即其內容能夠是動態的。
        咱們也須要爲每一個組件提供一個「key」，稍後再
        做詳細解釋。
        -->
        <todo-item
            v-for="item in groceryList"
            v-bind:todo="item"
            v-bind:key="item.id"
        ></todo-item>
    </ol>
</div>

JS代碼：

Vue.component('todo-item', {
    // todo-item 組件如今接受一個
    // "prop"，相似與一個自定義特性。
    // 這個prop 名爲todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '隨便其它什麼人吃的東西' }
        ]
    }
})

(假想)大型應用模板

<div id="app">
<app-nav></app-nav>
<app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
</app-view>
</div>

源碼下載

https://www.lanzous.com/b00t79wkd
密碼:Vue01

註解

el：對應div中的id

data：存放數據

methods: 存放方法

指令是Vue提供的特殊特性,指令帶有前綴 v-.↩

1. Vue學習筆記day01總結
2. Python學習 day01
3. Linux學習day01
4. JAVA學習Day01
5. JAVA學習DAY01
6. Django學習 day01
7. jQuery學習day01
8. Git學習 --day01
9. JavaEE學習 day01
10. SpringCloud學習day01
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。