我的vue.js 2.0学习路线是参考技术胖老师的博客,感谢！
一、component组件props属性设置
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
我们定义一个panda的组件，并用props设置了here的属性值，在here属性值里传递了China给组件。 最后输出的结果是红色字体的Panda from China；我们也可以把构造器中data的值传递给组件，我们只要使用v-bind进行绑定就可以了。
命名约定
对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法。子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>component组件props属性设置</title>
</head>
<body>
<h1>component组件props属性设置</h1>
<hr>
<div id="app">
<panda from-here="China"></panda><!--需要使用中划线写法-->
<panda v-bind:here="message"></panda>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'sichuan'
},
components:{
"panda":{
template:`<div style="color:red;">Panda from {{ fromHere }}.</div>`,//使用对应的小驼峰写法
props:['from-here']//小驼峰或者中划线写法都可以
}
}
})
</script>
</body>
</html>
二、Component 父子组件关系
上面我们都把局部组件的编写放到了构造器内部，如果组件代码量很大，会影响构造器的可读性，造成拖拉和错误。 我们把组件编写的代码放到构造器外部或者说单独文件。我们需要先声明一个对象,对象里就是组件的内容，声明好对象后在构造器里引用就可以了。
接下来，我们先声明一个父组件，比如叫parent，然后里边我们加入一个child组件。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Component 父子组件关系</title>
</head>
<body>
<h1>Component 父子组件关系</h1>
<hr>
<div id="app">
<panda></panda>
<parent></parent>
</div>
<script type="text/javascript">
var panda={
template: `<div>Panda from China</div>`
};
var child={
template:`<div>这是子组件</div>`
}
var parent={
template: `<div>
<p>这是父组件</p>
<child></child>
</div>`,
components: {
"child": child,
}
}
var app=new Vue({
el:'#app',
components:{
"panda":panda,
"parent":parent,
}
})
</script>
</body>
</html>
三、Component 标签
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Component 父子组件关系</title>
</head>
<body>
<h1>Component 父子组件关系</h1>
<hr>
<div id="app">
<component v-bind:is="who"></component>
<button @click="changeComponent">更换</button>
</div>
<script type="text/javascript">
var componentA={
template:`<div>这是组件A</div>`
};
var componentB={
template:`<div>这是组件B</div>`
};
var componentC={
template:`<div>这是组件C</div>`
}
var app=new Vue({
el:'#app',
data:{
who:'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
},
methods:{
changeComponent:function () {
if(this.who=='componentA'){
this.who='componentB';
}else if(this.who=='componentB'){
this.who='componentC';
}else{
this.who='componentA';
}
}
}
})
</script>
</body>
</html>
四、propsData Option 全局扩展的数据传递
首先我们做好一个扩展标签，然后我们要在挂载时传递一个数字过去，我们就用到了propsData。 我们用propsData三步解决传值： 1.在全局扩展里加入props进行接收。propsData:{a:1} 2.传递时用propsData进行传递。props:[‘a’] 3.用插值的形式写入模板。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>propsData Option 全局扩展的数据传递</title>
</head>
<body>
<h1>propsData Option 全局扩展的数据传递</h1>
<hr>
<div id="app">
<header></header>
</div>
<script type="text/javascript">
var header_a=Vue.extend({
template:`<div><p>{{message}}-{{a}}</p></div>`,
data:function () {
return{
message:'Hello,I am Header'
}
},
props:['a'],
})
new header_a({propsData:{a:1}}).$mount('header');
</script>
</body>
</html>
五、Computed Option 计算选项
computed 的作用主要是对原数据进行改造输出。改造输出：包括格式的编辑，大小写转换，顺序重排，添加符号……。
1、格式化输出结果
我们读取的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。
2、用计算属性反转数组
例如：我们得到了一个新闻列表的数组，它的顺序是按照新闻时间的顺序正序排列的，也就是早发生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。
完整html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Computed Option 计算选项</title>
</head>
<body>
<h1>Computed Option 计算选项</h1>
<hr>
<div id="app">
{{newPrice}}
<ul>
<li v-for="item in itemsReverse">
{{item.title}}——{{item.date}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
price:100,
items:[
{title:'香港或就“装甲车被扣”事件追责 起诉涉事运输公司',date:'2017/3/10'},
{title:'日本第二大准航母服役 外媒：针对中国潜艇',date:'2017/3/12'},
{title:'中国北方将有明显雨雪降温天气 南方阴雨持续',date:'2017/3/13'},
{title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'}
]
},
computed:{
newPrice:function(){
return this.price='￥' + this.price + '元';
},
itemsReverse:function(){
return this.items.reverse();
}
}
})
</script>
</body>
</html>
六、Methods Option 方法选项
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Methods Option 方法选项</title>
</head>
<body>
<h1>Methods Option 方法选项</h1>
<hr>
<div id="app">
{{number}}
<button @click="add(2)">点击</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
number:1
},
methods:{
add:function (num) {
if(num!=''){
this.number+=num;
}
else
{
this.number++;
}
}
}
})
</script>
</body>
</html>
七、Watch 选项 监控数据
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。我们可以先来看一个简单的数据变化监控的例子。例如天气预报的穿衣指数，它主要是根据温度来进行提示的，当然还有其它的，咱们就不考虑了。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Watch 选项 监控数据</title>
</head>
<body>
<h1>Watch 选项 监控数据</h1>
<hr>
<div id="app">
<div>温度：{{number}}度</div>
<button @click="add(2)">点击</button>
<div>提示:{{tips}}</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
number:1,
tips:"建议夹克"
},
methods:{
add:function (num) {
this.number++;
}
}
})
app.$watch('number',function (newVal,oldVal) {
if(newVal>=26){
this.tips="建议短袖"
}
if(26>newVal>0){
this.tips="建议夹克"
}
if(newVal<0){
this.tips="建议棉服"
}
})
</script>
</body>
</html>
八、Mixins 混入选项操作
Mixins一般有两种用途：
在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两遍。当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Mixins 混入选项操作</title>
</head>
<body>
<h1>Mixins 混入选项操作</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type="text/javascript">
//全局混入
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})
//混入
var addUpdate={
updated:function () {
console.log("数据发生变化，变为"+this.num)
}
}
var app=new Vue({
el:'#app',
data:{
num:1,
},
methods:{
add:function (num) {
this.num++;
}
},
updated:function(){
console.log("构造器里的updated方法。")
},
mixins:[addUpdate]
})
</script>
</body>
</html>
九、Extends Option 扩展选项
通过外部增加对象的形式，对构造器进行扩展。它和混入非常的类似。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Extends Option 扩展选项</title>
</head>
<body>
<h1>Extends Option 扩展选项</h1>
<hr>
<div id="app">
<p>num:{{ num }}</p>
<P><button @click="add">增加数量</button></P>
</div>
<script type="text/javascript">
var addUpdate={
updated:function () {
console.log("我是被扩展出来的！")
}
}
var app=new Vue({
el:'#app',
data:{
num:1,
},
methods:{
add:function (num) {
this.num++;
}
},
updated:function(){
console.log("构造器里的updated方法。")
},
extends:addUpdate
})
</script>
</body>
</html>
十、delimiters 选项
delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>delimiters 选项</title>
</head>
<body>
<h1>delimiters 选项</h1>
<hr>
<div id="app">
${number}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
number:5,
},
delimiters: ['${','}']
})
</script>
</body>
</html>
好啦，今天就到这里啦，拜拜0_0...
