vue

1 前端发展介绍

# HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
    # ECMA标准
    #JavaScript=ECMA+bom+dom
# Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
# Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
# React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
# 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
# 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
# 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
# Vue:2.x  3.x
     -ts:typescript
     -less
 # 在不久的将来 ，前端框架可能会一统天下


# 主流：vue，react ，uni-app
    -typescript

2 Vue的快速使用

# Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
    -可以一点一点地使用它，只用一部分，也可以整个工程都使用它
    
# 开发vue，有一款编辑器
    -vscode：微软 轻量级编辑器，免费
    -vim：装插件，搞得花里胡哨，开发代码
    -Jetbrains:IDEA(java)，Pycharm，Goland，phpStrom，webstorm   收费 吃内存(java开发)
    -AndroidStadio：免费，谷歌买了Jetbrains授权+ADT
        -sun：java---》后来被甲骨文收购了--->oracle jdk   openjdk  毕昇jdk
        
    -Pycharm + 插件  开发vue 使用起来跟webstorm
        -把vue的源代码下载到本地
        
        
 # M-V-VM思想
    - MTV :django
    - MVC :后端框架一般基于这种架构
    - MVVM:前端框架 vue
    - MVP：移动端
    
# 组件化开发、单页面开发
    -组件化开发：有自己独立的html，css，js
    -单页面应用(SPA)
      -只有一个html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>vue快速使用</h1>
    <p>名字：{{name}}</p>
    <p>年龄：{{age}}</p>

</div>


</body>
<script>
    // 引入vue后，会有Vue的构造函数,传入 配置项 对象
    // 页面中id为app的div就被vue托管了，在div中就可以写vue的语法，指令
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'lqz',
            age: 19
        },
    })
</script>

</html>

3 插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>vue插值渲染变量</h1>
    <p>名字：{{name}}</p>
    <p>年龄：{{age}}</p>
    <p>爱好：{{hobby}}</p>
    <p>第0个爱好：{{hobby[0]}}</p>
    <p>wife：{{wife}}</p>
    <p>wife的名字：{{wife['name']}}</p>
    <p>wife的年龄：{{wife.age}}</p>
    <p>标签：{{a}}</p>
    <h1>vue插值渲染简单表达式</h1>
    <p>{{10 > 9 ? '大于' : '小于'}}</p>
    <p>{{age+1}}</p>

    <h1>渲染函数，后面讲</h1>

</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'lqz',
            age: 19,
            hobby: ['篮球', '足球', '乒乓球'],
            wife: {name: '刘亦菲', age: 38},
            a: '<a href="http://www.baidu.com">点我</a>'
        },
    })


    // 三目运算符----》三元表达式
    // var a = 10 > 9 ? '大于' : '小于'
</script>

</html>

4 指令系统之文本指令

# 写在[任意]标签上 以  v-xx  开头的，都是vue的指令
# 文本指令
    v-text：把变量渲染到标签中，如果之前有数据，覆盖掉
    v-html:如果是标签字符串，会把标签渲染到标签内
    v-show：控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"
    v-if：控制标签的显示与隐藏，但是它是通过dom的增加和删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>文本指令 v-text</h1>
    <p v-text="name">彭于晏</p>
    <h1>文本指令 v-html</h1>
    <span v-html="a"></span>
    <h1>v-show</h1>
    <img v-show='b' src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px" height="300px">

    <h1>v-if</h1>
    <div v-if="b1">
        <a href="">点我看美女</a>
        <h3>美女</h3>
    </div>

</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'lqz',
            a: '<a href="http://www.baidu.com">点我</a>',
            b:true,
            b1:true
        },
    })

</script>

</html>

5 指令系统之事件指令

# 放在标签上：v-on:事件名='函数'
# 事件名可以写：click,dbclick, input标签:change,blur,input
# 补充：es6 对象写法
    var name = 'lqz'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {name, age, handleClick() {}}
    
# v-on:事件名='函数'  简写成  @事件名='函数'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>事件指令</h1>

    <button v-on:click="handleShow">点我显示消失</button>
    <div v-if='show'>
        <img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px"
             height="300px">

    </div>
    <h1>事件指令函数带参数</h1>
    <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
    <br>
    <button @click="handleClick1('lqz')">函数需要参数，但是传值了</button>
    <br>
    <button @click="handleClick2('lqz')">函数需要3参数，但是传了1个</button>
    <br>
    <button @click="handleClick3($event,'lqz')">函数需要2参数，一个事件，一个字符串</button>


</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show: true,
        },
        methods: {
            // handleShow: function () {
            //     // this 就是vm对象 vm.show
            //     this.show = !this.show
            // },
            //es6的语法，对象写法,以后都这样写
            handleShow() {
                // this 就是vm对象 vm.show
                this.show = !this.show
            },
            // 需要一个参数，但是没有传，会把事件传入
            handleClick(a) {
                console.log(a)
                alert('帅哥')
            },
            // 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量
            handleClick1(name) {
                console.log(name)
            },
            // 需要3个参数，传了一个，没问题，后面俩都是 undefined
            handleClick2(a, b, c) {
                console.log(a)
                console.log(b)
                console.log(c)

            },
            handleClick3(event,name){
                console.log(event)
                console.log(name)

            }


        }
    })


    // es5中
    // var obj={'name':'lqz','age':19}
    // var obj={name:'lqz',age:19}
    // es6中
    var name = 'lqz'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {
        name, age, handleClick() {
        }
    }


</script>

</html>

6 指令系统之属性指令

# 写在标签上的 name，class,href,src,id.....属性
# v-bind:属性名='变量'
# 简写成：
v-bind:属性名='变量'         :属性名="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>属性指令</h1>
    <button @click="handleClick">点我看美女</button>
    <br>
    <img v-bind:src="url" alt="" width="300px" height="300px">
    <hr>
    <button @click="handleChange">点我换美女</button>
    <br>
    <img :src="img_url" alt="" width="300px" height="300px">
    <hr>
    <img :src="img_url2" alt="" width="300px" height="300px">
    <hr>

    <div :id="id_div">
        我是div
    </div>
</div>


</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
            img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
            img_url2: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
            imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/21/f06c65142fe50c19!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/c0135f7e74050a74!400x400.jpg',
                'https://img2.woyaogexing.com/2022/10/20/5972f09505ac681d!400x400.jpg'],
            id_div:'xxx'
        },
        methods: {
            handleClick() {
                this.url = 'https://p.qqan.com/up/2022-8/202283919254843.jpg'

            },
            handleChange() {
                // floor:只取整数部分
                //Math.random() 生成0--1直接的数字，小数
                var i = Math.floor(Math.random() * this.imgList.length)
                console.log(i)
                this.img_url = this.imgList[i]
            }
        },
        mounted() {
            // 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
            setInterval(() => {
                var i = Math.floor(Math.random() * this.imgList.length)
                this.img_url2 = this.imgList[i]
            }, 1000)
        }
    })


</script>

</html>

7.style和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }

        .size {
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="app">

    <h1>class的使用</h1>
    <div :class="classObj">
        我是class，的div
    </div>

    <h1>style的使用</h1>
    <!--    <div style="background-color: aquamarine;font-size: 50px">-->
    <div :style="styleObj">
        我是style，的div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class的字符串用法
            classStr: 'red',
            // class的数组写法,因为类本身可以放多个，用数组最合适
            classList: ['red'],
            // class的对象
            classObj: {red: true, size: false},

            // style 的字符串写法，以后改不好改
            styleStr: 'background-color: aquamarine;font-size: 50px',
            // style的数组写法
            // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
            //样式如果是多个单词用- 链接的形式可以写成驼峰
            styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
            // style的对象写法
            styleObj: {backgroundColor: 'blue', fontSize: '40px'}
        }
    })


</script>
</html>

8.条件渲染

# 写在标签上，控制标签的显示与不显示
    v-if='布尔值/运算完是布尔值'
    v-else-if='布尔值/运算完是布尔值'
    v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>条件渲染</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80 && score<90">良好</div>
    <div v-else-if="score>=60 && score<80">及格</div>
    <div v-else>不及格</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 98
        }
    })


</script>
</html>

9. 列表渲染

# v-for：放在标签上，可以循环显示多个此标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .top {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 30px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>

                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空空如何
                </div>


            </div>
        </div>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick() {
                // 假设去后端加载的数据
                this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
                    {id: 2, name: '钢笔', price: '9元', count: 2},
                    {id: 3, name: '铅笔', price: '4元', count: 10},
                    {id: 4, name: '苹果', price: '2元', count: 3},]
            }
        }
    })


</script>
</html>

9.1 v-for 循环数组，循环字符串，数字，对象

# v-for 可以循环数组，数字，字符串，对象
    v-for="key in obj"
        -如果是数组：key就是数组的一个个元素
        -如果是数字：key就是从1开始的一个个数字
        -如果是字符串：key就是一个个字符
        -如果是对象：key就是一个个value的值
    v-for="(key,value) in obj" 
        -如果是数组：key就是数组的一个个元素,value就是索引
        -如果是数字：key就是从1开始的一个个数字,value就是索引
        -如果是字符串：key就是一个个字符,value就是索引
        -如果是对象：key就是一个个value的值，value就是一个个key
        
        
        
 # 每次循环的标签上，一般都会带一个属性：      :key='值必须唯一'
    -key值得解释：为了加速虚拟dom的替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .top {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 30px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>

                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList" :key="good.id">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空空如何
                </div>


            </div>
        </div>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick() {
                // 假设去后端加载的数据
                this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
                    {id: 2, name: '钢笔', price: '9元', count: 2},
                    {id: 3, name: '铅笔', price: '4元', count: 10},
                    {id: 4, name: '苹果', price: '2元', count: 3},]
            }
        }
    })


</script>
</html>

9.2 数组的检测与更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

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

    <h1>数组的检测与更新</h1>
    <button @click="handleClick">点我追加女生</button>
    |
    <button @click="handleClick1">点我追加一批女生</button>|
    <button @click="handleClick4">点我修改数组页面变化</button>|
    <p v-for="girl in girls">{{girl}}</p>

    <h1>对象的检测与更新</h1>
    <button @click="handleClick2">点我追加身高</button>
    |
    <button @click="handleClick3">点我追加身高--解决</button>
    |
    <p v-for="(value,key) in obj">{{key}}---{{value}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '杨超越', '刘诗诗'],
            obj: {'name': 'lqz', age: 19}
        },
        methods: {
            handleClick() {
                this.girls.push('美女1号')
            },
            handleClick1() {
                var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
                console.log(a)
            },
            handleClick2() {
                this.obj.height = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick3() {
               Vue.set(this.obj,'height',180)  // 监控到变化了
            },
            handleClick4(){
                Vue.set(this.girls,0,'sdasdfas')
            }
        }
    })


</script>
</html>

10. 双向数据绑定

# input标签，v-model：数据双向绑定
    -使用 属性指令绑定 :value='变量'  是数据的单向绑定
    - v-model="name" ：数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>数据双向绑定</h1>
    <p>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <button @click="handleSubmit">提交</button>{{err}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            err:''
        },
        methods: {
            handleSubmit() {
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            }
        }

    })


</script>
</html>

11.事件处理

# 事件绑定 v-on:事件名='函数'---》@事件名='函数'
# input 也有很多事件
    -blur：失去焦点触发
    -change：发生变化触发
    -input：输入触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>input的事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="name1" @blur="handleBlur"> ---->{{name1}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了，触发了', this.name1)
            },
            handleChange() {
                console.log('发生变化，触发了', this.name2)
            },
            handleInput() {
                console.log('输入了内容，触发了', this.name3)
            }
        }

    })


</script>
</html>

10.1 过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
            newdataList:[
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是：', this.search)
                // var _this=this
                // 复杂写法
                // this.dataList=this.dataList.filter(item=>{
                //     console.log(this)
                //     // 判断this.search是否在item中，如果在保留，return true，如果不在返回false
                //     if (item.indexOf(this.search)>=0){
                //         return true
                //     }else {
                //         return  false
                //     }
                // })

                // 简单写法
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }


    })


    // 1 补充：数组过滤方法，内置的
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
    //     'csrf',
    //     'd',
    //     'dddd',
    // ]
    // // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
    // // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
    // l = l.filter(function (item) {
    //     console.log('进来一个值：',item)
    //     return false
    // })
    // console.log(l)


    //2 判断子字符串是否在字符串中
    // var s='tttatom'
    // var a ='a'
    // console.log(s.indexOf(a)>=0)


    // 3  es6 模板字符串  ``   对象写法    箭头函数
    // var f=function (){
    //     console.log('打印了')
    // }
    //3.1 不带参数的箭头函数
    // var f = () => {
    //     console.log('打印了')
    // }

    // 3.2 带一个参数，没有返回值得箭头函数
    // var f = name=>{
    //     console.log('打印了', name)
    // }
    // 3.3 多个参数，没有返回值
    // var f = (name,age) => {
    //     console.log('打印了', name,age)
    // }
    // 3.4 带一个参数，有返回值，函数体只有一行

    // var f = function (name) {
    //     return name+'nb'
    // }
    //  var f = name=> name+'nb'

    // 有什么用？ 1 简洁  2 箭头函数没有自己的this,会用上一层的this


    // var f = function () {
    //     console.log('匿名函数的this', this)
    // }
    // var f1 = () => {
    //     console.log('箭头函数的this', this)
    // }

    // var obj = {
    //     f: function () {
    //         console.log('匿名函数的this', this)
    //     },
    //     f1: () => {
    //         console.log('箭头函数的this', this)
    //     }
    // }
    //
    // obj.f()
    // obj.f1()


</script>
</html>

10.2事件修饰符

.stop    只处理自己的事件，不向父控件冒泡
.self    只处理自己的事件，子控件冒泡的事件不处理
.prevent    阻止a链接的跳转
.once    事件只会触发一次（适用于抽奖页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>事件修饰符</h1>
    <h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
    <ul @click="handleUl">
        <li @click.stop="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>


    <h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

    <h3>阻止a标签跳转</h3>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('ul被点了')
            },
            handleMn() {
                console.log('美女被点了')
            },
            handleSg() {
                console.log('帅哥被点了')
            },
            handleA() {
                console.log('a被点了')
            },
            handleOnce() {
                console.log('恭喜你，秒到了')
            }
        }

    })


</script>
</html>

10.3按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            handleUp(event) {
                console.log('火车被按了')
                // if (event.code == 'Enter') {
                //     console.log('回车键被案例', event)
                // }
            }
        }

    })


</script>
</html>

posted @ 2022-10-24 17:36 shangxin_bai 阅读(98) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue进阶

· vue高级，elementui

· vue之简介

· 前端-Vue的使用和语法指令

· vue学习笔记

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

公告

昵称： shangxin_bai
园龄： 3年2个月
粉丝： 2
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

shangxin_bai

vue