vue.js内部指令解析

vue.js内部指令解析

npm n install live-server -g

{{message}}

var app=new vue({ el:'#app', data:{ message:'hello vue!' } }) //此为vue.js的基本模板

v-if&v-else&v-show

设置display，是否隐藏

登陆成功

请登录

v-if为true则执行登陆成功，为false显示请登录

v-show为true，就设置display，v-show为false就设置隐藏

v-for

{{item}}

v-for将显示sortitem.length个

v-text

var app=new vue({ el:'#app', data:{ message:'hello vue!', msghtml:'

hello vue!

' } })

v-text就是要显示的纯文本

v-html是要显示的html标签

v-on:click

本场比赛得分： {{count}}加分减分

methods:{

jiafen:function(){

this.count++;

},

jianfen:function(){

this.count--;

}

}

v-on绑定事件，函数卸载methods中

v-model

v-model

v-model.lazy

v-model.number

v-model双向绑定，input输入框会改变message值，

v-model.lazy省略空格，多个空格识别成一个

v-model.number先输入数字就只能识别数字

v-bind

jishupang

1、绑定classa

2,绑定class的判断

3,绑定class的数组

4,绑定class的3元判断

5、绑定style

6、用对象绑定style样式

var app=new vue({ el:'#app', data:{ imgsrc:'https://ang.com/wp-content/uploads/2018/02/bbbb.jpg', url:'https://jspang.com/category/learn/vue2/', classname:'classa', classa:'classa', classb:'classb', isok:false, styleobject:{ fontsize:'24px', color:'green' } } })

动态绑定src的值，v-bind:src,缩写:src

3,绑定class的数组绑定两个类值 6、用对象绑定style样式绑定style的对象

其他指令

[v-cloak] {

display: none;

}

{{message}}

{{ message }}

{{message}}

{{message}}

{{message}}

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

v-cloak指令

在vue渲染完指定的整个dom后才进行显示。它必须和css样式一起使用.

v-once指令

在第一次dom时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。