1. 主页
  2. 文档
  3. Vue3.js
  4. vue总结

vue总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"></div>
		{{a}}
		{{valhtml}}
		
		<div v-html="" id=""></div>
		<div v-show="" id=""></div>
		<div v-for="(item,index) in Data" id=""></div>	
		<div v-for="(item,value,index) in Data" id=""></div>	
		<div v-for="value in Data" id=""></div>	
		<div v-for="int in 10" id=""></div>	
		<input type="" name="" id="" v-model="resssl" value="" />	
			
		<div v-if ="" id=""></div>
		<div v-else ="" id=""></div>
		<div v-else-if="" id=""></div>
		
		<div v-bind:class="{'color':red}" id=""></div>
		<div v-bind:class="{'color':red,'age':30}" id=""></div>
		<div v-bind:class="['abc','bbc']" id=""></div>
		<div v-bind:style="{'color':color,'age':30}" id=""></div>

==========================================================================		
		<div id="app">
		  <div v-bind:style="styleObject">菜鸟教程</div>
		</div>
		
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    styleObject: {
		      color: 'green',
		      fontSize: '30px'
		    }
		  }
		})
		</script>
==========================================================================

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>


==========================================================================

<div v-on:click="fun(i)" id=""></div>
<script>

var vm = new Vue({
	el:'#app',
	methods:{
		fun : function (i){
			alert(111);
		}
	}
});
</script>


==========================================================================

<!-- 阻止单击事件冒泡 -->
<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>

==========================================================================

<div id="app">
  <p>input 元素:</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }
})
</script>

==========================================================================

自定义组件
<div id="app">
	<runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>


==========================================================================
		
		<div v-on:click="con++" id=""></div>
		<div v-on:click="reworr" id=""></div>
		
		
		var data = { a:1}
		var vm = new Vue(function(){
			el:'',
			//data:data
			data:{
				name : 'wulei',
				age : 30,
				sex : 'nv'
				valhtml: '<p>sdafsafsdfdsafsdaf</p>'
			},
			//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
			beforeCreate:function(){
				console.log('beforeCreate');
			},
			/* 在实例创建完成后被立即调用。
			在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。
			然而,挂载阶段还没开始,$el 属性目前不可见。 */
			created	:function(){
				console.log('created');
			},
			//在挂载开始之前被调用:相关的渲染函数首次被调用
			beforeMount : function(){
				console.log('beforeMount');
			
			},
			//el 被新创建的 vm.$el 替换, 挂在成功	
			mounted : function(){
				console.log('mounted');
			
			},
			//数据更新时调用
			beforeUpdate : function(){
				console.log('beforeUpdate');
					
			},
			//组件 DOM 已经更新, 组件更新完毕 
			updated : function(){
				console.log('updated');
					
			},
			created	:function(){
				console.log('created');
			},
			methods: {
				reworr:function (){
					return 111;
				}
			},
			computed:{
				rewooo:function (){
					return 2222;
				},
				site:{
					get:function (){
						return 111;
					},
					set:function (){
						return 2222;
					}
				
				},
			}
			
			
			
		});
		
		vm.$data.a = "test...."
		vm.$.watch('a',function(new,old){
			//....................
		});
	
		
		
		
		
	</body>
</html>
这篇文章对您有用吗?

我们要如何帮助您?