Vue

1、Vue引言

渐进式 JavaScript 框架 --摘自官网

# 渐进式
   1. 易用  html css javascript
   2. 高效  开发前端页面 非常高效 
   3. 灵活  开发灵活 多样性

# 总结
		Vue 是一个javascript 框架

# 后端服务端开发人员: 
		Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定  双向绑定 MVVM  
		
		注意: 日后在使用Vue过程中页面中不要在引入Jquery框架
		
		htmlcss--->javascript ----->jquery---->angularjs -----> Vue
 
 # Vue 作者
 		 尤雨溪   国内的

2. Vue入门

2.1 下载Vuejs

//开发版本:
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

<body>
    <div id="app">
        {
   
   { msg }} <br>
        {
   
   { username }} <br>
        {
   
   { pwd }} <br>
        <br>
        
        <span>
            {
   
   { username }}
            <h1>{
   
   { msg }}</h1>
        </span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //定义Vue实例
        const app = new Vue({
     
     
            el:"#app", //element 这个属性，给Vue实例定义一个作用范围
            data:{
     
           //用来给Vue实例定义一些相关数据
                msg:"阿昌学Vue",
                username:"Hello Vue!!!",
                pwd:"123456"
            } ,
        });
    </script>
</body>

通过const，new 一个 Vue 实例 app对象

el属性：指定作用范围

data：定义变量

通过{ { }}来获取定义的变量

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlNtMIaq-1613477637986)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210215205058864.png)]$

<body>

    <div id="app">

        <h3>{
   
   { msg }}</h3><br>
        <h3>
            名称：{
   
   { user.name }} <br>
            年龄: {
   
   { user.age }}<br>
            第一个城市：{
   
   { lists[0] }}<br>
            第二个城市: {
   
   { lists[1] }}<br>
            全部城市: {
   
   { lists }}<br>
            <br>
            小白： {
   
   { users[0] }}
            小白名字： {
   
   { users[0].name}}<br>
            小黑： {
   
   { users[1] }}
            小黑年龄： {
   
   { users[1].age }}<br>
            小黑&小白： {
   
   { users }}<br>
        </h3>

    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
            data:{
     
     
               msg:"hello vue",
               // 可定义 数组，对象
               user:{
     
     name:"阿昌",age:"18"},
               lists:["温州","杭州","宁波","台州"],
               users:[{
     
     name:"小白",age:"18"},{
     
     name:"小黑",age:"18"}]

            }
        });
    </script>

</body>

data属性：可定义数组，对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcF0BGm2-1613477637995)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210215210326751.png)]$

<body>

    <div id="app" class="aa">
        <span>
            <!--可书写 表达式, 运算符 ,调用相关 方法 ,以及 逻辑运算 等-->
            {
   
   { msg.toUpperCase() + ' ！'}}
        </span>

    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           //使用类选择器
           el:".aa",
            data:{
     
     
               msg:"hello vue"

            }
        });
    </script>

</body>

在{ { }}中可书写表达式, 运算符 ,调用相关方法 ,以及逻辑运算等

el属性：也可以使用jquery别的选择器选择，如class选择器

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-25HRALDr-1613477637999)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210215210940936.png)]$

# 总结:
	1.vue实例(对象)中el属性: 	代表指定Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
	2.vue实例(对象)中data属性: 定义变量，用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{
   
   {变量名}}在Vue作用范围内取出
	3.在使用{
   
   { }}进行获取data中数据时,可以在{
   
   {}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
	4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

3. 【v-text】和【v-html】

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部

类似于javascript 中 innerText

<body>
    <div id="app">
        <!--通过 {
    
    { }} 获取data属性中的变量-->
        <span>{
   
   { msg }}</span>
        <br>
        <!--通过 v-text属性 来获取data属性中的变量，也可以在里面使用表达式、运算符等 -->
        <span v-text="msg+ '!' "></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
            data:{
     
     
                msg:"阿昌学vue"
            }

        });
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E3ul3Kc6-1613477638009)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210215221843937.png)]$

# 总结
	1.【 {
   
   {}}(插值表达式)】 和 【v-text】 获取数据的【区别】在于 
		a.使用【v-text取值】会将标签中【原有的数据覆盖】 使用插值表达式的形式不会覆盖标签原有的数据
		b.使用v-text可以避免在【网络环境较差】的情况下出现【插值闪烁】

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部【解析标签】

类似于javascript中 innerHTML

	<div id="app">
    
        <!--不会解析标签-->
        <span>{
   
   {message}}</span>
        <br>
        <!--不会解析标签-->
        <span v-text="message"></span>
        <br>
        <!--会解析标签-->
        <span v-html="message"></span>
    
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
            el:"#app",
            data:{
     
     
                message:"<a href=''>阿昌学vue</a>"
            }
        })
    </script>

4.vue中事件绑定【v-on】

4.1 绑定事件基本语法

<body>
    <!--
        1、页面中提供按钮
        2、按钮绑定单击事件 onclick onmove onmouseover onkeyup ...
        3、单击事件中修改年龄的值，同时渲染页面
    -->
    <div id="app">
        <h2>{
   
   {msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2>年龄： {
   
   {age}}</h2>
        <br>
        <!--通过v-on指令绑定事件-->
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
            el:"#app",
            data:{
     
     
                age:"23",
                msg:"hello,阿昌学vue！",
            },
            methods:{
     
      //methods 用来定义vue中的事件
                changeage:function (){
     
     
                    alert('单击触发');
                    //在函数中获取vue实例中data的数据，在事件函数中this就是vue实例
                    // this.age= this.age+1;
                    this.age++; //当前vue对象的age属性值++
                }
            }

        });
    </script>
    
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-894c06jW-1613477638015)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216115205176.png)]$

# 总结:
	事件三要素：  
		-事件源:发生事件dom元素  
		-事件: 发生特定的动作  click....  
		-监听器  发生特定动作之后的事件处理程序 通常是js中函数
		
	1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
	2.在【v-on:事件名】的赋值语句中是当前时间触发调用的函数名
	3.在vue中事件的【函数统一定义】在Vue实例的【methods属性】中
	4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

4.2 Vue中事件的简化语法

<body>
    <div id="app">
        <h2>{
   
   {age}}</h2>
        <input type="button" value="通过 v-on事件修改年龄，每次加1" v-on:click="add">
        <!--通过@来指定事件-->
        <input type="button" value="通过@绑定事件修改年龄，每次减1" @click="sub">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
            el:"#app",  //element: 用来指定vue作用范围
            data:{
     
     
                age:"23",
            },    //data： 用来定义vue实例中相关数据变量
            methods:{
     
     
                add:function (){
     
     
                    this.age++;
                },
                sub:function (){
     
     
                    this.age--;
                }
            }  //methods: 用来定义事件的处理函数

        });
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6rtaWj4q-1613477638016)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216124249920.png)]$

# 总结:
	1.日后在vue中绑定事件时可以通过【@符号】形式 简化:  v-on 的事件绑定
	2. v-on与@没有区别，就是简化写法

4.3 Vue事件函数两种写法

<body>

    <div id="app">
        <span>{
   
   {count}}</span>
        <input type="button"
               //第一种写法value="改变count的值" @click="changeageCount">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
            data:{
     
     
                count:"1"
            },
            methods:{
     
     
    //第一种写法
                // changeageCount:function (){
     
     
                //     this.count++;
                // }
    //第二种写法            
                changeageCount(){
     
     
                    this.count++;
                }

            }

        });
    </script>

</body>

# 总结:
	1.在Vue中事件定义存在两种写法  
		- 函数名:function(){}  推荐    
		- 函数名(){} 推荐

4.4 Vue事件参数传递

<body>
    <div id="app">
        <span>{
   
   {count}}</span>
        <input type="button" value="改变count为指定的值" @click="changeageCount(23,'achang')">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
            el:"#app",
            data:{
     
     
                count:"1"
            },
            methods:{
     
     
                //定义changeageCount与参数传递
                changeageCount(count,name){
     
     
                    this.count = count;
                    alert(name);
                }
            }
        });
    </script>

</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dr6Vvria-1613477638018)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216131121850.png)]$

# 总结:
	1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

4.5 Vue事件案例

要求

1、页面中有两个按钮一个-，一个+

2、一个随着按钮的点击h2标签的值会变化

3、

按钮-，按了减1(要求不能小于1)，否则弹出"不能再少了"；

按钮+，按了加1(上限为10)，到达上线弹出"不能再多了"

<body>
    <div id="app">

        <input type="button" value="-" @click="sub">
        <h2>{
   
   {count}}</h2>
        <input type="button" value="+" @click="add">

    </div>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
           data:{
     
     
               count:"1"
           },
           methods:{
     
     
            //加
            add(){
     
     
                if (this.count<10){
     
     
                    this.count++
                }else {
     
     
                    alert("不能再多了")
                }

            },
            //减
            sub(){
     
     
                if (this.count>1){
     
     
                    this.count--
                }else {
     
     
                    alert("不能再少了")
                }
            }

           }
        });
    </script>

</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S1uNuvVs-1613477638021)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216133209793.png)]$

5.【v-show】【 v-if】【v-bind】

5.1 v-show

v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

<body>

    <div id="app">
        <!--
            v-show： 用来控制标签展示还是隐藏的
        -->

        <h2 v-show="true">阿昌学vue</h2>
        <h2 v-show="show">阿昌学vue，这是vue中定义变量true！</h2>

        <input type="button" value="展示标签" @click="showmsg">

        <h2 v-show="age>=30">阿昌gogogoog</h2>
        <input type="button" @click="changeageAge" value="通过修改age值控制标签展示">

    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
           data:{
     
     
               show:false,
               age:"23"
           },
           methods:{
     
     
               //通过取反，来控制标签展示
               showmsg(){
     
     
                   this.show=!this.show;
               },
               //通过变量控制标签展示和隐藏
               changeageAge(){
     
     
                   this.age++;
               }

           }
        });
    </script>

</body>

# 总结
	1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
	2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if判断是否加载，可以减轻服务器的压力

v-if: 用来控制页面元素是否展示底层控制是DOM元素操作DOM

<div id="app">
    <h2 v-if="false">百知教育</h2>
    <h2 v-if="show">百知教育欢迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
     
     
        el:"#app",
        data:{
     
     
            show:false
        },
        methods:{
     
     

        }
    });
</script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

【v-bind:要绑定的属性=“引用data里面的变量”】，就可以通过vue动态修改标签属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的v-bind使用</title>

    <style>
        .aa{
     
     
            border: 2px red solid;
        }
    </style>

</head>
<body>
    <div id="app">

    <img v-bind:src="src" v-bind:class="showCss?'aa':'' ">
    <input type="button" value="动态控制标签加入样式" @click="addCss">
    <input type="button" value="改变图片" @click="changeageSrc">

    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
           data:{
     
     
               showCss:true,
               src:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1121761249,1056662297&fm=15&gp=0.jpg"
           },
           methods:{
     
     
               addCss(){
     
     
                   this.showCss = !this.showCss
               },
               changeageSrc(){
     
     
                   this.src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181127%2F34959609548946adb0d1823b5d11f18f.png&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616048819&t=a392cb0358779360c440b0ffbbbdecaa"
               }
           }
        });
    </script>

</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKg5WH6s-1613477638023)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216142818443.png)]$

5.4 v-bind 简化写法

vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的v-bind使用</title>

    <style>
        .aa{
     
     
            border: 2px red solid;
        }
    </style>

</head>
<body>

    <div id="app">

    <img :src="src" :class="showCss?'aa':'' ">
        
    <input type="button" value="动态控制标签加入样式" @click="addCss">
    <input type="button" value="改变图片" @click="changeageSrc">

    </div>

    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
     
     
           el:"#app",
           data:{
     
     
               showCss:true,
               src:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1121761249,1056662297&fm=15&gp=0.jpg"
           },
           methods:{
     
     
               addCss(){
     
     
                   this.showCss = !this.showCss
               },
               changeageSrc(){
     
     
                   this.src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181127%2F34959609548946adb0d1823b5d11f18f.png&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616048819&t=a392cb0358779360c440b0ffbbbdecaa"
               }
           }
        });
    </script>

</body>
</html>

6.【v-for】的使用

v-for: 作用就是用来对对象进行【遍历】的(数组也是对象的一种)

<body>

<div id="app">

    <span>{
   
   {user.name}} , {
   
   {user.age}}</span><br>

    <!--
        通过v-for遍历对象
     -->
    <span v-for="(value,key,index) in user">
        {
   
   {index}} : {
   
   {key}} : {
   
   {value}}
    </span><br>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr">{
   
   {index}} {
   
   {a}}</li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {
   
   {index}}==={
   
   {user.id}}==={
   
   {user.name}}===={
   
   {user.age}}
        </li>
    </ul>

</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            user:{
     
     name:"阿昌",age:23},
            arr:["温州","杭州","台州"],
            users:[
                {
     
     id:"1",name:"小黑",age:16},
                {
     
     id:"2",name:"小白",age:16}
            ]
        },
        methods: {
     
     }
    });
</script>

</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzRRwsOK-1613477638026)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216160142192.png)]$

# 总结
	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<body>

<div id="app">
    <input type="text" v-model="message">

    <span>{
   
   {message}}</span>
    <hr>
    <input type="button" value="改变Data值" @click="changeValue">

</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            message:""
        },
        methods: {
     
     
            changeValue(){
     
     
                this.message=5
            }
        }
    });
</script>

</body>

在这里插入图片描述

# 总结
	1.使用v-model指令可以实现【数据的双向绑定 】
	2.所谓双向绑定 
	表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

# MVVM架构  双向绑定机制
	Model: 数据  Vue实例中绑定数据
	
	VM:   ViewModel  监听器

	View:  页面  页面展示的数据

记事本综合案例

<body>

<div id="app">

    <input type="text" v-model="text"  >
    <input type="button" value="添加到记事本" @click="add">
    <br>

    <ul>
        <li v-for="item,index in lists">
          {
   
   {index+1}}.{
   
   {item}}<a href="javascript:;" @click="delRow(index)" >删除</a>
        </li>
    </ul>

    <br>
    <span >总数量：共 {
   
   {lists.length}} 记录</span>
    <input type="button"  v-show="this.lists.length != 0" value="删除所有" @click="delAll">


</div>
<!--
    1、完成记事本的查询所有
        1）将所有数据绑定给vue实例
        2）遍历vue实例中数据到页面
    2、添加
        1）添加按钮绑定事件
        2）在事件中获取输入框中的数据
        3）将获取的数据放入到lists里
    3、删除 删除所有 总数量
-->


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     
            lists:["阿昌学vue","阿昌gogogo"],
            text:""

        },
        methods: {
     
     
            add(){
     
     
                this.lists.push(this.text);
                this.text="";
            },
            delRow(index){
     
     
                this.lists.splice(index,1);//参数1：从哪个下标开始删除；参数2：删除几个元素
            },
            delAll(){
     
     
                this.lists=[];
                // this.lists.splice(0,this.lists.length)
            }

        }
    });
</script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N5zLZNk8-1613477638031)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216165036634.png)]$

8. 事件修饰符

修饰符可以串联

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

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
	.stop
	.prevent
	.capture
	.self
	.once
	.passive

8.1 stop事件修饰符

用来阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-Vue事件修饰符使用</title>
    <style>
        .aa{
     
     
            background: red;
            width: 300px;
            height: 300px;

        }
    </style>
</head>
<body>

<div id="app">

    <div class="aa" @click="divClick">
        <!--事件后面.stop，来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>

</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
     
     
        el: "#app",
        data: {
     
     },
        methods: {
     
     
            btnClick(){
     
     
                alert("btn被点击了")
            },
            divClick(){
     
     
              alert("div被点击了")
            }
        }
    });
</script>

</body>
</html>

点击红色div，弹出div被点击了；

点击按钮btn，弹出btn被点击了，但因为事件冒泡，又弹出div被点击了

事件后.stop，来阻止事件冒泡

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-adKIhybe-1613477638034)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216183020197.png)]$

8.2 prevent 事件修饰符

用来阻止标签的默认行为

    <!--事件后面.prevent，来阻止事件默认行为-->
    <a href="http://www.baidu.com" @click.prevent ="aClick">阿昌学vue</a>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLmFXBrB-1613477638036)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210216184216319.png)]$

点击上面的a标签后会弹出a被点击了，然后因为默认行为，还跳转到百度；

通过.prevent，来阻止默认跳转行为，值弹出a被点击了

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ====> 只触发自己标签的上特定动作的事件只关心自己标签上触发的事件不监听事件冒泡

    <!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--事件后面.stop，来阻止事件冒泡-->
        <input type="button" value="按钮1" @click="btnClick">
    </div>

点击按钮1，原本会弹出按钮1的alert和div的alert；

给div事件.self，就可以让他只关注自己的标签事件，他下面的子标签就不会出现事件冒泡了

8.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
	-->
    <a href="http://www.baidu.com/" @click.prevent.once="aClick">achang</a>

9. 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

9.1 enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

Day194.Vue基本内容 -Vue

Vue

1、Vue引言

2. Vue入门

2.1 下载Vuejs

2.2 Vue第一个入门应用

3. 【v-text】和【v-html】

3.1 v-text

3.2 v-html

4.vue中事件绑定【v-on】

4.1 绑定事件基本语法

4.2 Vue中事件的简化语法

4.3 Vue事件函数两种写法

4.4 Vue事件参数传递

4.5 Vue事件案例

5.【v-show】【 v-if】【v-bind】

5.1 v-show

5.2 v-if

5.3 v-bind

5.4 v-bind 简化写法

6.【v-for】的使用

7 .v-model 双向绑定

记事本综合案例

8. 事件修饰符

8.1 stop事件修饰符

8.2 prevent 事件修饰符

8.3 self 事件修饰符

8.4 once 事件修饰符

9. 按键修饰符

9.1 enter 回车键

9.2 tab 键

猜你喜欢

Day194.Vue基本内容 -Vue

Vue

1、Vue引言

2. Vue入门

2.1 下载Vuejs

2.2 Vue第一个入门应用

3. 【v-text】和【v-html】

3.1 v-text

3.2 v-html

4.vue中事件绑定【v-on】

4.1 绑定事件基本语法

4.2 Vue中事件的简化语法

4.3 Vue事件函数两种写法

4.4 Vue事件参数传递

4.5 Vue事件案例

5.【v-show】【 v-if】 【v-bind】

5.1 v-show

5.2 v-if

5.3 v-bind

5.4 v-bind 简化写法

6.【v-for】的使用

7 .v-model 双向绑定

记事本综合案例

8. 事件修饰符

8.1 stop事件修饰符

8.2 prevent 事件修饰符

8.3 self 事件修饰符

8.4 once 事件修饰符

9. 按键修饰符

9.1 enter 回车键

9.2 tab 键

猜你喜欢

5.【v-show】【 v-if】【v-bind】