vue 系列文章----簡單介紹

時間 2019-12-05

標籤 vue 系列文章簡單介紹简体版

原文原文鏈接

vue以前學習過一遍，但沒有記錄博客，工做中也只是用vue進行一些頁面的渲染，今天開始把Vue複習一下，同時進階一下html

1，起步，簡單的vue例子，瞭解一下前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue1 簡單示例</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        msg: 'ssss'
    }
})
</script>
</html>

簡單例子

2，上個例子，在打開頁面加載時候，有時候會出現{{msg}}這樣的顯示，解決此問題，能夠使用v-text進行渲染，再看一個綁定渲染的例子vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 綁定</title>
</head>
<body>
    <div id="app">
        <span v-bind:title="msg">
            鼠標懸停顯示加載時間
        </span>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        msg: '頁面加載時間' + new Date()
    }
})
</script>
</html>

vue綁定實例 v

3，對於if和for控制語句，vue不只能夠綁定dom到文本數據，同時也可以控制dom結構後端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 條件與循環</title>
</head>
<body>
    <div id="app">
        <p v-if="seen">看到</p>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data:{
        seen: true
    }
})
</script>
</html>

if控制的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 條件與循環</title>
</head>
<body>
    <div id="app">
        <table>
            <tr v-for="message in msg">
                <td>{{message.text}}</td>
            <!-- <td v-for="message in msg">{{message.text}}</td> -->
            </tr>
        </table>
        <li v-for="message in msg">{{message.text}}</li>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data:{
        msg: [
            {text: 'a'},
            {text: 'b'},
            {text: 'c'}
        ]
    }
})
</script>
</html>

v-for 示例

4，使用v-on 綁定一個時間監聽器app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>綁定監聽</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverse">反轉</button>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        message: 'Vue'
    },
    methods: {
        reverse: function() {
            return this.message = this.message.split('').reverse().join('')
        }
    }
})
</script>
</html>

v-on 綁定事件監聽器

5，雙向綁定，下面示例是一個簡單的雙向綁定的示例，使用vue給人的感受就是寫不多的代碼，作不少的事dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙向綁定</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        message: 'hello world'
    }
})
</script>
</html>

v-model 簡單雙向綁定

6，組件化開發對於代碼的解耦具備很是好的做用，同時也能加快開發速度，這種思想無論是前端仍是後端，都是必須具有的，下邊是一個簡單的小示例ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 組件</title>
</head>
<body>
    <div id="app">
        <ol>
            <todo-item v-for="item in items" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})
new Vue({
    el: "#app",
    data: {
        items: [
            { id: 1, text: 'a'},
            { id: 2, text: 'b'},
            { id: 3, text: 'c'}
        ]
    }
})
</script>
</html>

組件化開發簡單示例

相關標籤/搜索

每日一句

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