Vue学习（二）

Vue语法

v-model可以实现表单和属性的双向同步，并且vue还提供了以下三种修饰符：

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

这里提供一个参考菜鸟教程上一个笔记用v-model实现了一个多选框的全选效果,代码如下：

<html>
    <head>
        <title>基于Vue的全选表单</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="select">
            <input type="checkbox" v-model="check" id="selectAll" v-on:change="changeAllchecked"/>
            <label for="selectAll">全选</label><br/>
            <input type="checkbox" v-model="checkName" id="a" value="a"/>
            <label for="a">A</label>
            <input type="checkbox" v-model="checkName" id="b" value="b"/>
            <label for="b">B</label>
            <input type="checkbox" v-model="checkName" id="c" value="c"/>
            <label for="c">C</label>
            <input type="checkbox" v-model="checkName" id="d" value="d"/>
            <label for="d">D</label>
        </div>
        <script src="selectAll.js" async defer></script>
    </body>
</html>

selectAll.js

var vm=new Vue({
    el:'#select',
    data:{
        check:false,
        checkAttr:['a','b','c','d'],
        checkName:[]
    },
    methods:{
        changeAllchecked:function(){
            if(this.check)
            {
                this.checkName=['a','b','c','d'];
            }
            else{
                this.checkName=[];
            }
        }
    }
});
vm.$watch('checkName',function (newValue, oldValue){
    if(newValue.length==this.checkAttr.length){
        this.check=true;
    }
    else{
        this.check=0;
    }
})

Vue组件


<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

对于组件其实我的第一感觉是可以有很多别的更方便更利于理解的方法去代替它，所以我很困惑号称为Vue最重要的功能，就只是为了复用一些自己定义的模块吗？网上的解释是工程大的时候方便管理，目前学习阶段还没接触那么大的项目，暂且跳过这个部分，以后做项目中如果有了更深的体会再来补充

Vue学习（二）

Vue语法

Vue组件

全站热榜