vue官方实例-分例-14-19

vue实例分例：

ps：v-model双向数据绑定
   // 二者等价
   <input v-model="text">
   
   <input v-bind:value="text" v-on:click="text=$event.target.value">
   // 将其value特性绑定到一个名叫value的prop上；在其input事件被触发时将新的值通过自定义的input事件抛出
   
   <custom-input v-model="text"></custom-input>
   
    Vue.component('custom-input', {
        props:['value'],
        template:`
            <input 
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            >
        `
    })


实例14：监听事件
    <div id="app14">
            <div class="title">(14) app14-监听事件</div>
            <button v-on:click="counter += 1">Add 1</button>
            <p>上面按钮被点击了{{counter}}次</p>
    </div>


  var app14 = new Vue({
            el:'#app14',
            data:{
                counter:0
            }
 })


实例15：
 <div id="app15">
            <div class="title">(15) app15-事件处理方法</div>
            <button v-on:click="greet">Greet</button>
 </div>


    var app15 = new Vue({
            el:'#app15',
            data:{
                name:'vue.js'
            },
            methods:{
                greet:function(event){
                    alert('hello ' + this.name)
                    if(event){
                        alert(event.target.tagName)
                    }
                }
            }
        })
        app15.greet();


实例16：
   <div id="app16">
            <div class="title">(16) app16-内联处理器中的方法</div>
            <button v-on:click="say('hi')">say hi</button>
            <button v-on:click="say('what')">say what</button>
            <div>如需在内联语句处理器中访问原始dom事件，可用特殊变量$event将其传入方法</div>
            <button v-on:click="warn('form cannot be submitted',$event)">Submit</button>
    </div>


     var app16 = new Vue({
            el:'#app16',
            methods:{
                say:function(msg){
                    alert(msg);
                },
                warn:function(msg,event){
                    if(event){
                        event.preventDefault();
                    }
                    alert(msg);
                }
            }
        })


实例17：
 <div id="app17">
            <div class="title">(17) app17-事件修饰符</div>
            <!-- vue为v-on提供了事件修饰符 -->
            <!-- .stop阻止事件继续传播 -->
            <a v-on:click.stop="doThis"></a>
            <!-- .prevent提交事件不再重载页面 -->
            <form v-on:submit.prevent="doSubmit"></form>
            <!-- 修饰符串联 -->
            <a v-on:click.stop.prevent="doWhat"></a>
            <!-- 只有修饰符 -->
            <form v-on:submit.prevent></form>
            <!-- 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后再交由内部元素处理 -->
            <div v-on:click.capture="doThis"></div>
            <!-- 只当在event.target是当前元素自身时处理触发函数，即事件不是从内部元素触发的 -->
            <div v-on:click.self="doThat">...</div>
            <!-- 点击事件只触发一次 -->
            <a v-on:click.once="doThis"></a>
            <!-- .passive滚动事件的默认行为将立即触发而不会等待onScroll完成,能提升移动端的性能 -->
            <div v-on:scoll.passive="onScroll">...</div>
            <!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 
                会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
            <!-- 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示
                一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。 -->
    </div>


实例18：
   <div id="app18">
            <div class="title">(18) app17-按键修饰符</div>
            <!-- 只有在key为enter时调用vm.submit() -->
            <input v-on:keyup.enter="submit">
            <input v-on:keyup.page-down="onPageDown">
            <!-- 按键码 -->
            <input v-on:keyup.13="submit">

     </div>


实例19：
     <div id="app19" class="common">
        <div class="title">(19) app19-表单操作</div>
        <div class="parting-line">
            <div>input:</div>
            <input v-model="msg" placeholder="edit" />
            <p>msg:{{msg}}</p> 
        </div>
        <div class="parting-line">
            <div>textarea:</div>
            <span>multiline msg:</span>
            <p style="white-space:pre-line;">{{message}}</p>
            <br />
            <textarea v-model="message" placeholder="mutiple lines"></textarea>
        </div> 
        <div class="parting-line">
            <div>checkbox:</div>
            <input type="checkbox" id="checkbox" v-model="checked" />
            <label for="checkbox">{{checked}}</label>
        </div>
        <div class="parting-line">
            <div>多个复选框，绑定到同一个数组：</div>
            <div id="mul-checkbox">
                <input type="checkbox" id="jack" value='jack' v-model="checkedNames">
                <label for="jack">Jack</label>
                <input type="checkbox" id="john" value='john' v-model="checkedNames">
                <label for="john">john</label>
                <input type="checkbox" id="mike" value='mike' v-model="checkedNames">
                <label for="mike">mike</label>
                <br>
                <span>checked names:{{checkedNames}}</span>
            </div>
        </div>
        <div class="parting-line">
            <div>单选按钮radio</div>
            <input type="radio" id="one" value="one" v-model="picked" />
            <label for="one">one</label>
            <br />
            <input type="radio" id="two" value="two" v-model="picked" />
            <label for="two">two</label>
            <br />
            <span>picked:{{picked}}</span>
        </div>
        <div class="parting-line">
            <div>选择框select</div>
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>selected:{{selected}}</span>
        </div>
        <div class="parting-line">
            <div>v-for渲染的动态选项</div>
            <select v-model="selected1">
                <option v-for="option in options" v-bind:value="option.value">
                    {{option.text}}
                </option>
            </select>
            <span>selected:{{selected1}}</span>
        </div>
        <div class="parting-line">
            <div>值绑定</div>
            <!-- 当选中时，`picked` 为字符串 "a" -->
            <input type="radio" v-model="picked" value="a">
            <!-- `toggle` 为 true 或 false -->
            <input type="checkbox" v-model="toggle">
            <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
            <select v-model="selected">
                <option value="abc">ABC</option>
            </select>
        </div>
        <div class="parting-line">
            <div>复选框</div>
            <input
                type="checkbox"
                v-model="toggles"
                true-value="yes"
                false-value="no"
            />
        </div>
        <div class="parting-line">
            <div>修饰符</div>
            <!-- 默认情况v-model在每次input事件触发后将输入框的值与数据进行同步，可以通过添加lazy修饰符从而
            转变为使用change事件进行同步 -->
            <!-- 在change时而非input时更新 -->
            <input v-model.lazy="msg">
            <!-- 若想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符 -->
            <input v-model.number="msg" type="number" />
            <!-- 若要自动过滤用户输入的首尾空白字符可以给v-model添加trim修饰符 -->
            <input v-model.trim="msg" />
        </div>
     </div>


       var app19 = new Vue({
            el:'#app19',
            data:{
                msg:'fs',
                message:'dsdss',
                checked:'true',
                checkedNames:[],
                picked:'',
                selected:'',
                selected1:'B',
                options:[
                    {text:'One', value:'A'},
                    {text:'Two', value:'B'},
                    {text:'Three', value:'C'}
                ],
                picked:'',
                toggle:'',
                toggles:'yes'
            }
        })

　　参考 & 感谢：vue官网 & 各路大神