Into the first day of Vue

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue入门【uml类图】</title>
    <!- Script<->The js file which must be incorporated in the head tag
    the src = "vue.js" > </ Script > 
</ head > 
< body > 
<-! 
mount point: vue corresponding properties of Example el pointed mount point called tag 
template: mount point All labels are called the code inside the template (mount point can be written in vue instance) 
example: vue instance 

v-text or v-html: a label he told a display is determined by who (and jquery but, like, text parsing text only, html tag can be resolved) 

V-oN: event = 'function' (to be abbreviated event @ = 'function') to achieve this is a binding event, at the same time, this method is present in the binding event vue examples of methods 
-> 
< div ID = "foo" > {{}} MSG
     < P V-text = "NUM" @click = "My2 of" > </ P > 
    <p v-html="num" v-on:click="My"> </ P > 
</ div > 

< div ID = "bar" > 
    < h1 of V-text = "Number" > </ h1 of > 
</ div > 

< Script > 
    // can be introduced by effects jquery or native js of vue effect 
    // introduction class file needs to be instantiated 
    // EL: you have to take over the representation which element (element) page 
    // the data: data 
    new new Vue ({ 
        EL: " #foo " , 
        the data: { 
            msg: " the Hello Word " ,
            a: 1
        }, 
        Methods: { 
            My: function () { 
                Alert ( ' bind click event, is about to change value ' );
                 the this .num =  ' Hello, this value by binding the click event has changed ' ; 
            }, 
            My2: function () {
                 the this .num =  ' abbreviations may be achieved after ' ; 
            } 
        } 
    }); 

    // this is to show the contents written in the template vue example 
    new new Vue ({ 
        EL: " #bar "  ,
        template:"<h1>你好,{{username}}</h1>",
        data:{
            username:"张三"
        }
    });
</script>
</body>
</html>
Into the first day of Vue

Guess you like
