vue.js补充 组件,v-for,v-model,computed

一、vue细节

1.1 vue的好处

通过vue绑定的数据可以直接更改此数据在内存中的值，如果用js的话需要调用相应的API才可以完成此功能，提高了程序的性能。

1.2 v-on绑定事件

• 绑定多个事件

v-on="{时间类型:事件函数，…}

 <button value="提交" v-on="{mouseenter:onMouseEnter,mouseleave:onMouseLeave,click:onClick}">一个按钮</button>

 var vue = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            onClick:function () {
              console.log("点击了一下");
            },
            onMouseEnter:function () {
              console.log("鼠标往上移");
            },
            onMouseLeave:function () {
              console.log("鼠标离开");
            }
        }
    });

结果:

 鼠标往上移
test1.html (32,15)

 鼠标离开
test1.html (35,15)

 鼠标往上移
test1.html (32,15)

 点击了一下
test1.html (29,15)

 鼠标离开

1.3 v-show与v-if的区别

v-show绑定的对象为空时，不会从dom对象中删除该对象，但是v-if绑定的对象为空时，会从dom对象中删除该对象。

1.4 v-for简单的遍历

 <p v-for="s in stu">{{s}}</p>

 var vue = new Vue({
        el:"#app",
        data:{
            stu:['张三','李四','王五']
        }
    });

ctrl + l 清空网页自带编辑器的console

1.5 v-model

• v-model.lazy
  输入完数据才触发change事件，比如输入密码时，输入完再刷新密码

输入数据:<input type="text" placeholder="请输入数据" v-model.lazy="date">
    <br>
    输出:{{date}}

• v-model.trim
  去掉输入数据前后空格
• v-model.number
  使双向绑定的数据以number类型存储

1.6 v-model

v-model一般在类型为text,radio,checkbox,select的input标签里使用
select标签绑定的数据根据option中的value的值选择省份

 请选择省份:<select v-model="province">
       <option value="1">陕西</option>
       <option value="2">山东</option>
       <option value="3">广西</option>
       <option value="4">广东</option>
   </select>

 var vue = new Vue({
        el:"#app",
        data:{
            province:2
        }
    });

multiple作用是使选择的内容以列表形式呈现:

   请选择省份:<select v-model="province" multiple>
       <option value="1">陕西</option>
       <option value="2">山东</option>
       <option value="3">广西</option>
       <option value="4">广东</option>
   </select>

 data:{
            province:[]
        }

1.7 Computed计算属性

Computed依赖缓存，methods不依赖缓存，即Computed在调用时，先查Computed依赖的参数都变化了没，如果没有变化，则取旧值，即缓存中的值。而methods方法都会重新计算一遍。

• computed中的函数名不能喝data中的数据名一致
  Math.round():四舍五入

<table border="1">
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="chinese"></td>
        </tr>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="math"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.number="english"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td><input type="text" v-model="sum"></td>
        </tr>
        <tr>
            <td>平均成绩</td>
            <td><input type="text" v-model="ave"></td>
        </tr>
    </table>

var vue = new Vue({
        el:"#app",
        data:{
           chinese:0,
            math:0,
            english:0
        },
        computed:{
            sum:function () {
                return this.chinese + this.math + this.english;
            },
            ave:function () {
                return Math.round((this.chinese + this.math + this.english)/3);
            }
        }

    });

1.8 判断

v-if
v-else-if
v=else

二、组件

2.1 全局组件

组件的内容:

  Vue.component('first',{
        template:'<button @click="show">按钮</button>',
        methods:{
            show:function () {
              alert("一个很简单的全局组件");
            }
        }
    });

组件的域:

 new Vue({
        el:"#app"
    });
    new Vue({
        el:"#app1"
    })

使用组件:

<div id="app">
    <first></first>
    <first></first>
    <first></first>
</div>
<div id="app1">
    <first></first>
    <first></first>
    <first></first>
</div>

2.2 局部组件

定义方式一:

 new Vue({
        el:"#app",
        components: {
            first: {
                template: '<button @click="show">按钮</button>',
                methods: {
                    show: function () {
                        alert("一个很简单的全局组件");
                    }
                }
            }
        }
    });

定义方式二:

  var first = {
        template: '<button @click="show">按钮</button>',
            methods: {
            show: function () {
                alert("一个很简单的局部组件");
            }
        }
    }
    new Vue({
        el:"#app",
        components: {
           first:first
        }
    });