• vue.js


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    	<style>
    		.active{
    			 100px;
    			height: 100px;
    			background: green;
    		}
    		.text{
    			background: red;
    		}
    	</style>
    </head>
    <body>
    <div id="app">
    	<p>{{message}}</p>
    	<button @click="reverseMessage">
    		reverse
    	</button>
    	<button @click="say('what')">sayWhat</button>
    	<p>{{ reverse | capitalize }}</p>
    	<ul>
    		<template v-for='site in sites'>
    			<li>
    				{{ site.name }}
    			</li>
    			<li>-------------------</li>
    		</template>
    	</ul>
    	<ul>
    		<li v-for='(value, key, index) in object'>
    			{{ index }}. {{ key }} : {{ value }}
    		</li>
    	</ul>
    	<ul>
    		<li v-for='n in 6'>
    			{{ n }}
    		</li>
    	</ul>
    	<p>{{ ReverseMessage }}</p>
    	<p :class="classObject"></p>
    	<!-- 阻止单击事件冒泡 -->
    	<a v-on:click.stop="doThis"></a>
    	<!-- 提交事件不再重载页面 -->
    	<form v-on:submit.prevent="onSubmit"></form>
    	<!-- 修饰符可以串联  -->
    	<a v-on:click.stop.prevent="doThat"></a>
    	<!-- 只有修饰符 -->
    	<form v-on:submit.prevent></form>
    	<!-- 添加事件侦听器时使用事件捕获模式 -->
    	<div v-on:click.capture="doThis">...</div>
    	<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
    	<div v-on:click.self="doThat">...</div>
    
    	<!-- click 事件至少触发一次,2.1.4版本新增 -->
    	<a v-on:click.once="doThis"></a>
    	<!-- 同上 -->
    	<input v-on:keyup.enter="submit">
    	<!-- 缩写语法 -->
    	<input @keyup.enter="submit">
    	<p><!-- Alt + C -->
    	<input @keyup.alt.67="clear">
    	<!-- Ctrl + Click -->
    	<div @click.ctrl="doSomething">Do something</div>
    
    </div>
    	
    <script>
    	new Vue({
    		el: '#app',
    		data: {
    			message: 'Root',
    			reverse: 'lase',
    			sites:[
    				{name:'A'},
    				{name:'B'},
    				{name:'C'},
    				{name:'A'},
    				{name:'B'},
    				{name:'D'}
    			],
    			object:{
    				title: '标题',
    				about: '内容内容内容内容内容',
    				auth: '作者'
    			},
    			isActive: true,
    			error: false
    		},
    		methods: {
    			reverseMessage: function(){
    				this.message = this.message.split('').reverse().join('')
    			},
    			say: function(massage){
    				return alert(massage)
    			}
    		},
    		computed:{
    			ReverseMessage: function(){
    				return this.message.split('').reverse().join('')
    			},
    			classObject: function(){
    				return{
    					active: this.isActive && !this.error,
    					text: this.error && this.error.type === 'fatal'
    				}
    			}
    		},
    		filters: {
    			capitalize: function(value) {
    				if(!value) return ''
    				value = value.toString()
    				return value.charAt(0).toUpperCase() + value.slice(1)
    			}
    		}
    		
    	})
    	vm.site = 'cherry www.baicu.com';
    	
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    红黑树数据结构剖析
    miniui表单验证守则总结
    常用的JS页面跳转代码调用大全
    Jsp页面跳转和js控制页面跳转的几种方法
    处理和引发事件
    HeaderHandler 委托
    序列化SoapFormatter
    Debug.Assert
    C#的Thread类
    再次学习线程概念
  • 原文地址:https://www.cnblogs.com/cherryblog/p/7691949.html
Copyright © 2020-2023  润新知