vue基础(2)

过渡

transition: 分为单行过度和多行过渡;
属性 :name:指定动画名称
        :key:比如多行过渡,两个标签相同只是内容不同,由于vue有diff算法会导致之后替换内容不会替换dom节点,就不能触发过渡效果,可以通过添加key这个属性指定不同的值来实现让他删dom节点
transition-group: 列表过渡
    属性:
        target:默认使用 span包裹里面的内容,可以同时使用tag属性来指定用哪个标签包裹列表数据
        name:动画名称
         key:列表过渡必须要有key;
定义过渡效果(在style里面用):

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

fade代表过渡效果名称:
例如:

<transition name='fade'></transition>

注意:表格里面使用过渡的时候,里面包裹其他标签发现经常不能用,推荐使用is属性
例子:

<tbody is='transition-group' name='xxoo'>
      <tr v-for='i in arr' key='i'>
            <td>{{i.name}}</td>
            <td>{{i.age}}</td>
            <td>{{i.size}}</td>
            <td>{{i.class}}</td>
            <td @click='del(i)'>删除</td>
        </tr>
 </tbody>

is后面可以指定 transition 或 transition-group

表单输入

在 input框不同的type类型 v-model存放的内容也不一样;
text 和 radiov-model 存放的是value值
checkbox v-model的true和false可以控制选中和不选中 v-model=‘aa’ 这个aa是数组的情况下,会把选中的内容存放到这个数组中;
select v-model=‘a’ a这个变量存放的值影响哪个option被默认选中
textarea v-model=‘a’ 可以影响文本域里面的内容

表单修饰符

.lazy v-model.lazy后不会实时更新,只有按下回车才更新一次
.number 变成数值类型
.trim 去除两侧无效字符如空格

组件 component

全局组件:

使用 Vue.component('组件名',{
	template:`<div>模板</div>`,
	data(){
		return:{
			name:"张三'
		}
	},
	methods:{

	}
})
使用   <组件名></组件名>

局部组件:

使用 Vue.component('组件名',{
	template:`<div>模板</div>`,
	data(){
		return:{
			name:"张三'
		}
	},
	methods:{

	},
	components:{
		'aChild':{
			template:`<div>子组件只能在父组件的根节点内使用</div>`,
		data(){
			return:{
				sex:"男'
		}
		}
		}
	}

})

组件通信:

子传父:

通过事件向上传递
在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’
例如 <zi @myevent=‘getChild’>
子组件内容通过事件触发
使用 this.$emit(‘自定义事件名’,‘值’)传递数据
例子:

   var aaT = `
        <div>
            我是aa组件
            <bb @haha='show'></bb>
        </div>
        `
        Vue.component('aa', {
            template: aaT,
            data() {
                return {
                    name: "张三"
                }
            },
            methods: {
                show(da) {
                    console.log(da)
                },
            }
        })

        var bbT = `
        <div>
            我bb组件
            <button @click='xxoo'>向父组件传递消息</button>
        </div>
        `
        Vue.component('bb', {
            template: bbT,
            methods: {
                xxoo() {
                    this.$emit('haha', '我真帅')
                }
            },
        })

父传子:

通过属性向下传
这是子组件
自定义了一个属性 myshow
子组件内部使用 props:{ myshow:Boolean} 可以约束类型
内容可以直接{{myshow}}使用父元素传递过来的值
// 通过属性向下传 xxoo是子组件 abc自定义的属性 age是父组件里面的属性
//子组件 使用 props这个属性去接收 props:[‘abc’,‘bb’] props:{‘abc’:String}
//父传子使用属性向下传 如果你的属性值是变量或者是数组使用 :属性 这种动态绑定,不加:会变成字符串
例子:

  var aaT = `
        <div>
            我是aa组件
            <bb :send='name'></bb>
        </div>
        `
        Vue.component('aa',{
            template:aaT,
            data(){
                return{
                    name:"张三"
                }
            },
            methods:{
        
            }
        })

        var bbT = `
        <div>
            我是父组件传来的参数:{{send}}
        </div>
        `
        Vue.component('bb',{
            template:bbT,
            methods:{
            },
            props:{
                send:Number
            }
        })

ref:

<input type="text" ref='in1'> 
      <!-- 1直接放在标签中获取元素节点 -->
 <navbar ref='nchild'></navbar>
      <!-- 2放在组件中获取组件对象 -->

例子:

  <div id="box">
      <input type="text" ref='in1'> 
      <!-- 1直接放在标签中获取元素节点 -->

      <navbar ref='nchild'></navbar>
      <!-- 2放在组件中获取组件对象 -->
      
      <button @click='getref'>获取ref数据</button>
    </div>
    <script>
        Vue.component('navbar',{
            template:`
                <div>
                    我是子组件
                </div>
            `,
            data(){
                return{
                    myname:'子组件状态'
                }
            }
        })
       VM= new Vue({
            el:'#box',
            data:{

            },
            methods:{
                getref(){
                    // console.log(this.$refs.in1.value)
                    console.log(this.$refs.nchild.myname)
                }
            }
        })
    </script>

动态组件:

<component :is="na"></component>
is的值是组件名
<keep-alive>
        <component :is="na"></component>
 </keep-alive>

例子:

div id="box">
        <keep-alive>
        <component :is="na"></component>
        </keep-alive>
        <footer>
            <ul>
                <li @click="na = 'home'">首页</li>
                <li @click="na = 'list'">列表页</li>
                <li @click="na = 'goods'">商品也</li>
            </ul>
        </footer>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                na:'home'
            },
            components:{
                home:{
                    template:`
                        <div>home首页<input type='text'/></div>
                    `
                },
                list:{
                    template:`
                        <div>list列表</div>
                    `
                },
                goods:{
                    template:`
                        <div>goods商品</div>
                    `
                },
            }
        })
    </script>