Vue学习笔记（四）-内部指令

1.v-model双向数据绑定

修饰符：

• .lazy：取代 imput 监听 change 事件。
• .number：输入字符串转为数字。
• .trim：输入去掉首尾空格。

<div id="app">
        <p>{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="message"></p>
        <!--.lazy失去焦点才改变值-->
        <p>v-model.lazy<input type="text" v-model.lazy="message"></p>
        <!--.number必须是数字才双向绑定 前提必须先输入数字才有效-->
        <p>v-model.number:<input type="text" v-model.number="message"></p>
        <!--.trim去除前后空格-->
        <p>v-model.trim:<input type="text" v-model.trim="message"></p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello World!'
            }
        })

文本域绑定数据绑定

<textarea cols="30" rows="10" v-model="message"></textarea>

多选按钮绑定一个值

<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>

<script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isTrue:true

            }
        })
    </script>

多选绑定数组

<p>
            <input type="checkbox" id="test1" value="test1" v-model="webNames">
            <label>test1</label>
            <input type="checkbox" id="test2" value="test2" v-model="webNames">
            <label>test12</label>
        </p>
        <p>{{webNames}}</p>

<script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                webNames:[]

            }
        })
    </script>

单选按钮绑定数据

       <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
        </p>
        <p>选择的是：{{sex}}</p>


<script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello World!',
                isTrue:true,
                webNames:[],
                sex:'男'

            }
</script>    

 2.v-pre原样输出

在模板中跳过vue的编译，直接输出原始值。

<div v-pre>{{message}}</div>

3.v-cloak

在vue渲染完指定的整个DOM后才进行显示.

<div v-cloak>渲染完成后才显示</div>

4.v-once

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

<div v-once>{{message}}</div>
<div><input type="text" v-model="message"></div>