写在前面

好记性不如烂笔头！

正文

vue实例

其实vue可以看成一个全面的构造函数，所以新建一个vue实例的时候需要

1
2
3
4
5
6
7
   var str2 = "stringTest";
var vm = new Vue({
	el: "#test",
	data: {
		str = str2 //=>此处将str2的值赋予vm实例的str数据。
	}
})

在这段代码中，vm是一个vue实例。el是一个选择器，选中的dom节点可以使用vue的后续功能：如模板、计算属性等。而data则是定义在这个选中的dom节点后续的vue操作中可以使用的数据。

v-bind

v-bind可缩写为“:”，可以使用在模板语法中，如当我们需要输出一个字符串时，可以这样写。

1
2
3
4
<div id = "test">
	<p>{{str}}<p>
	<!-- =>stringTest，即输出vm实例的str数据 -->
</div>

也可以用在模板语法中使用v-bind。

1
2
3
4
5
6
Vue.component('test-box',{
	props: ["inf"],	//此处相当于给test-box组件定义一个属性，类似于input与value之间的关系
	template: `
		<p>{{inf}}</p>
	`
})

1
2
3
4
5
<div id = "test">
	<test-box :inf = "str">
	<!-- =>stringTest，意味将vm实例的str属性动态绑定到test-box的inf属性上，而上一段代码使得test-box中会有一个p元素，内容为inf的值 -->
	</test-box>
</div>

这里你也许会觉得模板语法更复杂了呀，那是暂时还没有使用v-for，也没有复用模板。试想当一个模板有200行代码，而你做好模板之后，只需要一行代码就相当于写了200行模板代码，就知道他的重要性了。

v-on

v-on 可缩写为”@”，用于在模板或者vue实例中的事件处理。也可以自定义事件。典型例子如

1
<button @click= "alert("1")"></button>

v-for

v-for 很强大的一个功能，如当你实例的数据是一个数组时，通过v-for可以便捷的遍历你的数组。而在这过程中，你可以做很多事情，如对数组的每一个元素套用一种模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue.component('test-box',{
	props: ["inf"],
	template: `
		<p>{{inf}}</p>
	`
})
var arr2 = ["1","2"];
var vm = new Vue({
	el: "#test",
	data: {
		arr = arr2
	}
})

1
2
3
4
5
6
7
  <div id = "test">
  	<test-box 
v-for= "arrinf in arr"
:inf = "arrinf">
  	<!-- 意味将vm实例的arr遍历，并将每个属性绑定到test-box的inf属性上，而上一段代码使得test-box中会有一个p元素，内容为inf的值 -->
  	</test-box>
  </div>

当然v-for也可以在template中使用，不过传递的数据就必须是完整的数组或对象。

v-model

v-model 很重要的一个作用就是绑定表单元素，大部分表单元素绑定的都是value。只有checkbox绑定对象为数组时，绑定checkbox的value；绑定对象为布朗值的时候，绑定checkbox的checked。
马上三点，后续还会整理，第一篇小结就先到这里。