v-if、v-show、v-for v-bind

v-if

The condition is true where the label elements are shown to be false principle does not show: do not load the element

v-show

The condition is true where the label elements are shown to be false does not display principle: Set display: none;

You will see the same content, but asked both the existence of other effects and differences. First, because the use of v-if hidden internal elements are not displayed, VUE does not attempt to generate a corresponding HTML code: For v-show instruction, as it is not. This means that the hidden content has not been loaded, v-if to make better

v-for circulation

An array of direct write cycle when the item out of the array elements each of the elements

 <ul v-for="(value) in dog2" :key="value.name">
      <li> {{value}}</li>
</ul>
 dog: [{
                        name: "大",
                        url: "www",
                        slogan: "热爱知识！"
                    }, {
                        name: "大白",
                        url: "www.dreamstudio",
                        slogan: "热爱知识，传递"
                    }, {
                        name: "大白菜",
                        url: "www.dreamstudio.top",
                        slogan: "热爱知识，传递技术！"
                    }],

Target loop cycle number (value, key) fixed order

<ul v-for="(value,key) in dog1" :key="value.name">
      <li> {{value}} - {{key}}</li>
</ul>

--------------------------------------------------------------------------------------------

v-bind command is used to bind a value to the HTML attribute. Usually represented by a colon to make this into a dynamic attribute values may be increased or decreased

Responsive

created function method will be executed after application initialization is complete. vue lifecycle hook will explain in more detail later, we do not worry too much about the function of this method this.seconds directly to the corresponding value of the data object, and by manipulating it to update the template.

created() {
                setInterval(() => {
                    this.time++;
                }, 1000)
            },
//当time改变时vue可以检测到 做出响应

vue responsive implementation principle

vue added to modify the data object when the object is changed will be notified vue, responsive to achieve. Each attribute of an object is replaced getter setter method therefore can be used like normal objects to use them, like when you modify vue will know that he has changed

Precautions

Responsive to note for the object must be initialized to vue instance, when added, continue to add after creating the strength of the property is no longer appropriate style

canst vm = new Vue({
data: {
formData: {
time:'som use'
}
}
}); 
vm.formData.name = 'username';
//time是响应式的  name属性不是后加的

I of non-responsive solution

1、

Well defined in advance in the value of the attribute data like name assigned to the default value (the simplest and most commonly used)

formData: {
use name ：'someuse'
name: undefined 
}

2, covering the object to re-create the object

vm.formData =Object.assign({}, vm.formData, {
name: 'Some User'
});

3, set method

vue provides Vue.set () method

For the purposes of the array should be noted

Not to set the value of the array by the array index

Solutions

Use splice () method to add a new element to remove the old elements wells

vm.dogs.splice(2, 1,’Bob ’);

2, vue provided Vue.set () method

Vue.set(vm.dogs, 2,’Bob ’);

Changing the length of the array

Can not change the array can not be monitored vue

--------------------------------------------------------------

v-bind properties can be used instead Binding ::


<body>
	
	<div id="vue-div">
		//使用（v-bind:）该属性值与data中相关联可以改变 
		<img v-bind:src="imgUrl" style="width: 50px;height: 50px;display: block;"/>
		使用（:src），简写方式
		<img :src="imgUrl" style="width: 50px;height: 50px;"/>
	</div>
 
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
	el: "#vue-div",
	data: {
		msg : "aabbdDD-Hello-World",
		imgUrl : "https://cn.vuejs.org/images/logo.png"
	}
});
</script>
</body>
</html>

v-bind to the binding of class and style attributes from other

1, class binding

<div :class="['active']">ddd</div>
<div :class="{active:bool}">ddd</div>
<div class="ddd" tabindex="-1">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量

Binding style properties

<div :style="['active']">ddd</div>
<div :style="{active:bool}">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量

-------------------------------------------------------

Form-way data binding v-model input data and the tag value vue instance object interactions

You can use v-model the form instructions <input>, <textarea> and <select> create a two-way data binding on the element. It automatically selects the correct method to update the control type elements.

v-model Ignores all form elements value, checked, selected the initial value of the property and will always Vue instance data as a data source. You should pass the assembly JavaScript data declaration of initial value options.

v-model Internally for different input elements using different attributes and throw different events:

text and textarea elements using the value properties and input events;
checkbox and radio use checked properties and change events;
select field value as a prop and change as an event.

Modifiers

`.lazy`

By default, v-model every time the input value of the data after the trigger event to synchronize the input box you can add lazy a modifier, thereby into use change events to trigger synchronization input :( completed) equivalent to shift from input events to the change event resulting in two-way data binding useless

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

`.trim`

If you want to automatically filter and last whitespace characters entered by the user, you can v-model add trim a modifier:

It does not affect the way data binding

<input v-model.trim="msg">

Mr. Su the front

Published 56 original articles · won praise 1 · views 1232

Private letter concerns