Vue.js基础作操作

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:

生命周期图示