vue.js的使用
vue中点击事件可以加在<a> ,<input>,<button>上
一个vue实例中可以绑定往methods上多个事件,并且对其他data属性进行操作
<div id="app">
<h2>{{product}} are in stock</h2>
<p>{{msg}}</p>
<button v-on:click="reverseMessage">反转消息</button>
<button v-on:click="change">点一下</button>
<input type="submit" v-on:click="change2" value="再点一下"></input>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
product: 'Boots',
msg:'hello Vue.js!'
},
methods:{
reverseMessage:function(){
this.msg = this.msg.split('').reverse().join('');
app.product = 'isTrue'
},
change:function(){
app.todos.push({text:'next Project'})
},
change2:function(){
console.log(new Date());
}
}
});
</script>
for循环
<li v-for="todo in todos">{{todo.text}}</li>
todos:[
{text:'learn javaScript'},
{text:'learn vue'},
{text:'??????'},
],
上图
vue中可以创建多个实例
<div id="vue1"></div>
<div id="vue2></div>
<script>
var vue = new Vue({
el:'#vue1',
});
var vue2 = new Vue({
el:'#vue2',
})
</script>
当vue实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
使用Object.freeze()
阻止修改现有的属性,也意味着响应系统无法再追踪变化。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
在console改变foo的值:
vue指令:
v-if
判断
v-for
循环,不多说
v-on
指令添加一个事件监听器
v-model
实现表单输入和应用状态之间的双向绑定
生命周期函数
beforeCreate
:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。(还没懂什么意思)
created
:
beforeMount
:
mounted
:
beforeUpdate
:
update
:
activated
:
deactivated
:
beforeDestory
:
destroyed
:
errorCaptured
: