The most common form of data binding, the most common is the use of interpolation expression, the wording is {{}} written expression
例如:<span>Message: {{ msg }}</span>
Note: 1. The word must be, must be a valid expression js (if else for switch can not write)
2. There must be a return value
Common commands
v-cloak
Fixes flicker interpolation expression to be used in combination and css styles <style> <! - After adding v-cloak and css styles control on the span, the browser will first load time span hidden, know the future Vue instantiated completed, will be removed from the v-cloak span, it will lose css span role in the content presented to the user -> new Vue({ |
v-text
To replace the label text (will completely replace the contents of the original tag is not recognized html) <-! V-text piece of text may be rendered to the specified elements, for example: -> <- output:! -> |
v-html:
To replace web content tags (contents will completely replace the original label) <div v-html="rawHtml"></div> |
v-bind:
Can bind to the tag attribute, the value of a variable is required attribute / value type, default, v-bind may be omitted 1, img src acquired from the variable imagesrc 2, from the class classA with, the value of classB two variables as the value of the class, 3, isRed if the variable is true, the class value is red, otherwise no 4、div的class属性值一定有classA变量的值,而是否有classB和classC变量的值取决于isB和isC是否为true,二者一一对应 5、变量加常量 6、变量加常量的另一种写法 7、对象数组 |
|
缩写形式
} |
v-on
1、作用:可以给标签绑定事件我们可以给事件入参$event对象,然后在事件中就可以获取到当前绑定事件的元素了v-on和v-bind一样,v-on默认也可以省略 2、常用事件: 3、示例: <!-- 阻止默认行为,没有表达式 --> 5、v-on的缩写形式:可以使用@替代 v-on:
写法: 由于回车键对应的keyCode是13,也可以使用如下替代 但是如果需要按下字母a(对应的keyCode=65)才触发kd1事件,有两种写法: Vue.config.keyCodes.a = 65 2、也可以之间加上a对应的数字65作为按键修饰符 键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字 |
在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: |
v-for
item in Array :key属性具有唯一性,不能重复,它能够唯一标识数组的每一项 注意:以下变动不会触发视图更新 <ul> |
1、作用:根据表达式的值的真假条件来决定是否渲染元素,如果条件为false不渲染(达到隐藏元素的目的),为true则渲染。在切换时元素及它的数据绑定被销毁并重建 2、示例: 通常我们使用写法居多: 也可以用 v-else 添加一个 “else” 块: 注意:v-else 元素必须紧跟在 v-if 元素否则它不能被识别。 new Vue({ |
1、根据表达式的真假值,切换元素的 display CSS 属性,如果为false,则在元素上添加 display:none来隐藏元素,否则移除display:none实现显示元素 2、示例: new Vue({ 3、v-if和v-show的总结: |
1、在表单控件或者组件上创建双向绑定 3、举例: new Vue({ |