vue

vue

Vue.js 构建数据驱动的web界面库。集中实现MVVMde VM层。容易与其他库或项目整合

通过尽可能简单的API实现相应的数据绑定和组合的视图组件
核心:相应的数据绑定系统, 数据与DOM保持同步
数据驱动的视图,普通的HTML模板中使用特殊的语法讲DOM"绑定"到底层数据

超级产品经理
{{msg | uppercase}}

## class对象绑定使用:v-bind:class="{className: Bollean}"如果class绑定的数据值true,className会被添加上,否则删除。
.pink {    color: pink;    }.bgColor {    background: tan;}

{{txt}}

var data = {    txt: 'pinkTan',    color: true,    bgColor: true}var view = new Vue({    el: '.app',    data: data,});
## class数组绑定使用:v-bind:class="[data.property1, data.property2]"
.pink {    color: pink;    }.bgColor {    background: tan;}

{{txt}}

var data = {    txt: 'pinkTan',    color: 'pink',    bgColor: 'bgColor'}var view = new Vue({    el: '.app',    data: data,});
## 样式的对象绑定使用:v-bind:style="{key:value}"

{{txt}}

var data = {    txt: 'pinkTan',    pink: 'pink',    tan: 'tan'}            var view = new Vue({    el: '.app',    data: data,});        
## 样式的数组绑定使用:v-bind:

{{ txt }}

var data = {    txt: 'pinkTan',    line: {        lineHeight: '30px',         height: '30px'    },    color: {        color: 'pink',        background: 'cyan'    }}var view = new Vue({    el: '.app',    data: data,});
# vue模板指令指令是模板中出现的特殊标记,让处理模板的库知道需要对这里的DOM元素进行一些对应的处理    v-text="msg"前缀是默认的 v-。指令的 ID 是 text,表达式是 msg。指令告诉 Vue.js, 当 Vue 实例的msg属性改变时,更新该 div 元素的 textContent。## 条件判断v-ifv-else
|&{{msg}}var data = {    msg: 'pinkTan',    isShow: false,    color: {        color: 'pink',        background: 'tan'    }}var vm = new Vue({    el: '.app',    data: data});
## 多条件判断使用:
// 判断执行体

// 自定义标签template

    |    &{{msg}}var data = {    msg: 'pinkTan',    isShow: false,    color: {        color: 'pink',        background: 'tan'    }}var vm = new Vue({    el: '.app',    data: data});
## 显示隐藏v-show="key"如果key是true那么该元素显示,否则隐藏该元素
|{{ msg }}var data = {    msg: 'pinkTan',    isShow: false,    color: {        color: 'pink',        background: 'tan'    }}var vm = new Vue({    el: '.app',    data: data});
## 循环模板v-for="item in msg"item是msg中的成员
{{ item.lisTxt }}

var data = {
// msg: ['pink', 'cyan', 'tan', 'black', 'khaki'],
msg: [
{
lisTxt: 'pink',
color: 'pink'
},
{
lisTxt: 'cyan',
color: 'cyan'
},
{
lisTxt: 'tan',
color: 'tan'
},
{
lisTxt: 'black',
color: 'black'
},
{
lisTxt: 'khaki',
color: 'khaki'
}
]
}

var vm = new Vue({
el: '.app',
data: data
});

## 多循环模板使用:
// 循环体
    {{ item.lisTxt }}var data = {//                msg: ['pink', 'cyan', 'tan', 'black', 'khaki'],    msg: [        {            lisTxt: 'pink',            color: 'pink'        },        {            lisTxt: 'cyan',            color: 'cyan'        },        {            lisTxt: 'tan',            color: 'tan'        },        {            lisTxt: 'black',            color: 'black'        },        {            lisTxt: 'khaki',            color: 'khaki'        }    ]}var vm = new Vue({    el: '.app',    data: data});
#JavaScript、vue.js#

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部