VUE2.0

Vue疑问点：

1，组件中html模板和字符串模板的区别？
2，sync？不太懂

组件

组件的基本组成：
样式结构 行为逻辑 数据

使用组件：
1，先注册组件：
全局注册,在任何模板中都可以使用

例如：
注册-->Vue.component('my-component',{});
            使用-->//切记这个里给组件加事件，就相当于事件代理。

局部注册，在组件实例中通过选项对象注册，只在所注册的作用域中生效。

 var child={
     template:'
11111
'
 } 
new Vue({
    el:'#root',
  data:{
        val:''
    }
  components:{//这是一种注册方式，局部注册。
        'hanna-f':child
    }
})

组件间的通信
父子组件关系可以总结为：父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。

父传子：
可以在组件上使用自定义属性绑定数据类似react，在自定义组件模板内部需要显示的用props生命自定义属性名
比如：

子级向父级传值
1，需要用到自定义事件
父组件用&on监听自定义事件，子组件用&emit触发父组件的事件

    
{{ total }}
    
    

slot

封装组件
组件的API来自三个部分
props 传递数据给组件
slot 外部模板呼和子组件模板
event 自定义时间

1，设置props 不同信息展示
2，定制模板slot
3,组件自定义事件，需要和父组件通信的

封装组件前需要先把结构写好，就是说html和样式
要考虑到那些是可以被定制的
组件里面某些地方产生了交互，通知父组件

1，

image.png

2，vue指令：以v开头的自定义属性

v-指令名称=‘’

1,v-text:操作纯文本，v-text:操作元素中的html
2,v-bind:title（参数标签属性名）="message"（data中的键值）//操作绑定页面的属性。缩写：title=“”
这个将不会改变: {{ msg }} 只会渲染一次，不会有更新。
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，

{{这里可以写些简单的js代码，num==1？“1”：“2”}}

  

    

      {{ todo.text }}
    
  
 
 
    

```  **



绑定class