Home > Developer > Web Develop
The core idea of Vue is: data-driven view MVVM
<div id="app">{{}}</div>var app = new Vue({el: ‘#app‘,data: {message: ‘Hello Vue!‘}})The El attribute of the option is used to high number Vue's boot entry node
- All nodes in the portal node can use Vue's syntax, and in a sense, Vue is an advanced template engine.
- The entry ID cannot be mounted to the html,body element, it can only be a normal element, so our page usually starts off with a Div#app
Vue Template Object data is specified
Previously we used
template(‘tpl‘,{f00: ‘bar‘ <%=foo %>},或者 {{ foo }})
The data is in response.
- Data changes, all the DOM that binds the data is changed, which is called data-driven view mode MVVM
We can configure the instance method with the methods of the instance option
Vue Operation Auto-increment example
- We propose to put the data in
- Put the method in the Methods option
- In the method we can access the Vue instance through this
<!--El: ' #app 'Here the node is the template managed by Vue - <Div ID="App"><H1>{{Num}}</h1>><P>{{Num+ 1 }}</p><ul><li>{{num}}</li></ul><!--Event Registration, binding the increment method in data--<button v-on:click= "increment" > Dot i let num+1</button> </div>var app = new Vue({el: ' #app ',data: {///template object, which can be used directly in the templatefoo: ' Bar ',num:10 },methods: {increment:function() {//We use data-driven views to change the data to change the DOM//It is not recommended to use the name of the instance directly, because once the instance name has changed, it must be modified//App.num++This.num++ } }})1.v-model bidirectional binding V-bind One-way binding v-if directives<h1>{{}}</h1><!-- {{}} 不能用于属性绑定 --><!-- 属性绑定使用 v-bind:属性名="数据成员" -->
Directive Name: V-model
- Syntax: v-model= "bound member" the so-called two-way binding is only for the form controls such as: Text box, radio box, check box data changes will affect the form control changes in the form control will affect the data
- Usage Scenarios
- Input with value can use two-way binding
- check boxes use two-way binding
+
<input type="checkbox" v-model="checkboxValue">check box two-way binding needs to give a Boolean value, the Boolean value is true when the check box is occupied, the Boolean value is False when the check box is unchecked. When the data changes, it affects the checkbox, which affects the data when the checkbox changes
V-bind One-way binding
- V-bind are unidirectional and can only be affected by data, but do not affect the data
V-IF directive
Todo-list case
- Gives a Boolean value that shows and hides the Boolean value based on the true and False
<div id="box" v-if="seen"></div>
<Style>. Done {Text-Decoration:Line-Through; Color:#ccc; } </style>> <Body> <Div ID="App"> <H1>Todo</h1><!--{{ }You can also call the method to render the return value of the method here --<p> {{Calculate()}} of {{array.length}} remaining <a href= "#" v-on:click= "ClearAll" >archive</a></p><ul><li v-for= "item in array" ><!--because the checkbox is two-way bound, the change is synchronized to the data when the checkbox changes.that is, Item.done will change as the checkbox changes.<input type= "checkbox" v-model= "Item.done" ><!--class is specialIf it is a dynamic class, we also use V-bind to bindbut we need to give class an objectThe object's key is the class name, and the value is a Boolean valuewhen the Boolean value is true, the function of the class nameinstead of removing the class nameThe same is the response, and when the data changes, the class binding is also affected-<span v-bind:class= "{done:item.done}" >{{item.title}}</span> </li></ul> <input type="Text"Placeholder="Add new todo Here"V-Model="Inputtext"> <Button V-On:Click="AddArray">Add</button></div> <Script src="Node_modules/vue/dist/vue.js"></script><script>var array=[ {title: ' Eat ',done:true }, {title: ' Sleep ',Done:false }, {title: ' Write code ',Done:false }, {title: ' Eat ',done:true } ]var app=new Vue({el: ' #app ',data: {Array,inputtext: ", },methods: {addarray:function(){This.array.push({Title:this.inputtext,done:false})this.inputtext= '//Empty text box },clearall:function(){//Find all elements for done:true to be removed from the arrayvar newarry=this.array.filter(function(Item){return!item.done })This.array=newarry },//Calculates the remaining number of executions returns an array of done:fase lenghtcalculate:function(){return This.array.filter(function(Item){return!item.done}). Length } } })</script>Vue.js Study Notes Summary 1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
