Vue学习(第一章 Vue核心）

最新推荐文章于 2022-07-14 17:59:16 发布

ok_1234

最新推荐文章于 2022-07-14 17:59:16 发布

阅读量905

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ok_1234/article/details/112917838

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Vue的核心概念，包括基本使用、模板语法、计算属性和监视、class与style绑定、条件渲染、列表渲染、事件处理、表单输入绑定、Vue实例生命周期、过渡与动画、过滤器、内置指令和自定义指令的使用，是Vue初学者的入门指南。

摘要由CSDN通过智能技术生成

这里写目录标题

1.1.vue的基本使用

引入vue.js
创建vue对象
el:指定根element（选择器）
data:初始化数据（页面可以访问）
双向数据绑定：v-model
显示数据：{{xxx}}
理解vue的mvvm实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.引入vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建vue对象
 el:指定根element（选择器）
 data:初始化数据（页面可以访问）
3.双向数据绑定：v-model
4.显示数据：{{xxx}}
5.理解vue的mvvm实现
-->

<div id ="app">
    <input type="text" v-model="username">
    <p>Hello {{username}}</p>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
            username :'zhoujun'

        }
    })
</script>

</body>
</html>

MVVM

model: 模型，数据对象（data)
view: 视图，模板页面
viewModel：视图模型（vue的实例）

1.2.模板语法

模板的理解：
动态的html页面
包含了一些Js语法代码
双大括号表达式
指令（以v-开头的i定义标签属性）
双大括号表达式
语法：{{exp}} 或 {{{exp}}
功能：向页面输出数据
可以调用对象的方法
指令一：强制数据绑定
功能：指定变化的属性值
完整写法：
v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
简介写法：
：xxx=‘yyy’
指令二：绑定事件监听
功能：绑定指定事件名的回调函数
完整写法：
v-on:click=‘xxx’
简洁写法：
@click=‘xxx’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1. 模板的理解：
    动态的html页面
    包含了一些Js语法代码
        双大括号表达式
        指令（以v-开头的i定义标签属性）
2.双大括号表达式
    语法：{{exp}} 或 {{{exp}}
    功能：向页面输出数据
    可以调用对象的方法
3.指令一：强制数据绑定
    功能：指定变化的属性值
    完整写法：
        v-bind:xxx='yyy' //yyy会作为表达式解析执行
    简介写法：
        ：xxx='yyy'
4.指令二：绑定事件监听
    功能：绑定指定事件名的回调函数
    完整写法：
    v-on:click='xxx'
    简洁写法：
        @click='xxx'
-->
<div id ="app">
    <h2>1.双大括号表达式</h2>
    <p>{{msg}}</p><!--textContent-->
    <p v-html="msg"></p><!--innerHtml-->
    <p v-text="msg"></p><!--textContent-->


    <h2>2.指令一：强制数据绑定</h2>
    <img src="imgUrl">
    <img v-bind:src="imgUrl">
    <img :src="imgUrl">

    <h2>3.指令二：绑定事件监听</h2>
    <button v-on:click="test">text1</button>
    <button @click="test">text1</button>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
            msg :'hello world',
            imgUrl:'https://cn.vuejs.org/images/logo.png'

        },
        methods:{
            test:function(){
                alert('hahaha')
            }
        }
    })
</script>

</body>
</html>

1.3计算属性和监视

计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
监视属性：
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时，回调函数自动调用，在函数内部进行计算
计算属性高级：
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算

回调函数

你定义的
你没有调用
但最终它执行了

主要关注：1.什么时候调用；2.用来做什么

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
1.计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果
2.监视属性：
    通过vm对象的$watch()或watch配置来监视指定的属性
    当属性变化时，回调函数自动调用，在函数内部进行计算
3.计算属性高级：
    通过getter/setter实现对属性数据的显示和监视
    计算属性存在缓存，多次读取只执行一次getter计算
-->
<div id ="app">
    姓：<input type="text" placeholder="First name" v-model="firstName"><br/>
    名：<input type="text" placeholder="Last name" v-model="lastName"><br/>
    姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br/>
    姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br/>
    姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br/>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
            firstName: 'A',
            lastName: 'B',

        },
        computed:{
            //什么时候执行：初始化显示/相关的data属性数据发生改变
            fullName1(){//计算属性中的一个方法，
                return this.firstName+' '+this.lastName
            },
            fullName3:{
                //回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
                get(){
                    return this.firstName +' '+this.lastName
                },
                //回调函数，监视当前属性值的变化，当属性值发生改变时回调，更新相关的属性数据
                set(value){//value就是fullname3的最新属性值
                    const names = value.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[1]
                }
            }
        },
        watch:{
            firstName: function (newValue){//firstName发生了变化
                this.fullName2 = newValue+' '+this.lastName
            }
        },

    })
</script>

</body>
</html>

1.4class与style绑定

理解
在应用界面中，某个（些）元素的样式是变化的
class/style绑定就是专门用来实现动态样式的效果技术
class绑定：：class=‘xxx’
xxx是字符串
xxx是对象
xxx是数组
style绑定
：style="{color:activeColor,fontSize:fontSize+‘px’}"
其中activeColor/fontSize是data属性

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: green;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
1.理解
    在应用界面中，某个（些）元素的样式是变化的
    class/style绑定就是专门用来实现动态样式的效果技术
2.class绑定：：class='xxx'
    xxx是字符串
    xxx是对象
    xxx是数组
3.style绑定
    ：style="{color:activeColor,fontSize:fontSize+'px'}"
    其中activeColor/fontSize是data属性
-->
<div id ="app">
    <h2>1.class绑定： ：class='xxx'</h2>
    <p :class="a">hello world</p>
    <p class="cClass" :class="a">hello world</p>
    <p :class="{aClass:true,bClass:false}">hello world</p>
    <p :class="['aClass','cClass']">hello world</p>

    <h2>2.style绑定</h2>
    <p :style="{color:activeColor,fontSize:fontSize+'px'}">：style="{color:activeColor,fontSize:fontSize+'px'}"</p>

    <button @click="update">更新</button>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
          a:'aClass',
            activeColor:'red',
            fontSize:20
        },
        methods:{
            update(){
                this.a = 'bClass',
                this.fontSize =30,
                this.activeColor = 'green'
            }
        }


    })
</script>

</body>
</html>

1.5 条件渲染

条件渲染指令
- v-if
- v-else
- v-show
比较v-if与v-show
如果需要频繁切换v-show较好

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: green;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>
<!--
1. 条件渲染指令
	- v-if
	- v-else
	- v-show
2. 比较v-if与v-show
	如果需要频繁切换v-show较好
-->
<div id ="app">
   <p v-if="ok">成功了</p>
    <p v-else>失败</p>

    <p v-show="ok">好运降至</p>
    <p v-show="!ok">慢慢来不急</p>
    <button @click="ok=!ok">切换</button>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //创建vue实例
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
          ok: false
        }


    })
</script>

</body>
</html>

1.6 列表渲染

列表显示
数组： v-for / index
对象： v-for / key
列表的更新显示
删除item
替换item

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass{
            color: red;
        }
        .bClass{
            color: green;
        }
        .cClass{
            font-size: 30px;
        }
    </style>
</head>
<body>

<div id ="app">
   <h2>测试：v-for遍历数组</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}---
            <button @click="deletep(index)">删除</button>
            <button @click="updatep(index,{name:'cat',age:20})">更新</button>
        </li>
    </ul>
    <h2>测试：v-for遍历对象</h2>
    <ul>
      <li v-for="(value,key) in persons" :key="key">
          {{value}}---{{key}}
      </li>
    </ul>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //vue本身只是监视了persons的改变，没有监视数据内部数据的改变
    //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）--->数组内部改变，界面自动变化
    const vm = new Vue({//配置对象
        el:'#app', //element：选择器
        data:{ //数据（model)
          persons:[
              {name: 'Tom',age:18},
              {name: 'Jack',age:19},
              {name: 'Bob',age:17},
              {name: 'Davie',age:20},
          ]
        },
        methods:{
            deletep (index){
                //删除persons中指定index的p
                this.persons.splice(index,1)
            },
            updatep(index,newP){
                //并没有改变person本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面//并没有改变person本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
                //this.persons[index] = newP
                //this.persons = []
                this.persons.splice(index,1,newP)
            }
        }


    })
</script>

</body>
</html>

let声明的变量只在let命令所在的代码块内有效。
const声明一个只读的常量，一旦声明，常量的值就不能改变。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: green;
        }

        .cClass {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div id="app">

    <input type="text" v-model="searchName">
    <ul>
        <li v-for="(p,index) in filterPersons" :key="index">
            {{index}}---{{p.name}}---{{p.age}}---

        </li>
    </ul>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //vue本身只是监视了persons的改变，没有监视数据内部数据的改变
    //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）--->数组内部改变，界面自动变化
    const vm = new Vue({//配置对象
        el: '#app', //element：选择器
        data: { //数据（model)
            searchName: '',
            orderType:0,//0代表原本，1代表升序，2代表降序
            persons: [
                {name: 'Tom', age: 18},
                {name: 'Jack', age: 19},
                {name: 'Bob', age: 17},
                {name: 'Davie', age: 20},
            ]
        },
        methods: {
            setOrderType(type){
                this.orderType = type
            }

        },
        computed: {
            filterPersons() {
                //取出相关的数据
                const {searchName, persons,orderType} = this
                //最终需要显示的数组
                let fPerson;
                //对persons进行过滤
                fPerson = persons.filter(p => p.name.indexOf(searchName) !== -1)

                //排序
                if(orderType !==0){
                    fPerson.sort(function (p1,p2)
                    {//如果返回负数p1在前，返回正数p2在前
                        if (orderType === 2) {
                            return p2.age - p1.age
                        } else
                            return p1.age - p2.age
                    })

                    }
                return fPerson
            }
        }


    })
</script>

</body>
</html>

1.7 事件处理

绑定监听

1） v-on:xxx=“fun”
2) @xxx=“fun”
3) @xxx=“fun(参数）”
4) 默认事件形参：event

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aClass {
            color: red;
        }

        .bClass {
            color: green;
        }

        .cClass {
            font-size: 30px;
        }
    </style>
</head>
<body>

<div id="app">
    <h2> 1.绑定监听</h2>
    <button @click="test1">test1</button>
    <button @click="test2('hello world')">test2</button>
    <button @click="test3">test3</button>
    <button @click="test4('123',$event)">test4</button>

    <h2> 2.事件修饰符</h2>
    <div style="width: 200px;height: 200px;background: red" @click="test5">
        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div>
    </div>
    <a href="http://www.baidu.com" @click.prevent="test7">去百度</a>

    <h2> 3.按键修饰符</h2>
    <input type="text" @keyup.enter="test8">
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //vue本身只是监视了persons的改变，没有监视数据内部数据的改变
    //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）--->数组内部改变，界面自动变化
    const vm = new Vue({//配置对象
        el: '#app', //element：选择器
        data: { //数据（model)
            test1(){
                alert('test1')
            },
            test2(msg){
                alert(msg)
            },
            test3(event){
                alert(event.target.innerText)
            },
            test4(number,event){
                alert(number+' '+event.target.innerText)
            },
            test5(){
                alert("out")
            },
            test6(event){//停止事件冒泡
                alert("in")
            },
            test7(event){//停止事件冒泡
                alert("test7")
            },
            test8(event){//停止事件冒泡
                if(event.keyCode===13){
                    alert(event.target.value+''+ event.keyCode)
                }

            }
        },

    })
</script>

</body>
</html>

1.8 表单输入绑定

使用v-model对表单数据自动收集

text/textarea
checkbox
radio
select

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <form action="/xxx" @submit.prevent="handleSubmit">
        <span>用户名：</span>
        <input type="text" v-model="username"><br>

        <span>密码：</span>
        <input type="password" v-model="pwd"><br>

        <span>性别：</span>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female">女</label>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male">男</label><br>

        <span>爱好：</span>
        <input type="checkbox" id="basket" value="basket" v-model="likes">
        <label for="basket">篮球</label>
        <input type="checkbox" id="football" value="football" v-model="likes">
        <label for="football">足球</label>
        <input type="checkbox" id="paiqiu" value="paiqiu" v-model="likes">
        <label for="paiqiu">排球</label><br>

        <span>城市：</span>
        <select v-model="cityId">
            <option value="">未选择</option>
            <option :value="city.id" v-for="(city,index) in allCities" :key="index">{{city.name}}</option>
        </select><br>

        <span>介绍：</span>
        <textarea rows="10" v-model="desc"></textarea><br>

        <input type="submit" value="注册">
    </form>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //vue本身只是监视了persons的改变，没有监视数据内部数据的改变
    //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）--->数组内部改变，界面自动变化
    const vm = new Vue({//配置对象
        el: '#app', //element：选择器
        data: { //数据（model)
           username:'',
            pwd:'',
            sex:'女',
            likes:[],
            allCities:[{id:1 ,name:'BJ'},{id:2,name:'SH'},{id:3,name:'NJ'}],
            cityId:'',
            desc:''
        },
        methods:{
            handleSubmit(){
                console.log(this)
            }
        }

    })
</script>

</body>
</html>

1.9 Vue实例生命周期

在这里插入图片描述

vue对象的生命周期
- 初始化显示
  - beforeCreate()
  - create()
  - beforeMount()
  - mounted()
- 更新显示
  - beforeUpdate()
  - updated()
- 销毁vue实例：vm.$destory()
  - beforeDestroy()
  - destroyed()
常用的生命周期方法
create()/mounted():发送ajax请求，启动定时器等异步任务
beforeDestory():做收尾工作，如清除定时器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <button @click="destroyVM">destroy vm</button>
    <p v-show="isShow">hello world</p>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({//配置对象
        el: '#app', //element：选择器
        data: { //数据（model)
            isShow: true,
        },
        mounted() {///初始化显示之后立即调用（1次）
            this.intervalId = setInterval(() => {
                console.log('--------------------')
                this.isShow = !this.isShow
            }, 1000)
        },
        beforeDestroy(){//死亡之前调用（1次）
            //清除定时器
            clearInterval(this.intervalId)
        },
        methods:{
            destroyVM(){
                //干掉VM
                this.$destroy()
            }
        }
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div id="app">
    <button @click="destroyVM">destroy vm</button>
    <p v-show="isShow">hello world</p>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({//配置对象
        el: '#app', //element：选择器
        data: { //数据（model)
            isShow: true,
        },

        //1.初始化阶段
        beforeCreate(){
            console.log('beforeCreate()')
        },
        created(){
            console.log('created()')
        },
        beforeMount(){
            console.log('beforeMount()')
        },
        mounted() {///初始化显示之后立即调用（1次）
            console.log('mounted()')
            this.intervalId = setInterval(() => {
                console.log('--------------------')
                this.isShow = !this.isShow
            }, 1000)
        },

        //2.更新阶段
        beforeUpdate(){
            console.log('beforeUpdate()')
        },
        updated(){
            console.log('updated()')
        },
        //3.死亡阶段
        beforeDestroy(){//死亡之前调用（1次）
            console.log('beforeDestroy()')
            //清除定时器
            clearInterval(this.intervalId)
        },
        destroyed(){
            console.log('destroyed()')
        },
        methods:{
            destroyVM(){
                //干掉VM
                this.$destroy()
            }
        }
    })
</script>

</body>
</html>

1.10 过渡与动画

1.10.1 vue动画的理解

操作css的trasition或animation
vue会给目标元素添加/移除特定的class
过渡的相关类名
xxx-enter-active:指定显示的trasition
xxx-leave-active:指定隐藏的trasition
xxx-enter/xxx-leave-to:指定隐藏时的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*显示/隐藏的过滤效果*/
        .xxx-enter-active,xxx-leave-active{
            transition: opacity 1s;
        }
        /*隐藏时的样式*/
        .xxx-enter,.xxx-leave-to{
            opacity: 0;
        }
        /*显示的过滤效果*/
        .move-enter-active{
            transition: all 1s;
        }
        /*隐藏的过滤效果*/
        .move-leave-active{
            transition: all 3s;
        }
        /*隐藏时的样式*/
        .move-enter,.move-leave-to{
            opacity: 0;
            transform: translateX(20px);
        }
    </style>

</head>
<body>

<div id="test1">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="xxx">
        <p v-show="isShow" class="xxx-enter-active">hello</p>
    </transition>


</div>

<div id="test2">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="move">
        <p v-show="isShow" class="xxx-enter-active">hello</p>
    </transition>


</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm1 = new Vue({//配置对象
        el: '#test1', //element：选择器
        data: { //数据（model)
            isShow: true,
        }
    })

    const vm2 = new Vue({//配置对象
        el: '#test2', //element：选择器
        data: { //数据（model)
            isShow: true,
        }
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>

</head>
<body>
<div id="example-2">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#example-2',
        data: {
            show: true
        }
    })
</script>

</body>
</html>

1.12 过滤器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>

</head>
<body>
<div id="test">
   <h2>{{date}}</h2>
    <p>完整版: {{date | dateString}}</p>
    <p>完整版: {{date | dateString('YYYY-MM-DD')}}</p>
    <p>完整版: {{date | dateString('HH:MM:SS')}}</p>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script type="text/javascript">
    //自定义过滤
    Vue.filter('dateString',function (value,format){
        return moment(value).format(format||'YYYY-MM-DD HH:MM:SS')
    })

    new Vue({
        el: '#test',
        data: {
            date: new Date()
        }
    })
</script>

</body>
</html>

1.13 内置指令与自定义指令

1.13.1 常用内置指令

1） v:text：更新元素的textContent
2) v-html: 更新元素的innerHTML
3) v-if: 如果为true,当前标签才会输出到页面
4） v-else: 如果为false,当前标签才会输出到页面
5） v-show: 通过控制display样式来控制显示/隐藏
6）v-for: 遍历数组/对象
7）v-on: 绑定事件监听，一般简写为@
8) v-bind: 强制绑定解析表达式，可以省略v-bind
9) v-model: 双向数据绑定
10）ref:指定唯一标识，vue对象通过$els属性访问这个元素对象
11）v-cloak: 防止闪现，与css配合：[v-cloak]{display:none}

1.13.2 自定义指令

注册全局指令
Vue.directive(‘my-directive’,function(el,binding){
el.innerHTML = binding.value.toupperCase()
})
注册局部指令
directives:{
‘my-directive’:{
bind(el,bingding){
el.innerHTML = binding.value.toupperCase()
}
}
}
使用指令
v-my-directive=‘xxx’

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none
        }
    </style>

</head>
<body>
<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>

<div id="test2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.js"></script>
<script type="text/javascript">
    //定义全局指令
    //el:指令属性所在的标签对象
    //binding:包含指令相关信息数据的对象
    Vue.directive('upper-text',function (el,binding){
        console.log(el,binding)
        el.textContent = binding.value.toUpperCase()
    })

    new Vue({
        el: '#test1',
        data: {
            msg1: 'NBA I love This Game'
        },
        derectives:{//注册局部指令：只在当前vm管理范围内有效
            'lower-text':function (el,binding){
                el.textContent = binding.value.toLowerCase()
            }
        }

    })

    new Vue({
        el: '#test2',
        data: {
            msg2: 'Just Do It'
        }

    })
</script>

</body>
</html>

1.14 插件

/*
vue的插件
 */
(function(){
    //需要向外暴露的插件对象
    const MyPlugin = {}
    //插件对象必须有一个install()
    MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或 property
        Vue.myGlobalMethod = function () {
            // 逻辑...
            console.log('Vue函数对象的方法myGlobalMethod()')
        }

        // 2. 添加全局资源
        Vue.directive('my-directive', function (el, binding) {
            el.textContent = binding.value.toUpperCase()
        })

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {
            // 逻辑...
            console.log('vue实例对象的方法$myMethod()')
        }
    }
    //向外暴露
    window.MyPlugin = MyPlugin
})()