Vue探索历程

Posted 2020-10-15 十年雪落

    使用vue.js原文介绍：Vue.js是一个构建数据驱动的web界面库。Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件。vue.js上手非常简单，先看看几个例子：

    例一：Helloworld

    html代码：

let arr = [1,2,3]

 

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

    js代码：

new Vue({
    el: ‘#app‘,
    data: {
    message: ‘Hello Vue.js!‘
    }
})

    例二：双向绑定

    说明：html中以v-开头的标记都是vue.js提供的标记。v-model属性表示数据模型。

    html代码：

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

    js代码：

new Vue({
    el: ‘#app‘,
    data: {
    message: ‘Hello Vue.js!‘
    }
})

    例三：渲染列表

    说明：v-for表示遍历集合数据，下面的代码遍历集合todos并输出每项。

    html代码：

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

    js代码：

new Vue({
    el: ‘#app‘,
        data: {
        todos: [
            { text: ‘Learn javascript‘ },
            { text: ‘Learn Vue.js‘ },
            { text: ‘Build Something Awesome‘ }
        ]
    }
})

    例四：事件绑定

    说明：v-on是vue.js特性，表示绑定事件方法。

    html代码：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

    js代码：

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

   

    看完上面的4个例子，感觉vue.js挺容易入门，确实是这样，不得不说vue.js深受开发人员喜爱，简单易学。前面的例子只是展示了如何使用vue.js，但它到底包含了哪些功能？vue.js提供了两大核心功能：响应的数据绑定、视图组件化。接下来我们看看vue.js是怎么定义这两大功能的。