<!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>