1.v-text
v-text is mainly used to update textContent.
<P> {{msg}} </ p> and <p v-text = "msg2"> </ p> equal effect both
<body> <div ID = "App"> <P> {{MSG}} </ P> <P V-text = "Msg2"> </ P> </ div> <Script type = "text / JavaScript" > var classs = new new Vue ({ EL: "#app" , Data: { MSG: "this is the first paragraph of the text" , Msg2: "this is the second paragraph of the text" } }) </ Script> </ body>
2. v-html
Parses the label, the equivalent to the innerHTML js, the contents will replace all instances, be used cautiously.
<div id="vue"> <div v-html="add"></div> </div> var vueApp = new Vue({ // 挂载点 el:"#vue", data:{ add:"<h1 class='info'>您好!VUE</h1>", } })
3. In model !!!!!
Two-way data binding , the form ignores the value of all the elements, checked, the initial value of the selected property. Vue instance data because it is selected as a specific value.
- For example, what input the input box, it will display the corresponding stuff below
<body> <div id="app"> <input type="text" name="" v-model="msg" /> <p>{{msg}}</p> </div> <script type="text/javascript"> var classs = new Vue({ el:"#app", data:{ msg:"" } }) </script> </body>
v-model modifier
(1) lazy
By default, v-model input values and synchronization data frame. Resynchronization can change events by this modifier change.
<input v-model.lazy="msg">
(2) number
is automatically input into the user's numeric value type
<input v-model.number="msg">
(3) trim
automatic filtering and trailing spaces of input by the user
<input v-model.trim="msg">
4.v-once
Only rendered once, the child node instance will be considered static content skip class, and that can be used to optimize performance
For example: two-way data binding and implemented with v-model input value in the input box, and I would like to highlight the contrast value and the original value changes
<div id="app"> <input type="text" name="" v-model="msg" /> <p>{{msg}}</p> <p v-once>{{msg}}</p> </div> <script type="text/javascript"> var classs = new Vue({ el:"#app", data:{ msg:"This is my original value " } }) </ Script >
5.v-on
v-on dom primarily listens for events (onclick, onchange, onkeyup etc.), in order to execute blocks of code. The expression can be a method name.
Abbreviated as: [@]
<div id="app"> <button @click="myclick"></button> </div> <script> var app = new Vue({ el: '#app',
data:{}, methods:{ myclick:function(){ alert(1); } } }) </script>
6.v-for
Array, objects traverse priority over the others.
There are two forms of traversal: (xxx in xxx)
- variable text; index is the current index (subscript) item is an optional parameter; in immutable; Texts vue.js inside corresponding array of data (objects) Name
<li v-for="(text,index) in texts"> <li v-for="text in texts">
For example:
<body> <div id="app"> <p v-for="(myscore,index) in score"> 分数是:{{myscore}},对应的下标是:{{index}} </p> <span v-for="peo in people"> {{peo}} </span> <br> <span v-for="str in number"> {{str}} </span> </div> </body> <was>script MyVue = new new Vue ({ EL: " #app " , Data: { Score: [ " Bob " , " red " , " less blue " , " small powder " , " small students love " ], people: {name: " Joe Smith " , Age: 13 is , Sex: " M " }, Number: " 123456 " } }) </script>
7.v-show
Display element according to the conditions, v-show there is a conditional expression, returns true or false. It is true of the show, as it's hidden false.
<body> <div id="app"> <input type="text" name="" id="" v-model="num1" placeholder="请输入数字" /> <input type="text" name="" id="" v-model="num2" placeholder="请输入数字" /> <br> <span>判断结果:</span> <strong v-show="num1>num2">{{num1}}大于{{num2}}</strong> <strong v-show="num1==num2">{{num1}}等于{{num2}}</strong> <strong v-show="num1<num2">{{num1}}小于{{num2}}</strong> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ num1:"", num2:"" } }) </script>
8.v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<body> <div id="app"> <h2 v-if="obj">我是真的</h2> <h2 v-if="obj1">我是假的</h2> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ // 当obj为真的时候,对应内容会显示出来 obj:true, // 当obj为假的时候,对应内容会被隐藏 obj1:false } }) </script>
- 被隐藏的元素,在审查的时候是被注释的
- 如果想改变多个元素,则可以用template当做一个不可见的包裹元素
<body> <div id="app"> <!-- 不可见的包裹元素 --> <template v-if="obj"> <h2>我是真的</h2> <p>你是人间四月天</p> </template> <h2 v-if="obj1">我是假的</h2> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ // 当obj为真的时候,对应内容会显示出来 obj:true, // 当obj为假的时候,对应内容会被隐藏 obj1:false } }) </script>
9.v-else
v-else指令不能单独使用,必须紧跟在v-if 或者 v-else-if 的元素后面。可用于登陆、判断成绩合格等。相当于if else条件语句
<body> <div id="app"> <input type="text" v-model="msg"> <!-- 相当于在这用了if else条件语句 --> <p v-if="msg>90">{{excellent}}</p> <p v-else-if="msg>80">{{good}}</p> <p v-else-if="msg>60">{{qualified}}</p> <p v-else>{{Unqualified}}</p> </div> </body> <script> var grades = new Vue({ el:"#app", //挂载点 data:{ msg:"", excellent:"优秀", good:"良好", qualified:"合格", Unqualified:"不合格" } }) </script>
10.v-bind !!!!
v-bind用于属性绑定,只要是标签自带的属性都可以用。简写方式用":"表示。
<!-- 完整语法:v-bind 是指令,: 后面的 class 是参数,classProperty 则在官方文档中被称为“预期值”。 -->
<span v-bind:class="classProperty"></span >
<!-- 缩写语法: 后面的 class 是参数,classProperty 则在官方文档中被称为“预期值”。 -->
<span :class="classProperty"></span >
(1)绑定属性
不适用vue的情况下,我们对一张图片的写法,可以正常显示
使用vue的情况下,我们可以把图片路径存到js中。但是这种情况下,标签会直接显示出来,所以就需要加上v-bind
正确写法如下:
<body> <div id="app"> <img v-bind:src="img" /> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ img:'rev4-3.jpg' } }) </script>
(2)绑定类
- 可动态的切换class属性
<style> .setBorder{ border: 2px solid red; } .setColor{ color: red; } </style> <body> <div id="app"> <input type="text" :value="msg"> <!-- setBorder为类名 --> <button type="button" v-bind:class="{'setBorder':border,'setColor':color,}">点击</button> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ msg:"这是input初始值", border:true, color:false, } }) </script>
(3)数组语法
在css里面设定样式,把一个数组传给v-bind:class,以应用一个class列表
<style> .active{ background-color: indianred; font-size: 16px; color: #fff; } </style> <body> <div id="app"> <ul> <!-- v-for循环出数组的内容 --> <!-- 三元运算符 --> <li v-for="(text,index) in texts" :class="index == act ? 'active' : '' "> {{text}} </li> </ul> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ texts:['Vue','JavaScript','jQuery','React','HTML'], act:2 } }) </script>
(4)直接绑定数据对象
在vue实例的data中定义了style对象,这个对象里面是所有的类名及其真值,当里面类的值为true时则被渲染
<style> .isActive{ font-size: 20px; color: red; } .notActive{ font-size: 20px; color: green; } </style> <body> <div id="app"> <p :class="style">我是可改变的样式</p> </div> </body> <script> var MyVue = new Vue({ el:"#app", data:{ style:{ "isActive":true, //渲染 "notActive":false //不渲染
} } }) </script>
渲染结果为: