vue知识点

在html中vue如何使用

在script的src属性中引入vue.js文件点击下载vue.js
创建一个id为app的div容器
在script标签里，添加以下内容

new Vue({
    el:"#app",  //指定模板目标
    data:{      //数据内容(以对象形式)
        msg:"又见面了Vue",
        newMsg:"我和我的<b>祖国</b>",
        flag:true,
        title:"提示文本",
        current:0
    },
    methods:{  //方法中心
        say(){
            alert("你好，Vue。")
        }
    },
})

如果想了解vue工程化开发，请移步到vue脚手架搭建项目

vue参数

el 指定模板
data 数据存储
methods 方法中心
computed 计算属性,从现有数据计算出新的数据并返回

computed:{
    "rmsg":function(){
        return this.msg;
    }
}

watch 监听，用于监听一个数据的变化，并执行回调函数

watch:{
    "obj":{
        handler:function(nval){
            
        },
        deep:true
    }
}

filters 过滤（管道）

filters:{
    price:(val,arg1,ag2){
        return val;
    }
}

components 注册组件
directives 自定义指令

directives:{
    "img":{
        inserted:function(el,binding){
            //el 当前指令所在的元素
            //binding.value 当前元素的value值
        }
    }
}

vue生命周期钩子函数

创建前后
- beforeCreate
- created（获取this）
挂载前后
- beforeMount
- mounted（获取dom）
更新前后
- beforeUpdate
- updated
卸载前后
- beforeDestroy
- destroyed（移除监听和事件）

vue常用指令

v-text 替换标签中的文本内容
v-html 替换标签中的文本内容（可以渲染html标签）
v-if 判断是否显示与隐藏（此指令是直接移除dom元素）
v-show 判断是否显示与隐藏（此指令是使用css中display:none隐藏）
v-model 数据的双向绑定
修饰符
- .nubmer 转换为数字
- .lazy 延迟更新
ref 获取dom元素，通过this.$refs.name使用dom元素

事件修饰符

.once 被修饰的事件只执行一次

<button @click.once="say()">只执行一次</button>

.prevent阻止默认行为

<a href="http://www.baidu.com" @click.prevent="say()">a标签不会跳转</a>

.stop阻止冒泡行为

<div @click="say()">
    <div @click.stop="once()">我执行单击，父元素不执行单击</div>
</div>

按键修饰符

@keyup.enter="" 当按下enter时触发

@keyup.esc="" 当按下esc时触发

@keyup.right="" 当按下→时触发

@keyup.left="" 当按下←时触发

@keyup.top="" 当按下↑时触发

@keyup.bottom="" 当按下↓时触发

vue组件

全局组件（所有vue实例对象指定的模板都可以使用）
全局组件可以省去注册组件的步骤
- 定义：var Counter = {template:"<div>组件</div>"}
- 使用：<Counter></Counter>
局部组件（谁注册，谁使用）
- 定义：var Counter = {template:"<div>组件</div>"}
- 注册：components:{Counter}
- 使用：<Counter></Counter>
  <counter></counter>
  <counter-Item></counter-Item>

组件的数据传递

父向子

<Counter :count="item"></Counter>

props:["count"]
-------------------------------------------------------------------------------------------------
props:{
    count:{
        type:Number,
        default:0
    }
}
//type:指定接受到参数的类型
//default:如果没有传参，默认为0

子向父

<child @click="$emit("data",'props')">子组件</child> 
//data是父组件监听的对象，props是子组件传过去的参数。这里传过去的是"props"字符串

<parent @data="console.log($event)">父组件</parent>
//data 是子组件声明的对象  
//$event是固定值，里面是子组件传过来的数据，这里是"props"字符串
//当@data里的值是方法是，那么形参必须是$event才能接收到参数

组件的插槽：
默认插槽：

//html
<Parent>
    <p>插槽内容</p>
</Parent>

//component
<Parent>
    <slot></slot>
</Parent>

具名插槽：

//html
<Parent>
    <p slot="str">具名插槽</p>
</Parent>

//component
<Parent>
	<div>组件内容</div>
    <slot name="str"></slot>
</Parent>

组件内slot标签加上name属性，在使用具名插槽的时候，加上slot="str"，就会出现在name="str"的具名插槽的位置。

vue动画

<transition /> 包裹变化的元素
<transition-group /> 动画组

name 动画名称
动画名称+enter-active （使用vue动画，会自动自动添加这些类）
动画名称+leave-active（使用vue动画，会自动自动添加这些类）
move-class 正在移动的class

动画产生的class

//以下是css样式选择器

v-enter{
	//从什么状态进入
}
v-enter-to{
	//进入到什么状态
}
v-enter-active{
	//进入的过程
}
v-leave{
	//从什么状态离开
}
v-leave-to{
	//离开到什么状态
}
v-leave-active{
	//离开的过程
}

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <script src="js/vue.js"></script>
    <style>
        @keyframes fadeIn{
            from{ transform: translate(0,-30px);}
            to{  transform: translate(0,0);}
        }
        @keyframes fadeOut{
            0%{
                opacity:1;
            }
            100%{
                opacity:0;
            }
        }
        .fade-enter-active{
            animation: fadeIn ease  .6s;
        }
        .fade-leave-active{
            position:absolute;
            animation: fadeOut ease  1s;
        }
        .move{
            transition:all ease .6s;
        }
        .item{
            line-height: 44px; 
            border-bottom: 1px solid #f0f0f0;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.enter="list.unshift($event.target.value);$event.target.value=''">
        <transition-group tag="div" name="fade" move-class="move">
            <p class="item" v-for="(item,index) in list" :key="item">
                {{item}}
                <button @click="list.splice(index,1)">×</button>
            </p>
        </transition-group>
        
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:["html","vue","angular"]
            },
        })
    </script>
</body>
</html>

关键帧动画
定义：

@keyframes name{
    from{} 	//从什么状态
    to{}	//到什么状态
    
}

//使用百分比
@keyframes name{
    0%{}	//从什么状态
    
    //中间可添加多个进度  25%  50%  75%...
    
    100%{}	//到什么状态
    
}

使用：
在css中添加animation:name 缓动函数时长

vue学习总结，vue参数、基础指令、声明周期函数、组件、插槽（持续更新）