详解Vue的数据及事件绑定和filter过滤器

<div id="app">
    <img v-bind:src='src' :title="title">
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            src:'../images/8.png.jpeg',   //修改Model后，视图也跟着改变
            title:'蝴蝶'
        }
    })
</script>

<div id="app">
   <h2>{{message}}</h2>
   <input type="text" v-model="message">
</div>
<script>
   var vm=new Vue({
       el:'#app',
       data:{
           message:'数据双向绑定'
       }
   })
</script>

<div id="app">
    <input type="text" v-model.lazy='msg'>
    <p>{{msg}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'懒加载'
        }
    })
</script>

<div id="app">
    <input type="text" v-model.number='num'>
    <p>num的类型：{{typeof(num)}}</p>
    <!--<input type="text" v-model.trim="val">  -->
    <!--<p>val的长度是：{{ val.length }}</p>  -->
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            num:''
        }
    })
</script>

<div id="example">
    <button v-on:click="say('hi')">Say Hi</button>       //内联语句处理器
    <button v-on:click="say('what')">Say What</button>
	<!-- <a href="https://www.baidu.com" v-on:click="say('hello',$event)">
去百度</a>  -->       //内联语句处理器中访问原生 DOM 事件
</div>
<script>
    new Vue({
        el: '#example',
        methods: {
            say: function (msg) {
                alert(msg)
            }
            //say: function (msg,event) {
                   // event.preventDefault()
               // }
        }
    })
</script>

<a v-on:click.stop="doThis"></a>
<div v-on:click.capture="doThis">...</div>

<input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit"><input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

<div id="example" v-bind:class="colorName" v-on:click="changeColor">

<div id="example" v-bind:class="[class1,class2]" v-on:click="changeColor"></div>

<div v-bind:style="{color:fontColor,fontSize:mySize}">西柚
 data: {
    fontColor: 'white',
    mySize: '30px'
 }
 
<div v-bind:style="[baseStyles,vueStyles]">西安邮电大学</div>
 data: {
     baseStyles:{ 'color': 'red'},
     vueStyles: { 'font-size':'35px'}
 }

{{ message | filterA }}

<div v-bind:id="rawId | formatId"></div>

Vue.filter(‘过滤器名'，function(){
实现过滤功能
})

Vue.filter('filterA',function (value) {
    return value+'Hello'
})
new Vue({})

new Vue({
	el:'#id',
	//filters{
		//过滤器名：function(参数){
		//过滤功能
		//}
	//}
	filters:{     //局部过滤器，只能在当前vue实例绑定的div里面用
		filterA:function(value){
			return value+'Hello'
		}
	}
})

{{ message | filterA | filterB }}

{{ message | filterA('arg1', arg2) }}

<div id="app">
    <p>{{'2022'|filterA|filterB}}</p>
</div>
<script>
    new Vue({
        el:'#app',
        filters:{
            filterA:function(value){
                return value+' is'
            },
            filterB:function(value){
                return value+' coming!'
            }
        }
    })
</script>