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>

推荐阅读更多精彩内容