第一天接触vue,看着文档写点例子。给身为小白的自己留点痕迹。引入vue.min.js即可。都是基本应用。
1.computed属性
computed是vue对象的计算属性,与已有属性绑定依赖关系,可以与属性一起动态改变。
var cpu = new Vue({
el:"#testDiv",
data: {
used : 0.2
},
computed:{
unUsed:function() {
return 1 - this.used;
}
}
})
//现在cpu这个对象相当于有used和unUsed2个属性,并且 二者之和为1;
computed没有set方法,但是可以手动添加。如下:
var cpu = new Vue({
el:"#testDiv",
data: {
used : 0.2,
unUsed:0.8
},
computed:{
full: {
set : function(newVal) {
this.used = newVal;
this.unUsed = 1-this.used;
}
}
}
})
cpu.full = 0.6; //页面显示的数据为0.6和0.4.所以数据是更新成功的。
2.mastache表达式可以是简单的 js表达式,不能是 语句
{{message.split('').reverse().join('')}}
//输出的值是message的反转字符串
{{flag?'我是对的':'我是错的'}} //如果data中flag是true则显示我是对的。 注意:这里的flag只能是vue对象的属性,不能是js的全局变量
3.v-for含有index的实例
<div id="objectX">
<ul v-for="(p, index) in objectData">
<li>{{p.name}}</li>
<li>{{p.age}}</li>
<li>{{p.sex}}</li>
<li>{{index}}</li>
</ul>
</div>
<script>
var userData = [{name:'john',age:15,sex:'1'},{name:'lulu',age:20,sex:'1'}];
var user = new Vue({
el:'#objectX',
data:{
objectData:userData
}
})
</script> //截图如下
v-for和v-if同时使用。
<tr v-for="(relate, index) in channels" v-if='relate.channel_number'>
<td v-if="relate.channel_number">{{index}}</td>
<td v-if="relate.channel_number" :id="relate.channel_number">频道 {{relate.channel_number}}</td>
<td v-if="relate.channel_number" class='sourceName' :id='relate.live_id'>{{relate.name}}</td>
<td v-if="relate.channel_number"><img class='del' src='../img/dele-normal.png'></td>
</tr>
<tr v-else :style='{visibility:"hidden"}'>
</tr>
//v-if可以使用v-for中的变量。配合v-else可以达到变量值不同显示不同的效果。
3.v-bind属性绑定
绑定class,可使用数组或者对象。*:class={class1:flag}后面是标志位,前面的是字符串。无论vue对象是否定义,都会转为字符串。如下面的例子,data中定义padding:‘vuewProp’.但第一个div的class仍然是padding。
<div id="bindDiv">
<div :class="classObject" :style="[styleO,{'line-height':lineHeight}]">我是text-indext 我超长了布局应该怎么变化,左侧有文字么? 是有的</div>
<div :class="{ padding: paddingFlag}">我是padding,我超长的布局如下所示。左侧有文字么? 没有的</div>
</div>
//下面是js代码
var bindVue = new Vue({
el:"#bindDiv",
data:{
paddingFlag:true,
classObject: {
indent : true
},
styleO : {
backgroundColor:'green',
fontSize:'18px'
},lineHeight:'30px'
}
})
4.绑定click并传入this。
通过在methods中定义函数,通过@click='fun($event)'可以传入this。代码如下,阻止递归。
<div id="parent" @click="parentClick" class="parentDiv">
父元素
<div id="child" @click="childClick($event)" class="childDiv">子元素</div>
</div>
methods :{
/*阻止事件递归, $event是触发事件的本身(this)*/
parentClick : function() {
console.log("我是父元素的点击事件");
},
childClick : function(e) {
e.stopPropagation();
console.log("我是子元素的点击事件");
}
}
//this通过$event传入。
5.表单元素通过v-model实现++双向++绑定
以select和checkbox为例。
<input type="checkbox" name="box" v-model="hobby" value="basketball" />篮球
<input type="checkbox" name="box" v-model="hobby" value="soccer" />足球
<input type="checkbox" name="box" v-model="hobby" value="tabletennis" />棒棒球
<span>{{hobby}}</span>
js: data:{hobby:[]}
数组的顺序就是选择的顺序。
<select id="selectJob" multiple="true" v-model="job">
<option value="lan">法师</option>
<option value="bai">坦克</option>
<option value="pao">小兵</option>
<option value="boss">火龙</option>
</select>
<span>{{job}}</span>
js: data:{job:[]} //截图如下
修改vue对象的值,select选择也会发生相应的改变。因为关联是双向的。不过给input直接赋值不会触发值得改变。
可加入lazy,number,trim等修饰符。(eg:v-model.lazy.number.trim)
lazy是指触发事件改变,把input propertychange改为change事件。简单说就是把输入时处罚改为失去焦点触发。
trim是输入完成后去除前后空格。
number不是类型检测,是把input的内容转化为number,原本为字符串。
6.v-pre和v-cloak
v-pre是跳过vue编译,使编辑过程更快。v-cloak是编译完成前给元素添加的样式。需要添加到css中。[v-cloak]{}
**通过@import引入的css文件中的样式可能没有效果。因为资源加载先后的问题。所以要加在link引入的文件或者直接内联到html中。
7.组件中含有定时器
组件化开发是,开始看到export default ,不知道定时任务写在什么位置。尝试1:给组件命名,然后写定时任务。代码如下
var topComp = {
name:'topComp',
data() {
return {message:'...', time:new Date()}
},
}
setInterval(function() {
topComp.time = new Date();
}, 5000)
module.export = topComp; //组件引入后失败,定时任务可以执行。但是不能刷新页面
尝试2:mounted方式写入,代码如下
mounted:function() {
this.nextTick(function() {
//定时器
})
} //没有效果,定时器根本没有执行
最终使用beforeCreate方法成功了,他的触发时间是在组件实例化之后。
beforeCreate: function() {
//serInterval(///)
}