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

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

22 六月
星期一, 22 六月 2020 14:40 Last Updated on 星期一, 22 六月 2020 14:40 0 Comments


vue知识点

在html中vue如何使用

  1. 在script的src属性中引入vue.js文件点击下载vue.js
  2. 创建一个id为app的div容器
  3. 在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生命周期钩子函数

  1. 创建前后
    • beforeCreate
    • created（获取this）
  2. 挂载前后
    • beforeMount
    • mounted（获取dom）
  3. 更新前后
    • beforeUpdate
    • updated
  4. 卸载前后
    • 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="https://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 缓动函数 时长



 
 
 
 


本页所有内容来自官方网站 https://www.imapbox.com 新闻来源：互联网搜索引擎和新闻站

本网页所有图片由 ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片，下载并得到。

ImageBox 图片批量下载器 工具地址: 网页图片批量下载工具-最新版本下载

非凡下载站地址：https://www.crsky.com/soft/35838.html

本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。

ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载

本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.




文章目录

  • 全球报导 (16311)
  • 全球云计算 (29506)
  • 程序员专区 (1974)
  • Imap 全球通用标准协议 (7)
  • 全球邮局列表 (17)
  • Imapbox 系列软件 (3)
  • 产品一览 (6)
  • 事业方向 (7)
  • 联系我们 (2)

官方链接

imapbox邮箱网盘 imapbox 海外官网 iMapBox百度百科

登录