Vue入门一

一、环境搭建

1. 对于中国大陆用户，建议将 npm 源设置为国内的镜像，可以大幅提升安装速度。

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

1. npm最新稳定版安装

   cnpm install vue

2. 命令行工具(CLI)安装

cnpm install -g vue-cli

注意：新版本Vue CLI3安装方法不同

二、关于旧版本

1. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 下面命令进行卸载后安装。

npm uninstall vue-cli -g

或者

yarn global remove vue-cli

1. 可以使用下列任一命令安装这个新的包

npm install -g @vue/cli

或者

yarn global add @vue/cli

1. 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

   你还可以用这个命令来检查其版本是否正确 (3.x)：

vue --version

三、初始化项目

1. 初始化项目

   vue init webpack demo

   初始化项目说明：

   Project name         --项目名称
   Project description      --项目描述
   Author       --作者
   
   Install vue-router? No       --是否安装router路由
   Use ESLint to lint your code? No     --是否安装代码格式检测工具
   Set up unit tests No     --是否安装测试模块
   Setup e2e tests with Nightwatch? No      --同样是，是否安装测试模块
   
   接下来回车，通过npm进行安装

2. 进入项目

   cd demo

3. 安装依赖

   cnpm install

4. 启动项目

   npm run dev

5. 打开浏览器输入地址查看是否启动成功

   http://localhost:8080

注意：只用进行了第一步设置，才能使用淘宝的镜像，才可以使用cnpm，否则还是使用npm命令。

四、项目目录结构

1. 主要文件

index.html  --项目根视图
package.json    --配置文件
README.md   --说明文件
.postcssrc.js   --postcss配置文件
.gitignore  --github上传时，忽略的上传文件类型配置
.editorconfig   --一些编码配置，可以忽略该文件
.babelrc    --ES6的

1. 主要目录

static  --静态文件目录，项目启动后可以直接访问里面的文件或内容。
src --源码文件
config  --配置文件,开发服务器的配置
build   --服务器配置文件，webpack配置文件

1. src目录

main.js --入口文件
App.vue --单文件主组件
components  --子组件
assets  --公共资源文件

Vue入门二

一、项目入口

main.js --项目入口src目录下

1. main.js文件介绍

   Vue.config.productionTip = false 开发时的配置，可以暂时不用管

2. 初始化一个VUE实例

   new Vue({
     el: '#app',
   绑定一个元素，绑定一个叫app的根组件元素,如上图中index.html中的<div id="app"></div>组件元素。
   
     components: { App },
   把组件注入进来
   
     template: '<App/>'
   模板，指定一个组件app.vue
   })

引入组件步骤

1. 引入组件

   import App from './App.vue'

2. 加载视图

   template: '<App/>'

3. 创建一个组件名字，加载视图组件名字和该名字一样。

   components: { App },

二、组件说明

Vue组件包括三部分：

1. template（视图部分）
2. script（逻辑或者数据交互部分）
3. style（样式部分）

三、模板语法

{{ }} 文本

(数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：)

渲染出来就是文本，没有任何标签。

<span>{{mtds}}</span>
<br>
<h1>{{1+3}}</h1>
<br>
{{1>0 ? "错的": "对的"}}
<br>

功能：

1. 可以直接进行运算，可以直接放变量。

2. 不能直接放字符串（除非先声明，可以使中文的）。

3. 可以用三门运算符。

注意：只能存在单行语句。多行语句如if else这种需要换行写的,不能作用在html属性上。

v-html 原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

   <span>{{mtds}}</span>
   <br>
   <span v-text="mtds"></span>
   <br>
   <span v-html="mtds"></span>

   mtds: '<h1>v-text与v-html区别</h1>',

v-text与v-html

v-html：会渲染html代码。

v-text：不会渲染出来。

都可以用来显示。

v-bind 绑定

1. 那个属性是活的，就用v-bind去绑定。

   <span v-bind:class="ha">您好</span>
   
   ha: 'bianle',

v-if 条件渲染

<p v-if="show">
    <span>我是否能被看见a</span>
</p>
<p v-else>
    <span>我是否能被看见b</span>
</p>

show: false,

v-if与v-if v-else类似

注意：同级标签不能嵌套，div除外。

template标签

同级并排使用,承载容器，不会渲染。

<template v-if="show">
<span>我是否能被看见a</span>
</template>
<template v-else>
<span>我是否能被看见b</span>
</template>

v-show

<div>
    <span v-show="sc">show</span>
</div>

注意：v-show与v-if

v-if：条件成立渲染，不成立则不渲染，结构中不能看见。

v-show：无论怎样都会渲染。

切换频繁时使用，v-show，不频繁使用v-if。

v-for 列表渲染

<ul >
    <li v-for="(item,index) in datas" v-bind:key="index">{{item}}{{index}}</li>
</ul>

datas: ["a","b","c","d","e"],

<ul>
    <li v-for="(user ,index) in users" :key="index">{{user.name}} {{user.age}}{{user.sex}}</li>
</ul>

users: [
{name:"zhangsan1",age:120,sex:"boy"},
{name:"zhangsan3",age:120,sex:"boy"},
{name:"zhangsan2",age:130,sex:"boy4"}
],

注意：每个列表添加key，不然会出现警告。

四、事件监听

v-on 事件监听

<button @click="num += 1">事件</button>
<h1>{{ num }}</h1>

num: 1

methods

所有被调用的方法都放在这里面。

<button @click="show">事件2</button>

methods: {
    show() {
      alert("我是methods中执行的方法事件")
    }
  }

注意：调用方法是，不加括号，加括号表示，一打开就执行调用方法。

this

<button @click="change">事件3</button>

change() {
      this.flag = ! this.flag;
    }

可以用this来索引当前data中的数据。

指向，当前的组建VueComponent

向事件传递参数

五、如何使用一个新组建

1. 组建导出可被外部访问

export default {
    data() {
        return {
            users: ["zhangsan","lisi","wangwu'"]
        }
    }
}

​ data:初始化数据

1. 在需要的组建中导入该组建

   import Events from './components/Events'

2. 绑定该组建

     components: {
       Events
     }

3. 使用组建

   <events></events>

完整代码(Events.vue定义的新组建，在App.vue中使用该组建)：

<template>
  <div id="app">
    <events></events>
  </div>
</template>

<script>
import Events from './components/Events'
export default {
  name: 'App',
  components: {
    Events
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

六、事件中函数传递参数（事件参数）

<ul>
    <li v-for="(user ,index) in users" :key="index" @click="getUserData(index)">{{user}}</li>
</ul>

data() {
return {
users: ["zhangsan","lisi","wangwu'"]
}
},
methods: {
getUserData(data) {
console.log(this.users[data])
}
}

七、事件默认参数$event

<ul>
    <li v-for="(user ,index) in users" :key="index" @click="getUserData(index,$event)">{{user}}</li>
</ul>

methods: {
getUserData(data,event) {
console.log(this.users[data]);
console.log(event);
}
}

$event:原生js对象

八、事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

event.preventDefault()   :阻止默认事件，也就是.prevent
event.stopPropagation()  ：阻止事件冒泡，也就是.stop

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

因此，用 v-on:click.prevent.self 会阻止所有的点击，

而 v-on:click.self.prevent 只会阻止对元素自身的点击。

可参考官网

九、按钮修饰符

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

可通过keyup事件来查看按钮对应的数字是多少,

如下: k字母对应的数字是75.

<input type="text" @keyup="getKeyNum">

getKeyNum (event){
    console.log(event);
}

可参考官网

十、数组更新检测

data中的数据改变，会引起视图的改变。

变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1. push()

<button @click="adddata">插入数据</button>

export default {
    data() {
        return {
            users: ["zhangsan","lisi","wangwu'"]
        }
    },
    methods: {
        getUserData(data,event) {
           console.log(this.users[data]);
           console.log(event);
        },
        getKeyNum (event){
            console.log(event);
        },
        adddata() {
            this.users.push("这是添加的数据");
        }
    }
}

替换数组

不会引起视图更新

注意：

filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

可参考官网

显示过滤与排序结果

nums: [1,2,34,5,6,8,54,31,34,4,2]

<button @click="getJishu">显示奇数</button>

        getJishu() {
            this.nums.filter(function(num){
                if(num % 2 ==0){
                    console.log(num);
                }
            });
        }

十一、计算属性与观察者

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

所以，对于任何复杂逻辑，你都应当使用计算属性。

computed()计算属性

与data()同级

 {{msg}}
        <br>
 {{newmsg}}

msg: 'abcde'

computed: {
newmsg(){
    return this.msg.split('').reverse().join('');
    }
}

这样在很多需要翻转的地方直接调用newmsg就可以，不用在每个调用中在单独写翻转了。

计算属性与methods区别

1. 不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 newmsg

计算属性会立即返回之前的计算结果，而不必再次执行函数。

1. methods则每次都会重新执行。

十二、表单输入绑定

v-model:双向数据绑定

        {{msg}}
        <br>
        <input type="text" v-model="msg">

        return {
            msg: 'test'
        }

watch（） 监听数据

    watch: {
        msg(data){
            console.log(data);
        }
    }

注意：watch监听数据必须和data中名字一样。

多行文本，单选框，复选框都可以使用v-model、watch

watch一般在input中使用。

十三、修饰符

.lazy

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change事件进行同步.

.number

<input v-model.number="age" type="number">

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim

<input v-model.trim="msg">

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

延迟操作,减轻服务器负担。

<template>
    <div>
        {{msg}}
        <br>
        <input type="text" v-model="msg">
        {{msg1}}
    </div>
</template>
<script>
export default {
    name: 'formdata',
    data() {
        return {
            msg: 'test',
            msg1:''
        }
    },
    watch: {
        msg(data){
            setTimeout(() =>{
                this.msg1=data;
            },1000)
        }
    }
}
</script>
<style>

</style>

十四、Class与Style绑定

对象语法

绑定单个

<template>
    <div>
        <p v-bind:class="{active:isActive,'demo':Demo}">{{msg}}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: 'test',
            isActive: true,
            Demo: true
        }
    }
}
</script>
<style>
.active{
    color: aqua;
}
.demo{
    font-size: 200px;
}
</style>

或者绑定一个对象

<p v-bind:class="styleObj">{{msg}}</p>

styleObj: {
                active: true,
                demo: true
            },
            msg: 'test'

<style>
.active{
    color: aqua;
}
.demo{
    font-size: 200px;
}
</style>

数组语法

            msg: 'test',
            demo1: 'demo11',
            demo2: 'demo22'

<span v-bind:class="[demo1,demo2]">{{msg}}</span>

<ul>
       <li v-bind:class="[{active:index%2 == 0}]" v-for="(user,index) in all">{{user.name}}----{{user.age}}-----{{user.sex}}
    </li>
</ul>

all: [{name:"zhangsan",age:10,sex: '男'},
{name:"zhaoliu",age:23,sex: '女'},
{name:"wangwu",age:19,sex: '女'},
{name:"lisi",age:12,sex: '男'}]

.active{
    color: aqua;
}

更多绑定可参考官网

绑定内联样式

对象语法

更多绑定可参考官网

视图改变是有数据改变的。是有后端数据驱动前段视图的变化。

十五、Props父组件向子组件传值

单组件由三部分组成：

<template>
    <div>

    </div>
</template>
<script>
export default {
    name: 'mc',
    data() {
        return {

        }
    }
}
</script>
<style scoped>

</style>

1. template: 里面只能存在一个根元素
2. script：必须通过export default导出，外部组件才能访问。
   1. name:指定组件名字。
   2. data：绑定数据。
3. style：样式
   1. scoped：当前样式只在当前组件内生效，局部的。

子父级组件

一个组件被另一个组件嵌套。

如： app组件里面嵌套hellowolrd组件。

子父级组件通信

父 –> 子： props

子 –> 父： emit Event

父向子通信：

父组件：
<son :title="msg"></son>

 msg: 'son hello'

子组件：
props: [
    "title"
]

{{title}}

props数据传递类型验证

子组件接受参数时，指定类型。   
    props: {
        title: {
            type: [String,Number],
            required: true，
            defalut: 100
        }
    }

1. type:指定接收参数类型，可以有多个类型。

2. required：是否必传。

   注意：如果是Number、String可以直接默认一个值，如果是其他类型则默认返回一个方法。

   <son :msg="say"></son>
   return {
               say: {
                   name:"Zhangsan",
                   age:20
               }
           }
   
   
       props: {
           msg: {
               type:Object,
               default:function(){
                   return {
                       name:"lisi",
                       age:10
                       }
               }
           }
       }

3. 数据验证
4. 多数据类型验证
5. 必选项验证
6. 默认值

7. obj、arr数据类型的默认值

十六、子向父组件通信

使用v-on自定义事件

子组件代码：
<template>
    <div>
        <button @click="send">发送</button>
    </div>
</template>

<script>
export default {
    name: 'OneSon',
    data() {
        return {
            msg: '父组件，您好。'
        }
    },
    methods: {
        send() {
            this.$emit("msg",this.msg);
        }
    }
}
</script>

<style>

</style>

父组件代码：
<template>
    <div>
        <one-son @msg="getData"></one-son>
        <H1>{{msg}}</H1>
    </div>
</template>

<script>
import OneSon from '../components/OneSon'
export default {
    name: 'One',
    components:{
        OneSon
    },
    data() {
        return {
            msg: ''
        }
    },
    methods: {
        getData(data) {
            this.msg = data;
        }
    }
}
</script>

<style>

</style>

父组件向子组件传递数据步骤

1. 子组件通过一个事件来触发。

2. 事件中有两个参数，一个key，用来在父组件中作为事件。另一个数据。

3. 父组件使用key作为事件，定义一个事件接受数据

   数据交互式同步的。

input所有内容为String，可以通过下面进行转换成数字。

<one-son @msg="getData" :sendMsg="getNum"></one-son>

computed: {
        getNum(){
            return this.newMsg -0;
        }
    }

十七、插槽与缓存

使用插槽分发内容

1. 单个插槽

   父组件：
   <template>
       <div>
           <two-son>
               <span>{{msg}}</span>
           </two-son>
       </div>
   </template>
   <script>
   import TwoSon from '../components/TwoSon'
   export default {
       name: 'Two',
       components: {
           TwoSon
       },
       data() {
           return {
               msg: '使用插槽'
           }
       }
   }
   </script>
   <style scoped>
   span{
   color: red;
   font-size: 40px;
   }
   </style>

   子组件：
   <template>
       <div>
           <slot>我是插槽，但是我会被父组件插入内容覆盖。</slot>
       </div>
   </template>
   <script>
   export default {
       name: 'TwoSon',
       data() {
           return {
   
           }
       }
   }
   </script>
   <style>
   
   </style>
   

   注意：插槽的样式，可以在父组件中设置，也可以在子组件中设置。

2. 具名插槽

           <two-son>
               <span slot="s1">{{msg}}</span>
               <p slot="s2">我是插槽2哦</p>
           </two-son>
   
       <div>
           <slot name="s1">我是插槽，但是我会被父组件插入内容覆盖。</slot>
           <hr>
           <slot name="s2"></slot>
       </div>

注意：当没有传递视图时，可以显示查查默认设置的值。

1. 作用域插槽（传递参数）

   作用于插槽传递数据

子组件：
<slot name="s2" text="google hjhlj"></slot>


父组件：
 <span slot="s2" slot-scope="key">
               {{ key.text}}
           </span>

props与slot插槽对比

名称	props	slot
传递数据	父组件 —> 子组件	子组件—> 父组件
数据	由父组件决定	由子组件决定
视图	由子组件决定	由父组件决定

十八、动态组件

<template>
  <div id="app">
    <component v-bind:is="currentView"></component>
    <button @click="change">change</button>
  </div>
</template>

<script>
import Events from './components/Events'
import FormData from './components/FormData'
import Styles from './components/Style'
import MyCompent from './components/myCompent'
import Father from './components/Father'
import One from './components/One'
import Two from './components/Two'
export default {
  name: 'App',
  data() {
    return {
      currentView: "FormData"
    }
  },
  methods: {
    change() {
      this.currentView = 'MyCompent';
    }
  },
  components: {
    Events,
    FormData,
    Styles,
    MyCompent,
    Father,
    One,
    Two
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意：这样的来回切换，每次都重新渲染了。因此下面介绍了keep-alive

<template>
  <div id="app">
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
    <button @click="change">change</button>
  </div>
</template>

<script>
import Events from './components/Events'
import FormData from './components/FormData'
import Styles from './components/Style'
import MyCompent from './components/myCompent'
import Father from './components/Father'
import One from './components/One'
import Two from './components/Two'
export default {
  name: 'App',
  data() {
    return {
      currentView: "FormData",
      flag: true,
    }
  },
  methods: {
    change() {
      if(this.flag){
        this.currentView ="FormData";
        this.flag=false;
      }else{
        this.currentView ="Father";
        this.flag=true;
      }
    }
  },
  components: {
    Events,
    FormData,
    Styles,
    MyCompent,
    Father,
    One,
    Two
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

keep-alive:将组建保留在内存中，做到了缓存效果。

注意：什么情况使用keep-alive缓存？

实时更新不能使用缓存。

十九、过度与动画

单元素与组建的过渡

自动应用class

<template>
    <div>
        <transition name="fade">
            <h1 v-show="show">{{msg}}</h1>
        </transition>
        <br>
        <button @click="change">测试</button>
    </div>
</template>
<script>
export default {
    name: 'Donghua',
    data() {
        return {
            msg: '动画测试',
            show: true,
        }
    },
    methods: {
        change() {
            this.show = ! this.show;
        }
    }
}
</script>
<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;
}
</style>

过渡类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

   <template>
       <div>
           <transition name="fade">
               <h1 v-show="show">{{msg}}</h1>
           </transition>
           <br>
           <button @click="change">测试</button>
       </div>
   </template>
   <script>
   export default {
       name: 'Donghua',
       data() {
           return {
               msg: '过渡测试',
               show: true,
           }
       },
       methods: {
           change() {
               this.show = ! this.show;
           }
       }
   }
   </script>
   <style>
   .fade-enter, .fade-leave-to{
       opacity: 0;
   }
   .fade-enter-to, .fade-leave{
       opacity: 1;
   }
   .fade-enter-active, .fade-leave-active{
       transition: opacity .9s
   }
   </style>

移动的过渡

<template>
    <div>
        <transition name="fade">
            <h1 v-show="show">{{msg}}</h1>
        </transition>
        <br>
        <button @click="change">测试</button>
    </div>
</template>
<script>
export default {
    name: 'Donghua',
    data() {
        return {
            msg: '过渡测试',
            show: true,
        }
    },
    methods: {
        change() {
            this.show = ! this.show;
        }
    }
}
</script>
<style>
.fade-enter, .fade-leave-to{
    transform: translate(20px,0);
    /* opacity: 0; */
}
.fade-enter-to, .fade-leave{
    /* opacity: 1; */
    transform: translate(-20px,0)
}
.fade-enter-active, .fade-leave-active{
    /* transition: opacity 3s */
    transition: all 2s
}
</style>

CSS过渡

<template>
    <div>
        <transition name="fade">
            <h1 v-show="show">{{msg}}</h1>
        </transition>
        <br>
        <button @click="change">测试</button>
        <br>
        <button @click="dong">test</button>
        <br>
        <transition name="dongba">
            <p v-show="newshow">我现在住在加利福尼亚州的奥克兰</p>
        </transition>
    </div>
</template>
<script>
export default {
    name: 'Donghua',
    data() {
        return {
            msg: '过渡测试',
            show: true,
            newshow: true,
        }
    },
    methods: {
        change() {
            this.show = ! this.show;
        },
        dong() {
            this.newshow = ! this.newshow;
        }
    }
}
</script>
<style>
.fade-enter, .fade-leave-to{
    transform: translate(20px,0);
    /* opacity: 0; */
}
.fade-enter-to, .fade-leave{
    /* opacity: 1; */
    transform: translate(-20px,0)
}
.fade-enter-active, .fade-leave-active{
    /* transition: opacity 3s */
    transition: all 2s
}

.dongba-enter-active{
animation: bounce-in .5s;
}
.dongba-leave-active{
     animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

动画可以控制过程，过渡不能。

使用第三方css

引入外部css方式

1. 直接添加到index.html中。

   <template>
       <div>
           <transition name="fade">
               <h1 v-show="show">{{msg}}</h1>
           </transition>
           <br>
           <button @click="change">测试</button>
           <br>
           <button @click="dong">test</button>
           <br>
           <transition name="dongba">
               <p v-show="newshow">我现在住在加利福尼亚州的奥克兰</p>
           </transition>
   
           <br>
           <button @click="san">第三方动画库</button>
           <br>
           <transition name="word" enter-active-class="animated hinge"  leave-active-class="animated flip">
               <h1 v-show="newsan">CSS动画库</h1>
           </transition>
       </div>
   </template>
   <script>
   export default {
       name: 'Donghua',
       data() {
           return {
               msg: '过渡测试',
               show: true,
               newshow: true,
               newsan: true,
           }
       },
       methods: {
           change() {
               this.show = ! this.show;
           },
           dong() {
               this.newshow = ! this.newshow;
           },
           san() {
               this.newsan = !this.newsan;
           }
       }
   }
   </script>
   <style>
   .fade-enter, .fade-leave-to{
       transform: translate(20px,0);
       /* opacity: 0; */
   }
   .fade-enter-to, .fade-leave{
       /* opacity: 1; */
       transform: translate(-20px,0)
   }
   .fade-enter-active, .fade-leave-active{
       /* transition: opacity 3s */
       transition: all 2s
   }
   
   .dongba-enter-active{
   animation: bounce-in .5s;
   }
   .dongba-leave-active{
        animation: bounce-in .5s reverse;
   }
   @keyframes bounce-in {
     0% {
       transform: scale(0);
     }
     50% {
       transform: scale(1.5);
     }
     100% {
       transform: scale(1);
     }
   }
   h1{
       position: absolute;
   }
   </style>
   

   所用动画都应该设置为浮动的，不然会出现下拉或滚动条

   position: absolute;

SVG

可参考这里

二十、自定义指定

全局指令

如自定义自动聚焦输入框指定：

main.js中自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

自定义指令的使用：

<template>
    <div>
        <input type="text" v-focus>
    </div>
</template>
<script>
export default {
    name: 'zidingyi',
}
</script>
<style></style>

局部指令

将自定义指令放在使用的组建中：

<template>
    <div>
        <input type="text" v-focus>
    </div>
</template>
<script>
export default {
    name: 'zidingyi',
    directives: {
        focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
    }
}
</script>
<style></style>

二十一、过滤器

如：自动转换首字母为大写：

<template>
    <div>
        首字母自动转换：
        <input type="text" v-focus v-model="msg">
        <br>
        <span>{{ msg | capitalize}}</span>
    </div>
</template>
<script>
export default {
    name: 'zidingyi',
    data() {
        return {
            msg: '',
        }
    },
    directives: {
        focus: {
        // 指令的定义
        inserted: function (el) {
            el.focus()
            }
        }
    },
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>
<style></style>