vue.js is a MVVM framework, understanding MVVM conducive to learning vue.js.
- MVVM Split interpreted as:
- Model: responsible for data storage
- View: responsible for page display
- View Model: responsible for the business logic (such as Ajax request, etc.), the data is processed to show the view
- MVVM problem to be solved is the business logic code to view the code completely separate, so that their respective responsibilities more clearly, post code maintenance easier
- Analysis disadvantage direct operation Dom Ajax request back data after updating the view to achieve, and the use form MVVM pattern illustrated is how to solve this disadvantage
- Vue in MVVM
vue.js What are the features?
1) rendering declarative
core Vue.js is to allow the use of a simple declarative syntax template to render data into the DOM system.
For example: using an interpolation expression vue.js anywhere on the Dom, the difference between the value of the expression would be rendered in Dom.
2) conditions of the circulating
dom may be used to provide a v-if vue.js, v-for labels and the like, to facilitate determination of the data cycle.
3) two-way data binding
Vue provides instructions v-model, it can easily realize bidirectional Dom binding between elements and data objects, i.e., modify the value Dom automatically modify the binding elements of a data object, modify the value of the data object is automatically modified Dom value elements.
4) handling user input
to allow users to interact with your application, we can add an event listener with v -on instruction methods defined in Vue instance by calling it
5) component-based application builder
vue.js can define a a component, in reference to the component vue page, this feature is ideal for building large applications.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>vue小demo</title> </head> <body> <div id="app"> <!-- v-text:可以将一个变量的值渲染到指定的元素中，它可以解决插值表达式闪烁的问题（该问题可由网速引起，可在浏览器控制器中设置presets slow 3G） --> <span v-text="name"></span></br> <!-- v-model: 实现双向数据绑定--> <input type="test" v-model="num1"> + <input type="test" v-model="num2"> = <span v-text="result"></span> <!-- v-on: 监听用户事件 --> <button v-on:click="cal">计算</button></br> ===================================================== <!-- v-for: 一个参数就直接是值，两个参数的第二个参数则为索引 --> 遍历数组： <ul> <li v-for="(item,index) in nums">{{index}} ---> {{item}}</li> </ul> 遍历单个json对象（对象的属性遍历）： <ul> <li v-for="(value,key) in user">{{key}} : {{value}}</li> </ul> 遍历多个json对象（对象的属性遍历）： <ul> <li v-for="(item,index) in users" v-if="item.user.name=='波多'" style="color: red;font-size: 33px;">{{index}} : {{item.user.name}}</li> <!-- v-bind: 1、作用： v‐bind可以将数据对象绑定在dom的任意属性中。 v‐bind可以给dom对象绑定一个或多个特性，例如动态绑定style和class 2、举例： <img v‐bind:src="imageSrc"> <div v‐bind:style="{ fontSize: size + 'px' }"></div> 3、缩写形式 <img :src="imageSrc"> <div :style="{ fontSize: size + 'px' }"></div> --> <li v-else v-bind:style="{color:col}">{{index}} : {{item.user.name}}</li> </ul> </div> </body> <!-- 引入VUE.js类库 --> <script src="vue.min.js"></script> <script> var VM = new Vue({ el:"#app",// vm接管了app区域的管理 data:{ name:"双向数据绑定小测试", num1:1, num2:1, result:2, nums:[1,3,5,7,9], user:{name:"加藤",age:25}, users:[ {user:{name:"加藤",age:25}}, {user:{name:"波多",age:24}} ], col:"blue" }, methods:{ cal:function(){ this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2) } } }) </script> </html>