vue笔记整理

目录

• 概述
• 实例化参数
• 计算
• 监听
• 自定义指令
• 过滤-管道
• 指令
• 动画
• 组件

概述

• 前端框架三架马车
  Vue
  React
  Angular
• vue是一款渐进式JavaScript前端框架
  vue作者：尤雨溪
  官网：cn.vuejs.org
  插件案例：
  vue插件案例
• 特点：
  1.简单，上手方便
  2.结合Angular指令与react组件思维
  3.生态丰富（插件多）API文档完善

实例化参数

实例化参数new Vue

• el:"#app"
  选择目标标签
• data:{}
  指定数据
• data(){rutern {}}
  一个函数返回一个对象
• computed计算
• watch监听
• methods 方法
• directives指令

计算

从现有数据计算出新的数据

computed:{
rmsg(){
return this.msg.split("").reverse().join('')
}

监听

监听数据的变化，并执行回调函数handler

watch:{
"num":{
handler(nval,oval){}
deep:true
}
}

自定义指令

• bind绑定执行一次
• inserted插入执行一次
• update每更新执行一次

<input v-focus="flag">


directives:{
"v-focus"{
                   update(el,binding){
                  if(binding.value){el.focues}
}
}}

过滤-管道

过滤就是格式化数据，也要其他人称之为管道
使用

• 1.{{num|fix}}
• 2.{{num|fix(2)}}
• 3.v-text=“num|fix”

filters:{
   fix(value,arg){
      return value.toFixed(arg)
}}

指令

指令的值可以是简单的JavaScript命令

文本渲染指令

• {{}}
• v-html
• v-text

<p>{{num}}</p>
<p v-text="num"></p>
<p v-html="num"></p>

属性绑定

<p v-bind:class="active"></p>
<!-- 下面这个方式为属性绑定的简写方式 -->
<p :class="active"></p>

条件渲染

• v-if
• v-else-if
• v-else
• v-show
  css方式隐藏
• 区别：
  频繁切换用v-show
  一次性切换用v-if
  v-show隐藏是通过css的方式隐藏节点

列表渲染

• v-for=“item in list”
  //list要遍历的数组
  //item 当前遍历的项目
• v-for="(item,index) in list"
  //index 当前遍历项的索引 从0开始
• 使用v-for务必
  v-bind:key=""
  :key=“值”
  值必须是唯一
  添加key属性可以优化v-for的渲染
  让vue更好识别当前渲染的节点
  特别是在排序，过滤操作的时候
  不建议key的值使用循环的索引

事件指令

• v-on:事件类型=“响应函数“
  v-on:click=“say()”
• @click=“say()”
  事件的简写
• @click=“num++”
  行内事件响应
• 事件修饰符
  .stop阻止事件冒泡
  .prevent阻止默认事件
  .once只执行一次
  @click.stop.prevent.once=“num++”
  事件的修饰符可以同时写多个
• 按键修饰符
  .up上键
  .down下键
  .left左键
  .right右键
  .delete删除键
  .enter确认件
  .space空格键
  .esc esc键
• 事件对象
  $event

表单绑定指令

• v-model
  让表单的值与数据绑定在一起
• 表单选中值

<input type="checkbox">

默认选中值是true
不选中值是false

• 动态添加值

<input type="checkbox" name="fruit" v-model="list">

如果是多个把选中的值动态添加到list数组中

• 修饰符
  .number 数字
  .trim移除两端空白

类绑定

• 1.属性
  :class=“值”
• 2.对象
  当对象的属性值为真，该属性作为class绑定
  :class="{‘key1’:true,‘key2’:false}"
  key1的值为真，key1会被绑定，key2不会
• 3. 数组方式
     :class="[c1,c2,c3]"

样式绑定

• 属性名去掉-下个字母大写
  :style="{color:‘red’,fontSize:‘48px’}"

动画

vue动画在内置组件transition包裹会自动在动画的进入过程与离开过程添加类名

内置组件

• transition
  name名称
  mode:模式
  in-out 先进再出
  out-in 先出再进
  enter-active-class指定进入类名
  leave-active-class指定离开类名
• transition-group

动画类

动画类一共六个类，每个类都需要为其添加css

• v-enter-active
  进入过程
• v-enter
  进入前
• v-enter-to
  进入后
• v-leave-active
  离开过程
• v-leave
  离开前
• v-leave-to
  离开后

创建动画形式

创建动画形式一共三种方式，其中第三种方式是最简单的一种

• 创建动画形式
  1.动画类6个css创建
• 2.keyframes关键帧
  .fade-enter-active{animated:fadeIn ease 1s}
  .fade-leave-active{animated:fadeOut ease 1s}
• 3.引用第三方动画库
  指定进入class与离开的class

<transition
enter-active-class="slideln aniamted"
leave-active-class="hinge aniamted"
></transition>

组件

• 组件其实就是一段可以重复利用的代码块
• 全剧组件
  Vue.component(“组件名”,{template}:``)
• 局部组件
  const steper={template:``}
• 注册组件
  new Vue({
  components:{steper}
  })
• 使用组件

<steper></steper>