Vue.js Small case (1)

Data binding

Data binding is the foundation of Vue.js. In this example, the vue.js v-model instruction is used to create two-way data binding on the form element.

<!--This is our view--><div id= "app" >    <p>{{message}}</p>    <input type= "text" v-model= " Message "/></div><script>    //  This is our model    new  Vue ({         ' #app ',        data: {            message:' Hello world! '         }    })</script>

Binds a message to a text box, and when you change the value of the text box, <p>{{ message }}</p> the contents are also updated.

Navigation Toggle

The main application of Vue.js's v-for directive is to render a list, v-bind instructions to bind class and v-on instructions to handle events

1 This is the HTML code 

<DivID= "Main">2     <nav@click. Prevent>3         <av-for= "Item in Items": Class= "{' Show ': item.active}"@click= "Makeactive (item, $index)">{{Item.name}}</a>4     </nav>5     <P>You chose<b>{{Active}}</b></P>6 </Div>

CSS code:

1 *{2 margin:0;3 padding:0;4 }5 #main {6 width:432px;7 margin:0 Auto;8 Text-align:center;9 }Ten nav{ One Display:inline-block; A margin:60px auto 45px; - background-color: #5597b4; - box-shadow:0 1px 1px #ccc; the border-radius:2px; - } - nav a{ - Display:inline-block; + padding:18px 30px; - color: #fff!important; + Font-weight:bold; A font-size:16px; at Text-decoration:none!important; - line-height:1; - background-color:transparent; - -webkit-transition:background-color 0.25s; - -moz-transition:background-color 0.25s; - Transition:background-color 0.25s; in Cursor:pointer; - } to b{ + Display:inline-block; - padding:5px 10px; the background-color: #c4d7e0; * border-radius:2px; $ font-size:18px;Panax Notoginseng } - . show{ the background-color: #e35885; +}

JS Code:

varVM =NewVue ({el:' #main ', data:{active:' HTML ', items:[{name:' HTML ', active:true}, {name:' CSS ', active:false}, {name:' JavaScript ', active:false}, {name:' Vue.js ', active:false}]}, methods: {makeactive:function(item, index) { This. Active =Item.name;  for(vari=0; i< This. items.length;i++){                 This. items[i].active =false; }             This. items[index].active =true; }    }});

Just try it!

Vue.js Small case (1)