乐趣区

关于vue.js:Vue学习笔记四

jiezi

1 表单绑定

能够利用 v-model 在表单控件元素上创立双向的数据绑定，v-model会依据控件类型主动选取正确的办法来更新元素。

2 文本框

文本框的绑定例子如下：

<div id="app">
    <p>input</p>
    <input v-model="message">
    <p>{{message}}</p>
    
    <p>textarea</p>
    <textarea v-model="message2"></textarea>
</div>
new Vue({
    el:'#app',
    data:{
        message:'',
        message2:''
    }
})

3 按钮

3.1 单选

data中的值为 <input> 的value，如：

<div id="app">
    <input type="radio" value="Value1" v-model="picked">
    <input type="radio" value="Value2" v-model="picked">
    <span> 选中的值为：{{picked}}</span>
</div>
new Vue({
    el: '#app',
    data: {picked:'Value1'}
})

3.2 多选

单个多选绑定的数据是一个布尔值，多个多选绑定的是一个数组：

<div id="app">
    <input type="checkbox" v-model="checked">
    <span> 是否选中：{{checked ? "选中" : "不选中"}}</span>
    <br>
    
    <input type="checkbox" value="Value1" id="box1" v-model="checked2">
    <label for="box1">Value1</label>
    <input type="checkbox" value="Value2" id="box2" v-model="checked2">
    <label for="box2">Value2</label>
    <input type="checkbox" value="Value3" id="box3" v-model="checked2">
    <label for="box3">Value3</label>
    <br>
    <span> 选中的值为：{{checked2}}</span>
</div>
new Vue({
    el: '#app',
    data: {
        checked:'Value1',
        checked2:[]}
})

4 列表

<div id="app">
    <select name="fruit" v-model="selected">
        <option value=""> 请抉择一个 </option>
        <option value="苹果"> 苹果 </option>
        <option value="香蕉"> 香蕉 </option>
    </select> 

    <div>
        抉择的水果是：{{selected}}
    </div>
</div>
new Vue({
    el: '#app',
    data: {selected:''}
})

5 修饰符

  • .lazy：默认状况下，v-model在 input 事件中同步输入框的值与数据，但能够增加一个修饰符 .lazy，从而转变为在change 事件中同步数据，比方<input v-model.lazy="meesage">
  • .number：主动将用户的输出值转化为 Number 类型，如果原值的转换后果是 NaN 会返回原值，比方<input v-model.number="age" type="number">
  • .trim：主动过滤用户输出的首尾空格，比方<input v-model.trim="message">

修饰符能够混合应用，例子：

<div id="app">
    <input type="text" v-model.lazy="test">
    <br>
    <p>{{test}}</p>

    <input type="text" v-model.number.lazy="test2">
    <br>
    <p>{{test2}}</p>

    <input type="text" v-model.trim="test3">
    <br>
    <p>{{test3}}</p>
</div>

6 组件

组件能够扩大 HTML 元素，封装可重用的代码，组件零碎能够用独立可复用的小组件来构建大型利用，简直任意类型的利用界面都能够形象为一个组件树。
注册一个全局组件语法如下：

Vue.component(tagName,options)

其中 tagName 为组件名，options为配置选项。注册后，按如下形式调用组件：

<tagName></tagName>

7 全局组件

全局组件就是所有实例都能应用的组件，例如：

<div id="app">
    <test-title></test-title>
</div>
Vue.component('test-title',{template:'<h1>Test Title</h1>'})
new Vue({el:'#app'})

留神标签名不能大写，比方写成：

<div id="app">
    <testTitle></testTitle>
</div>
Vue.component('testTitle',{template:'<h1>Test Title</h1>'})

页面不会显示题目。

8 部分组件

部分组件就是在本实例内应用的组件，比方：

<div id="app">
    <test-title></test-title>
</div>
new Vue({
    el: '#app',
    components: {
        'test-title': {template:'<h1>Test Title</h1>'}
    }
})

也能够把模板的内容分离出来成为一个变量：

var myTemplate = {template:'<h1>Test Title</h1>'}
new Vue({
    el: '#app',
    components: {'test-title': myTemplate}
})

9 prop

prop是子组件来承受父组件传递过去的数据的一个自定义属性，父组件的数据须要通过 props 把数据传递给子组件，子组件须要显示地应用 props 选项申明prop：

<div id="app">
    <test-title title="Test Title"></test-title>
</div>
Vue.component('test-title',{props:['title'],
    template:'<h1>{{title}}</h1>'
    //template:'<h1>{{this.title}}</h1>'
})
new Vue({el: '#app'})

9.1 动静prop

相似于 v-bind 绑定 HTML 个性到一个表达式，也能够利用 v-bind 动静绑定 props 值到父组件的数据中，每当父组件的数据变动时，该变动会传递给子组件：

<div id="app">
    <input v-model="message">
    <br>
    <test-title v-bind:title="message"></test-title>
</div>
 Vue.component('test-title',{props:['title'],
    template:'<h1>{{title}}</h1>'
})
new Vue({
    el: '#app',
    data: {message:''}
})

首先当输入框内容发生变化时，更新父组件的 message，再传递给子组件的title，最初更新<test-title> 的内容。
上面是一个绑定无序列表的例子：

<div id="app">
    <ol>
        <test-item v-for="i in items" v-bind:val="i"></test-item>
    </ol>
</div>
Vue.component('test-item',{props:['val'],
    template:'<h1>{{val.text}}</h1>'
})
var vm = new Vue({
    el: '#app',
    data: {
        items:[{text:'111'},
            {text:'222'}
        ]
    }
})

留神 prop 是单向绑定的，当父组件属性变动时传导到子组件，然而不会反过来。

9.2 子组件回传

父组件应用 props 传递数据给子组件，如果子组件把数据传递回去须要应用自定义事件，能够在 v-on 绑定自定义事件，每个 Vue 实例都实现了事件接口，也就是：

  • 应用 $on(eventName) 监听事件
  • 应用 $emit(eventName) 触发事件

另外父组件能够在应用子组件的中央间接用 v-on 来监听子组件触发的事件，例子：

<div id="app">
    <p> 总计：{{total}}</p>
    <test v-on:increment="incrementTotal"></test>
    <br><br>
    <test v-on:increment="incrementTotal"></test>
</div>
Vue.component('test',{template:'<button v-on:click="incrementHandler"> 点击减少，目前为{{counter}}</p>',
    data:function(){
        return {counter:0}
    },
    methods:{incrementHandler:function(){
            this.counter += 1
            this.$emit('increment')
        }
    }
})
new Vue({
    el: '#app',
    data: {total:0},
    methods:{incrementTotal:function(){this.total += 1}
    }
})

成果：

当点击任意一个按钮减少时，更新子组件内的 counter，同时应用this.$emit 向父组件传值，这里没有参数，如果有参数的话在前面加上即可：this.$emit("func",parm)。

父组件中援用子组件的中央须要增加 v-on:func，其中v-on:func 中的 func 须要与 this.$emit("func") 中的 func 同名，接着在 v-on:func="func2" 中批改 func2 为父组件的函数即可。简写形式为：

@func="func2"

在某个组件的根元素上监听一个原生事件能够应用 .native 润饰v-on，比方：

<test-title v-on:click.native="func"></test-title>

9.3 对于子组件的data

下面的例子中 data 不是一个对象而是一个函数，如果 data 间接返回一个已有对象会影响其余实例，比方批改下面的 data 为：

var counter = {counter:0}
//...
data:function(){return counter}

成果如下：

也就是子组件共享了数据，而批改为：

data:function(){
    return {counter:0}
}

成果如下：

这是因为返回给每个实例一份独立的拷贝。

退出移动版