VueJs入门练习

开始阅读Vue官方文档，学习Vue开发。Vue可以让前端数据绑定和渲染更为方便，但要做出一套漂亮的界面，还是需要使用CSS相关的框架。

0. 预备，官方建议：刚开始上手不宜直接使用vue-cli工具，还是使用最简单的Vue引入方式：

<script src="https://unpkg.com/vue"></script>

1. Vue声明式渲染数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Study</title>

    <script src="https://unpkg.com/vue"></script>

</head>
<body>
<!-- 1. 文本插入 -->
<div id="app">{{message}}</div><br/>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message : 'Hello Vue!'
        }
    });
</script>
</body>
</html>

效果：

2. 绑定元素(使用v-bind指令)

<div id="app-2" v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
</div>

<script type="text/javascript">
    var app2 = new Vue({
        el: '#app-2',
        data:{
            message: 'Hello Vue,' + new Date().toLocaleString()
        }
    });
</script>
</body>

效果：

3. 条件指令(使用v-if进行条件渲染)

<div id="app-3">
    <div v-if="show">被显示了吗?</div>
</div>

<script type="text/javascript">
     var app3 = new Vue({
         el: '#app-3',
         data: {
             show: true
         }
     })
</script>

效果：

［注］在Console中，使用app3.show的方式动态修改变量值，可以观察div是否被显示,当v-if=false的时候，改div不会被显示。

4. 循环指令（使用v-for实现数据循环）

<div id="app-4">
    <ol>
        <li v-for="item in fruits">{{item.content}}</li>
    </ol>

    <p v-for="item in cities">{{item.name}}</p>
</div>

<script type="text/javascript">
    var app4 = new Vue({
        el: '#app-4',
        data: {
            fruits: [
                {id: 0, content: 'Apple'},
                {id: 1, content: 'Orange'},
                {id: 2, content: '西瓜'}
            ],

            cities: [
                {name: '北、上、广、深'},
                {name: '杭、武、成、南'}
            ]
        }
    })
</script>

效果：

5. 实现事件绑定（Vue使用v-on进行用户事件绑定）

<div id="app-5">
    <div>{{message}}</div>
    <button v-on:click="reverseWord">点击翻转</button>
</div>

<script type="text/javascript">
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            reverseWord: function() {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

效果：

6. 处理用户的输入（Vue使用v-model来实现输入）

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

<script type="text/javascript">
    var app6 = new Vue({
        el: '#app-6',
        data :{
            message: 'Hello Vue!'
        }
    })
</script>

效果：

7. Vue可以很方便的定义一个组件：

<div id="app-7">
    <my-component></my-component>
</div>

<script type="text/javascript">
    Vue.component('myComponent', {
        template: '<p>一个自定义组件</p>'
    })

    var app7 = new Vue({
        el: '#app-7'
    })
</script>

效果：

8. 要使得组件内部显示动态内容，可以使用：

<div id="app-7">
    <ol>
        <comp-item v-for="item in phones"
                 v-bind:comp="item"
                 v-bind:key="item.id">
        </comp-item>
    </ol>
</div>

<script type="text/javascript">
    Vue.component('comp-item', {
        props: ['comp'],
        template: "<li>{{ comp.text}}</li>"
    });

    var app7 = new Vue({
        el: '#app-7',
        data: {            phones:[
                {id: 0, text: 'Apple'},
                {id: 1, text: 'Huawei'},
                {id: 2, text: 'Xiaomi'}
            ]
        }
    })
</script>

效果：

［附］Vue官方文档：

https://cn.vuejs.org/v2/guide/ssr.html

猜你喜欢