Vue-day04

Vue-day04

提问:

1.动画的使用

答： 用transition组件标签包围

在进入/离开的过渡中，Vue内置了6个类名：

v-enter 定义过渡的开始状态

v-enter-active 定义进入过渡生效时的状态

v-enter-to 2.1.8 版及以上 定义进入过渡的结束状态

v-leave 定义离开过渡的开始状态

v-leave-active 定义离开过渡生效时的状态

v-leave-to 2.1.8 版及以上 定义离开过渡的结束状态

动画库实现过渡动画 下载 animate.css ，并在页面中引入即可使用

2.监听的使用

答： watch里面 msg(){} 这种形式是浅监听 ： 只能监听基本数据类型

（在data中定义声明的变量，监听名字不能更改）

监听引用数据类型用深监听 只能获取最新的数据 弊端:会引起页面卡顿

handler(newVal,oldVal){}

最后写上 deep属性 true 默认值是false

3.过滤器使用

答： 全局定义 vue实例的外部定义 Vue.filter(过滤器名称，回调函数)

局部定义 vue实例中增加配置项filters 过滤器名称:function(){过滤操作}

4.计算属性使用

答: 通过计算得出来的属性叫做计算属性 配置项(computed)

5.watch与methods区别

答： watch ： 是观察动作，自定执行

methods ：是方法，需要调用

6.watch与computed的区别

答： watch：函数不需要调用 computed ：调用的时候不需要添加()

处理场景：watch：一个数据影响多个数据 computed ：一个数据受多个数据影响

watch：属于监听,监听数据的改变 computed ：通过计算得到的属性

7.v-if与v-show的区别

答 ： v-if ：移除元素 使用场景： 偶尔使用

v-show ： 隐藏元素 使用场景 ： 频繁切换

8.动态绑定样式

答： 1. 动态绑定class ;

:class = '变量名' 变量名需要在data中声明，并且值要在style中定义

:class = '[index%2 == 0 : "red" : "green"]' 只需要在style中声明类名 三目

:class = '{red : true, green : true}' 只需要在style中声明即可

1. 动态绑定 style

:style = '变量名' 必须要在data中声明 对应样式属性有连字符的需要换为驼峰写法

:style = '[变量名1，变量名2]'

9.事件修饰符

答 ： .prevent 阻止事件默认行为 、 .stop 防止事件冒泡 、 .capture 捕获事件冒泡 、 .self 只能自己触发自己

.once 指定的事件只执行一次

10.生命周期

答 ： 可以分为8个阶段：

beforeCreate 创建之前 undefined

created 创建完成 el：undefined ， data、 methods 初始化完成 值已获取到

beforeMount 挂载之前 数据都已经拿到 el：找到挂载点，但是未解析数据

mount 挂载完成 数据和节点都已经解析完毕

beforeUpdate 更新之前 更新前后数据都是最新的

updated 更新完成

beforeDestroy 销毁之前

destroyed 销毁之后

0.bs案例

1.change事件的使用

2.数组的some，every，forEach，map

1.组件

组件化:通常指的是样式（轮播图，tab，列表区域）

模块化:通过指的是效果(弹框)

组件:每一个vue实例对象(可复用的vue实例)

组件的定义以及使用

// 组件：全局定义组件   可复用的vue实例

  //       局部定义

// 全局定义组件 语法:Vue.component(组件名称,{模板对象})

// 组件命名规范:1.采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母,目的为了方便调用

//             2.采用小写命名方式，直接在页面使用即可<vone></vone>

//             3.不能以现有的标签名作为组件名

// 组件中的data定义:1.data必须是方法 2.方法必须有返回值 3.返回值必须是对象类型

// 如果使用data中的数据:在组件中声明的数据需要在组件的模板中使用

// 组件中还可以有的配置项；data，methods，filter，computed，watch，生命周期的钩子函数....

2.template

// 组件中的模板对象：有且只能有一个根元素

// template使用: 位置:放到body的结束标签上面,给当前的模板标签添加id，同时把id赋值给组件的template

3.data

data为什么在组件中是函数方式定义?

目的是为了实现数据共享而数据互相不影响

注意点:

1.data必须函数 2 必须有返回值 3返回值必须是对象

4.后台案例

原始代码参考:06.后台1.html

抽离代码参考：06.后台1 copy.html

5.脚手架

1.全局安装webpack

npm install webpack -g

2.全局安装vue-cli

npm install vue-cli -g

以上两步只需要安装一次

下面就是创建项目

3.vue init webpack demo     项目名称为小写名字即可   这是创建vue2.0项目

4.cd demo   进入创建的文件中

5.npm run dev 启动项目

​

//淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

1.当前文件夹中不能有vue.js文件，如果有安装脚手架会报错

项目安装

1.安装脚手架完成

2.清空工作

3.创建每一个组件(后台页面)

-componets

-header.vue

-footer.vue

-main.vue

APP.vue中

<template>

<div class="box">

  <v-header></v-header>

  <v-main></v-main>

  <v-footer></v-footer>

</div>

</template>

​

<script>

import vHeader from './components/header'

import vMain from './components/main'

import vFooter from './components/footer'

export default {

components: {

  vHeader,

  vMain,

  vFooter

}

}

</script>

​

<style scoped>

.box{

  width: 100vw;

  height: 100vh;

  display: flex;

  flex-direction: column;

}

</style>

在main.js中引入静态资源

// 引入静态资源

import './assets/css/reset.css'

//创建公共组件

import vDel from './components/del.vue'

Vue.component('vDel',vDel)