Vue学习笔记——基础01

基础

1.创建Vue实例

el属性：进行父级的选中
data：进行变量的声明
methods：命令的声明

<div id="app">
	{{msg}}
</div>
<p v-html="rawHtml"></p>
<script type="text/javascript">
var vm = new Vue({
	el   : "#app",
	data : {
          msg:"简单的使用",
          rawHtml : '<span style="color:red">this is should be red</span>'// 动态给控件值，需要使用v-html
        }
});
vm.$data.msg = "test....";//给mes重新赋值
</script>

2.Vue实例初始命令

vue实例中的一些方法

<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (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');
			
	}
});

3.绑定属性

v-bind:属性名="data"：进行属性的绑定
v-on:方法名="methods"：进行方法的绑定
@方法名="methods":进行方法的绑定
PS:v-on和@两者有什么区别呢？

<div v-bind:class="color">使用v-bind:class绑定动态的class值为color</div>
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
	<button v-on:click="click1()">Greet</button>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : false,
		color:'blue'
	},
	methods:{
		click1 : function () {
			console.log('click1......');
		},
		click2 : function () {
			console.log('click2......');
		}
	}
});
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>

4.条件和循环

v-if,v-else-if,v-else
v-for

条件
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
隐藏
	<h1 v-show="ok">Hello!
		<p>nashou</p>
	</h1>
循环
	<li v-for="value, key in object">
		{{key}} : {{ value }}
	</li>

5.v-model的双向绑定

绑定到input，textarea等控件上去，可以实现数据的双向绑定（控件上输入进行改变，变量也跟着变；变量进行改变，控件上的值也会改变）

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})