操作css类名：
通过对象的方式操作类名
v-bind:class="{active:A,error:B}"
data: {
A:true,
B:true,
flag:true
}
通过数组的方式操作类名:
v-bind:class="[a,b]"
data: {
a:'active',
b:'error'
}
混合使用：
v-bind:class="[a,b,{test:Istest}]"
v-bind:class="sumclass"
v-bind:class="objclass"
data: {
a:'active',
b:'error',
Istest:true,
sumclass:['active','error'],
objclass:{
active:true,
error:true,
}
}
1、样式绑定之内联样式Style：
v-bind:style="{height:h,width:w,border:b}"
v-bind:style="objstyle"
v-bind:style="[objstyle,overrideStyles]"
data: {
h:'150px',
w:'190px',
b:'1px solid blue',
objstyle:{
height:'150px',width:'190px',border:'1px solid blue'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
}
2、v-if （控制元素是否渲染到页面）
v-show 控制元素样式是否显示（已经渲染到页面）display:none
3、v-for
用于循环的数组里面的值可以是对象，也可以是普通元素
v-for="item in items"
<!-- 循环结构-遍历对象
v 代表 对象的value
k 代表对象的 键
i 代表索引
--->
v-for='(v,k,i) in obj'
key 的作用
key来给每个节点做一个唯一标识
-
key的作用主要是为了高效的更新虚拟DOM
v-for="item in items" :key="item.id"
Vue第二天：
1、表单基本操作
<form action="www.baidu.com">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model="user.uname" />
</span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="0" v-model="user.gender"/>
<label for="male">男</label>
<input type="radio" id="female" value="1" v-model="user.gender"/>
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好：</span>
<input type="checkbox" id="ball" value="0" v-model="user.hobby"/>
<label for="ball">篮球</label>user.
<input type="checkbox" id="sing" value="1" v-model="user.hobby"/>
<label for="sing">唱歌</label>user.
<input type="checkbox" id="code" value="2" v-model="user.hobby"/>
<label for="code">写代码</label>
</div>
<div>
<span>职业：</span>
<select v-model="user.occupation" multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介：</span>
<textarea v-model="user.desc"></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent='handle'/>
</div>
</form>
var vm = new Vue({
el: '#app',
data: {
user:{
uname: 'John',
gender: 1,
hobby: ['1', '2'],
occupation: ['2','3'],
desc: '添加描述'
}
},
methods: {
handle: function(){
console.log(this.user);
}
}
});
2、表单修饰符
.number 转换为数值
<input v-model.number="age" type="number">
.trim 自动过滤用户输入的首尾空白字符
<input v-model.trim="msg">
.lazy 将input事件切换成change事件
<input v-model.lazy="msg" >
.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
3、自定义指令
钩子函数:
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）
update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
钩子函数参数:(后面会详细讲到)
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式
- arg：传给指令的参数，可选
<input type="text" v-focus />
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus();
},
});
// 注册一个局部自定义指令 `v-focus`
var vm = new Vue({
directives: {
inserted: function (el) {
// 聚焦元素
el.focus();
}
}
})
4、计算属性 computed
- 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
- 计算属性是基于它们的响应式依赖进行缓存的
- computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
<div>{{reverseString}}</div>
<div>{{reverseMessage()}}</div>
methods: {
reverseMessage: function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 当data 中的 num 的值改变的时候 reverseString 会自动发生计算
for(var i=0;i<=this.num;i++){
total += i;
}
// 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果
return total;
}
}
5、侦听器 watch
- 使用watch来响应数据的变化
- 一般用于异步或者开销较大的操
- watch 中的属性 一定是data 中 已经存在的数据
- 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
<input type="text" v-model='firstName'>
<input type="text" v-model='lastName'>
<div>{{fullName}}</div>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jim Green'
},
//方法一使用计算属性
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName;
}
//watch 属性 定义 和 data 已经 methods 平级
watch: {
// 注意： 这里firstName 对应着data 中的 firstName
// 当 firstName 值 改变的时候 会自动触发 watch
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 这里 lastName 对应着data 中的 lastName
lastName: function(val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
侦听器案例：
<div id="app">
<div>
<span>用户名：</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
侦听器
1、采用侦听器监听用户名的变化
2、调用后台接口进行验证
3、根据验证的结果调整提示信息
*/
var vm =new Vue({
el:'#app',
data: {
uname:'',
tip:''
},
methods:{
checkName:function(uname){
var that=this;
setTimeout(function(){
if(uname==='admin'){
that.tip='此昵称已注册，请重新输入'
}else{
that.tip='此昵称可放心使用'
}
},1000)
}
},
watch:{
uname:function(val){
this.checkName(val);
this.tip='正在验证中...'
}
}
});
