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:`模板`,
data(){
return:{
name:"张三'
}
},
methods:{
}
})
使用 <组件名></组件名>
局部组件:
使用 Vue.component('组件名',{
template:`模板`,
data(){
return:{
name:"张三'
}
},
methods:{
},
components:{
'aChild':{
template:`子组件只能在父组件的根节点内使用`,
data(){
return:{
sex:"男'
}
}
}
}
})
组件通信:
子传父:
通过事件向上传递
在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’
例如
子组件内容通过事件触发
使用 this.$emit(‘自定义事件名’,‘值’)传递数据
例子:
var aaT = `
我是aa组件
父传子:
通过属性向下传
这是子组件
自定义了一个属性 myshow
子组件内部使用 props:{ myshow:Boolean} 可以约束类型
内容可以直接{ {myshow}}使用父元素传递过来的值
// 通过属性向下传 xxoo是子组件 abc自定义的属性 age是父组件里面的属性
//子组件 使用 props这个属性去接收 props:[‘abc’,‘bb’] props:{‘abc’:String}
//父传子使用属性向下传 如果你的属性值是变量或者是数组使用 :属性 这种动态绑定,不加:会变成字符串
例子:
var aaT = `
我是aa组件
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:`
我是子组件
`,
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:`
home首页
`
},
list:{
template:`
list列表
`
},
goods:{
template:`
goods商品
`
},
}
})
</script>