A view command output action: binding to the model view
v-text and v-html
- 1. Default v-text is no flicker problem, v-text can be abbreviated as {} {}, and logical operations support
- 2. v-text elements will be covered in the original content, but this interpolation expression 1, will replace its placeholder, not empty the entire contents of the elements
- 3. Default covers the inner v-html content, HTML output
v-text Examples
<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>v-html Examples
<p v-html="html"></p>Second, the binding properties of directives: the dynamic binding model view
v-bind : Vue is provided instructions for the binding properties (title) of
-
1. Direct use instruction
v-bind -
2. Reduced Instruction
: -
3. At the time of binding, stitching the binding elements:
:title="btnTitle + ', 这是追加的内容'"Practical examples
-
Usually, we will pass
v-bindan object, so that we can dynamically switch the value of some properties, such as binding or Class Style, like this:// isBlue是布尔值，blue类是否存在取决于isBlue是否为真 <div :class="{ blue: isBlue }"></div> // thisFont是变量，字体大小随thisFont而变化 <div :style="{ fontSize: thisFont + 'px' }"></div> // 当然如果属性多的话，可以这样写 <div :style="styleBox"></div> // JS data () { return { styleBox: { fontSize: 20px, color: #ccc, ... } } }Third, the event binding directive role: the model dynamic binding onclick
-
Event binding mechanism, in addition to bind the click can also bind other events
-
Shorthand: @
-
Bound control events to vm
-
+ .Stop prevent bubbling
+ .prevent prevent the default event
+ Use event capture mode .capture add an event listener
+ .self only trigger a callback when the event occurs in the element itself (for example, not a child element)
+ .once events only trigger a -
Examples
<!-- 使用 .stop 阻止冒泡 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
<!-- 使用 .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
<!-- 使用 .capture 实现捕获触发事件的机制 -->
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
<!-- 使用 .once 只触发一次事件处理函数 -->
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>
Four, v-model effect: two-way binding, is no longer simply bound to view, view the value changes will also act on model
- The only way binding instructions
- Note: v-model can only be used in the form element input (radio, text, address, email ....) select checkbox textarea
1. HTML 代码结构 <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">÷</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" v-on:click="getResult"> <input type="text" v-model="result"> </div> 2. Vue实例代码： // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '0' }, methods: { getResult() { switch (this.opt) { case '0': this.result = parseInt(this.n1) + parseInt(this.n2); break; case '1': this.result = parseInt(this.n1) - parseInt(this.n2); break; case '2': this.result = parseInt(this.n1) * parseInt(this.n2); break; case '3': this.result = parseInt(this.n1) / parseInt(this.n2); break; } } } });Five, v-for and key attributes
- Iterative array - ordinary array - an array of objects
<ul>
<li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
<ul>
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</ul>- Iteration object attributes
<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</ div>- --- count the number of iterations starting from 1
<p v-for="i in 10">这是第 {{i}} 个P标签</p>- 2.2.0+ version, when used in the appliance when the v-for, key now is a must.
When Vue.js with v-for being updated list elements have been rendered, it defaults to using " in situ reuse " strategy. If the order of the data item is changed, Vue will not move DOM element to match the order of the data items , but simply reuse each element here , and it appears to ensure that each element has been rendered in a particular index.
In order to give a prompt Vue, so that it can track the status of each node, thereby re-use and reorder existing elements , you need to provide a unique key for each property.
Sixth, v-ifandv-show
In general, v-if higher switching consumption v-show higher initial rendering consumption. So, if you need frequent switching v-show is better, if the conditions are unlikely to change at runtime v-if better.