它的语法:
// 下面的全部回调函数中， this都是vm对象 var vm = new Vue({ el: '#app', data: { firstName:'', secondName:'' }, computed: {}, method: {}, watch: {/* 监视 */ firstName: function (newVal) { this.firstName = newVal + ' ' + this.secondName; } } });它会监听data中的属性,当用户改变了data中属性的值,就会触发对应的回调
class和style的绑定class和style的属性绑定同样使用的是使用 : 强制属性绑定
首先是写好 css属性,才能进一步使用vue将属性样式绑定在html上
head> <meta charset="UTF-8"> <title>Title</title> <style> .aClass{ font-size: 30px; color: #ff4400; } .bClass{ color: #00b4ff; } .cClass{ color: #1c036c; } </style> </head>语法:
:class="data中的css属性"
:class="{data中的css属性:boolean, data中的css属性:boolean}"
:style="{color:activeColor,fontSize:fontSize +'px'}", style有单位的+单位
<body> <div> <h2>1. class绑定 ::</h2> <p :class="a">123123字符串</p> <p :class="{aClass:isa, bClass:isb}">class是对象,绑定class 类名:boolean </p> <h2>2. style 绑定 </h2> <p :style="{color:activeColor,fontSize:fontSize +'px'}">2. style 绑定 </p> <button @click="update" >点击</button> </div>下面的vue对象
<script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#text', data: { a:'aClass', // 关联着最上面的css样式 isa:true, isb:false, activeColor:'red', fontSize:'30' }, methods:{ update() { this.a='bClass' } } }) 条件渲染 <p v-if="ok">deal</p> --> ok是vue中data的数据,ok为true时, 显示 <p v-else>false</p> --> 和 v-if成对出现, ok为false, 显示 <p v-show="ok"> 成功 </p> <p v-show="!ok"> 失败 </p> 列表的渲染 v-for, 及对数组的操作下面的例子使用v-for遍历数组中的每一个数据, 遍历的同时使用{{对象.属性}}展示属性,同时可以根据每个li的index绑定上不同的事件
<body> <div> <ul> <!-- 一旦有 v-for 加上key--> <li v-for="(p,index) in person" :key="index"> {{p.name}} : {{p.age}} : {{index}} <button @click="deleteP(index)"> 删除</button> <button @click="updateP(index,{name:'Cat',age:20})"> 更新</button> </li> </ul> </div> var vm = new Vue({ el: '#text', data: { person: [ /* vue 只会监视person的改变, 不会监视数组中数据的改变*/ {name: 'tom', age: 23}, {name: 'tom2', age: 223}, {name: 'tom2', age: 23}, {name: 'tom3', age: 232}, {name: 'tom5', age: 23} ] }, methods: { deleteP(index) { this.person.splice(index, 1); //从index开始 删除1个 }, updateP(index, person) { // this.person[index]=person; 并没有改变 persons ， 从index开始，删除1个 添加person this.person.splice(index, 1, person) }如果我们更新的js是这样写的, 数组中的内容确实会被改变,但是页面的上数据并不会更新
this.person[index]=person; 并没有改变 persons ， 从index开始，删除1个 添加person因为vue监听的person的改变,person中只有一个数组,虽然数组中的数据变了, 但是数组没变,所以我们使用vue的提供的splice进行数组的操作
splice(下标,数量,[新的对象数组])他可以实现数组的增删改的效果
删除
//删除起始下标为1，长度为2的一个值(len设置2) var arr2 = ['a','b','c','d'] arr2.splice(1,2); console.log(arr2); //['a','d']修改
//替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1 var arr = ['a','b','c','d']; arr.splice(1,1,'ttt'); console.log(arr); //['a','ttt','c','d']添加
var arr = ['a','b','c','d']; arr.splice(1,0,'ttt'); console.log(arr); //['a','ttt','b','c','d']其他数组相关的操作
unshift()添加到第一个
shift() 添加到最后一个
push() 压栈,栈顶
pop()弹出
sort()排序
reverse() 反转
数组的映射,过滤,排序js的箭头函数和java8的lambda表达式特别像
映射
array.map(item=>item.id) // 可以将数组中的每一个元素映射成他的id属性过滤
persons = person.filter(p => p.name.indexOf(searchModel)>=0); // 保留数组中满足条件的对象ES6的语法糖
把对象的指定字段存放进声明的多个常量中
排序
persons.sort(function (p1,p2) { // 升序 if (orderType===1){ return p1.age-p2.age; } else if (orderType===2){ // 降序 return p2.age-p1.age; } 事件绑定相关 @click绑定事件 <button @click="text1">text1</button> <button @click="text2('haha')">text2</button> <button @click="text3($event)">text3</button> <button @click="text4">text4</button><!-- 如果没有指定参数进去,传递进去的就是event--> <button @click="text5(123,$event)">text5</button> var vm = new Vue({ el:'#test', methods:{ text1(){ alert("text 1"); }, text2(msg){ alert(msg); }, text3(event){ alert(event.target.innerHTML); }, text4(event){ alert(event.target.innerHTML); }, text5(msg,event){ alert(msg+event.target.innerHTML); },