vue 入门demo1

第一天接触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中。

猜你喜欢