vue 系列文章----简单介绍

vue之前学习过一遍，但没有记录博客，工作中也只是用vue进行一些页面的渲染，今天开始把Vue复习一下，同时进阶一下

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进行渲染，再看一个绑定渲染的例子

<!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 绑定一个时间监听器

<!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给人的感觉就是写很少的代码，做很多的事

<!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，组件化开发对于代码的解耦具有非常好的作用，同时也能加快开发速度，这种思想不管是前端还是后端，都是必须具备的，下边是一个简单的小示例

<!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>

组件化开发简单示例