Vuejs入门示例

Published on 2016 - 06 - 14

Hello World

We will create a new file and we will drop some boilerplate code in. You can name it anything you like, this one is called hello.html.

<html>
<head>
    <title>Hello Vue</title> 
</head>
<body>
    <h1>Greetings your Majesty!</h1>
</body> 
</html>

This is a simple HTML file with a greeting message.

Now we will carry on and do the same job using Vue.js. First of all we will include Vue.js and create a new Instance.

<html> 
<head>
    <title>Hello Vue</title> 
</head>
<body>
    <div id="app">
        <h1>Greetings your majesty!</h1> 
    </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js">
</script> 
<script>
    new Vue({
        el: '#app',
    }) 
</script>
</html>

We use a div with an id of #app which is the element we refer to, so Vue knows where to ‘look’. Try to think of this as a container that Vue works at. Vue won’t recognize anything outside of the targeted element. Use the el option to target the element you want.

Now we will assign the message we want to display to a variable inside an object named data. Then we’ll pass the data object as an option to Vue constructor.

var data={
    message: 'Greetings your majesty!'
};
new Vue({
    el: '#app',
    data: data 
})

To display our message on the page, we just need to wrap the message in double curly brackets . So whatever is inside our message it will appear automatically in the h1 tag.

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

It is as simple as that. Another way to define the message variable is to do it directly inside Vue constructor in data object.

new Vue({
    el: '#app',
    data: {
        message: 'Greetings your Majesty!'
    }
});

Both ways have the exact same result, so you are again free to pick whatever syntax you like.

Two-way Binding

What is cool about Vue is that it makes our lives easier. Say we want to change the message on user input, how this can be easily accomplished? In the example below we use v-model, a directive of Vue, Then we use two-way data binding to dynamically change the message value when the user changes the message text inside an input. Data is synced on every input event by default.

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

new Vue({
    el: '#app',
    data: {
        message: 'Greetings your Majesty!'
    }
});

That’s it. Now our heading message and user input are binded! By using v-model inside the input tag we tell Vue which variable should bind with that input, in this case message .

Two-way data binding means that if you change the value of a model in your view, everything will be kept up to date.

Comparison with jQuery

Anyway, in order to better understand how data-binding is helping us to build apps, take a moment and think how you could do the previous example using jQuery. You would probably create an input element and give it an id or a class so you could target it and modify it accordingly. After this, you would call a function that changes the desired element to match the input value, whenever the keyup event happens. It’s a real bother.

More or less, your snippet of code would look like this.

<html> 
<head>
    <title>Hello Vue</title> 
</head>
<body>
    <div id="app">
    <h1>Greetings your Majesty!</h1>
    <input id="message"> 
</div>
</body>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script type="text/javascript">
$('#message').on('keyup', function(){
     var message = $('#message').val(); 
     $('h1').text(message);
}) 
</script>
</html>

This is a simple example of comparison and as you can see, Vue appears to be much more beautiful, less time consuming, and easier to grasp. Of course, jQuery is a powerful JavaScript library for Document Object Model (DOM) manipulation but everything comes with its ups and downs!

Reference