V-bind can only implement one-way binding of data, from M automatically bound to V (that is , data modification, automatic synchronization to HTML), can not achieve two-way data binding.
Using the V-model directive, you can implement two-way data binding of the form elements and the data in the model ( not only the data can be modified, automatically synced to the HTML, but also the code of the HTML can be modified to synchronize to data).
8, V-for 8.1. V-for Loop Normal Array
If we want to loop assignment to P tag data in list=[1,2,3,4,5,6]; Array of words, this will write:
<body> <div id="app"> <p>{{list[0]}}</p> <p>{{list[1]}}</p> <p>{{list[2]}}</p> <p>{{list[3]}}</p> <p>{{list[4]}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] }, methods: {} }); </script></body>
In this case, it will be very cumbersome. Instead, V-for provides a loop through the list array to assign a value to the P tag. As follows:
<body> <div id="app"> <p v-for="(item, i) in list">索引:{{i}} --- 项:{{item}}</p> <!-- 索引:0 --- 项:1 索引:1 --- 项:2 索引:2 --- 项:3 索引:3 --- 项:4 索引:4 --- 项:5 索引:5 --- 项:6 --> </div> <script> var vm = new Vue({ el: '#app', data: { list: [1, 2, 3, 4, 5, 6] }, methods: {} }); </script></body>
8.2, V-for Loop Object array
<body> <div id="app"> <p v-for="(user, i) in list">Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: 'zs1' }, { id: 2, name: 'zs2' }, { id: 3, name: 'zs3' }, { id: 4, name: 'zs4' } ] }, methods: {} }); </script></body>
8.3. V-for Loop Object
<body> <div id="app"> <!-- 注意:在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引 --> <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p> </div> <script> var vm = new Vue({ el: '#app', data: { user: { id: 1, name: 'Tony Stark', gender: '男' } }, methods: {} }); </script></body>
8.4, V-for cycle number
<body> <div id="app"> <!-- in 后面我们放过普通数组,对象数组,对象,还可以放数字 --> <p v-for="count in 10">这是第 {{ count }} 次循环</p> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script></body>
Note: If you use the V-for iteration number, the preceding count value starts at 1.
8.5. V-for Loop Key Property
The key property allows each traversed item to be unique.
<body> <div id= "app" > <div> <label>id: <input type= "text" v-model= "id" > </label> <label>name: <input type= "text" v-model= "Name" > </label> <input Type= "button" value= "add" @click = "Add" > </div> <!--Note: When the v-for loop, the key property can only use number or string-- <!--Note: When key is in use, it must be in the form of the V-bind property binding, specifying the value of key--<!--in the component, using the V-for loop, or in some special cases, if v-for has a problem, you must use V-f Or, specify a unique string/number type: Key value--<p v-for= "Item in List": key= "Item.id" > <input type= "checkbox" >{ {Item.id}}---{{item.name}} </p> </div> <script>//Create Vue instance, get ViewModel var vm = new Vue ( {el: ' #app ', data: {ID: ', Name: ', list: [{id:1, Name: ' Reese '}, { Id:2, Name: ' Win Politics '}, {id:3, name: ' Zhao Gao '}, {id:4, name: ' Han Fei '}, {id:5, Name: ' Xunzi '} ]}, methods: {Add () {///Add Method This.list.unshift ({id:this.id, name:this.name})}}); </script></body>
9, V-if/v-show Both V-if and v-show can control the display or not of elements. But the implementation principle is different.
V-if: The element is re-deleted or created each time.
V-show: The DOM Delete and create operation is not re-performed each time, only the display:none style of the element is toggled.
Therefore, if the element involves frequent switching, it is best not to use v-if, but recommend the use of v-show;
It is recommended to use V-if if the element may never be displayed and is seen by the user.
Iv. Event Modifiers
.stop
: Block bubbling
.prevent
: Block default events (such as clicking on hyperlinks to prevent jumps to the default page)
.capture
: Use event capture mode when adding event listeners (as opposed to bubbling mode)
.self
: Triggers a callback when the event is triggered on the element itself (for example, not a child element)
.once
: Event is triggered only once, then the behavior of the label itself is restored.
Example:
<div id= "App" > <!--use. Stop to bubble-up <div class= "inner" @click = "Div1handler" > <input type= "button" value= "poke him" @click. stop= "Btnhandler" > </div> & lt;! --use. Prevent to block default behavior (jump to Baidu Home)--<a href= "http://www.baidu.com" @click. prevent= "LinkClick" > Have a problem, go to Baidu </first A> <!--use. Capture to implement a mechanism for capturing triggering events: In contrast to bubbling, from outside to the <div class= "inner" @click. capture= "Div1handler" &G T <input type= "button" value= "poke him" @click = "Btnhandler" > </div> <!--use. Self to trigger an event only when the current element is clicked Processing functions--<div class= "inner" @click. self= "Div1handler" > <input type= "button" value= "poke him" @clic k= "Btnhandler" > </div> <!--use. Once triggers only one event handler (the following case only triggers one click event and then the behavior of the label itself)-<a href= "http://www.baidu.com" @click. prevent.once= "LinkClick" > Problems, first go to Baidu </a> </div>
.stop
and .self
the difference:
<!-- stop 会阻止冒泡行为 --> <div class="outer" @click="div2Handler"> <div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> </div> <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡的行为 --> <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> </div>
V. Styles in Vue 1, class style <! DOCTYPE html>
Attention:
1. Class style requires the use of v-bind bindings.
2. Class style can be an array and a collection of objects.
2. Style styles Can be an object, or an array of objects.
<body> <div id="app"> <!-- 对象就是无序键值对的集合 -->
Note: To bind to the style style.