Vue（二）简单入门

根据上一节搭建的hello-world工程（包含Router），用Webstorm打开，我们先运行一下工程。

界面如下

..

我将在About里面介绍一下Vue的相关内容。

打开About.vue，修改内容为：

<template>
    <div class="about">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: '我的第一个Vue'
        })
    }
</script>

结果：

-------------------------------------------------------------------

看起来很简单，实际上Vue在背后做了大量工作，数据和DOM模型已经建立了关系，所有东西都是响应式的。比如：

<template>
    <div class="about">
        <h1 v-bind:title="msg">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: '页面加载于 ' + new Date().toLocaleString()
        })
    }
</script>

查看页面：

你这里看到的v-bind是vue的指令，它能将数据绑定到DOM元素的具体属性上，这里绑定到了title属性上

-------------------------------------------------------------------

再来看一个明显一点的数据绑定

<template>
    <div class="about">
        <h1 v-text="msg"></h1>
        <input type="text" v-model="msg"/>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            msg: ''
        })
    }
</script>

页面：

这里的v-model是表单控件绑定，只能用于<input>、<select>、<textarea>和components。在上面的例子中，数据msg绑定到input和h1，所以修改input内容就能改变标题的内容。

-------------------------------------------------------------------下面简单介绍一下条件和循环

If

<template>
    <div class="about">
        <h1 v-if="show">如果为true你就能看到</h1>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            show: true
        })
    }
</script>

页面：

For

<template>
    <div class="about">
        <p v-for="i,index in data" :key="index" v-text="i"></p>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            data: ['Apple','Banana','Orange']
        })
    }
</script>

页面：

-------------------------------------------------------------------事件处理 v-on

<template>
    <div class="about">
        <button v-on:click="reverseMessage">翻转</button>
        <p>{{ message }}</p>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            message: 'Hello Vue.js!'
        }),
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    }
</script>

页面：

-------------------------------------------------------------------简单介绍一下组件

在components目录下面新建一个vue文件，MyList.vue

输入内容

MyList.vue

<template>
    <li>{{dataList.text}}</li>
</template>

<script>
    export default {
        name: "MyList",
        // props是vue的一个特性，props 可以是数组或对象，用于接收来自父组件的数据
        props: ['dataList']
    }
</script>

<style scoped>

</style>

About.vue

<template>
    <div class="about">
        <ul>
            <!--组件：my-list，data-list是在MyList组件里面定义的props，数据从父组件传入-->
            <my-list v-for="item in items" :key="item.id" :data-list="item"></my-list>
        </ul>
    </div>
</template>
<script>
    // 引入组件
    import MyList from '../components/MyList'

    export default {
        components: {MyList},
        data: ()=> ({
            items: [
                {id:1,text:'Apple 苹果'},
                {id:2,text:'Banana香蕉'},
                {id:3,text:'Orange橘子'},
            ]
        })
    }
</script>

页面：