VUE2.0

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，

image.png

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>