Vue疑问点：
1，组件中html模板和字符串模板的区别？
2，sync？不太懂
组件
组件的基本组成：
样式结构 行为逻辑 数据
使用组件：
1，先注册组件：
全局注册,在任何模板中都可以使用
例如：
注册-->Vue.component('my-component',{});
使用--><my-component @click.native="cl"></my-component>//切记这个里给组件加事件，就相当于事件代理。
局部注册，在组件实例中通过选项对象注册，只在所注册的作用域中生效。
var child={
template:'<div>11111</div>'
}
new Vue({
el:'#root',
data:{
val:''
}
components:{//这是一种注册方式，局部注册。
'hanna-f':child
}
})
组件间的通信
父子组件关系可以总结为：父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。
父传子：
可以在组件上使用自定义属性绑定数据类似react，在自定义组件模板内部需要显示的用props生命自定义属性名
比如：
<div id="root">
<tong-xin msg="hello" name-msg="haha"></tong-xin>
</div>
<script>
Vue.component('tong-xin',{
props:['msg','nameMsg'],//注意2点：1，组件内部这里要使用驼峰命名，2，input要是用v-bind
template:'<div>{{msg}}<h1>{{nameMsg}}</h1> <input :value="nameMsg" /> </div>'
});
new Vue({
el:'#root'
})
</script>
子级向父级传值
1，需要用到自定义事件
父组件用&on监听自定义事件，子组件用&emit触发父组件的事件
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',//子组件内部操作+1；
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1;//子组件自己执行加+操作。
this.$emit('increment')//触发父组件也进行父组件+1
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {//父组件+1操作，但是是有子组件传递过来的。
this.total += 1
}
}
})
</script>
slot
<h1 slot='hanna'></h1>
<slot name='hanna'></slot>
封装组件
组件的API来自三个部分
props 传递数据给组件
slot 外部模板呼和子组件模板
event 自定义时间
1，设置props 不同信息展示
2，定制模板slot
3,组件自定义事件，需要和父组件通信的
封装组件前需要先把结构写好，就是说html和样式
要考虑到那些是可以被定制的
组件里面某些地方产生了交互，通知父组件
1，
2，vue指令：以v开头的自定义属性
v-指令名称=‘’
1,v-text:操作纯文本，v-text:操作元素中的html
2,v-bind:title（参数标签属性名）="message"（data中的键值）//操作绑定页面的属性。缩写：title=“”
<span v-once>这个将不会改变: {{ msg }}</span> 只会渲染一次，不会有更新。
v-show="seen"//控制元素隐藏和显示的，有初始化渲染消耗
3, v-if="seen"//false/true//判断控制元素插入和删除，安全些高，但有切换消耗
3，v-else=“login”//必须紧跟v-if后面，表示if不成立就执行它 ,
4, v-for="item in 集合"//控制html中的元素循环如下 使用用item.属性命使用
5， v-for=“（item，index）in 集合”//第一个item是集合的子项，第二个index是集合的索引值，取值的时候{{index}}>
5， v-on:click（参数）="reverseMessage“（methods:中的键值）>,也可以直接@click=“click（函数名）”’v-on和@符合可以混写，方法后面的小括号可加可不加
** v-on:dblclick（参数）**
6，v-model="message"{data}//可以实现数据双向绑定
7，<p>{{这里可以写些简单的js代码，num==1？“1”：“2”}}</p>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
</li>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
app4.todos.push({ text: '新项目' })//可以修改数组中的内容
</script>
``` **
绑定class
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>