Vue.js(二)

已于 2023-03-24 15:46:15 修改
阅读量161 收藏
点赞数
分类专栏： 前端 文章标签： vuejs vue 前端
于 2019-06-11 15:11:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xp_xpxp/article/details/91438785
版权

vue 事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <style type="text/css">
        #div1 {
            height: 100px;
            background-color: red;
        }

        #div2 {
            height: 100px;
            background-color: green;
        }

        #div3 {
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>

<div id="app">
    <!--'.capture',启动事件的捕获模式,当内部的事件被触发,先执行外层的(相同)事件,在触发内部的(相同)事件-->
    <div @click.capture="divHandler" id="div1">

        <!--'.stop',阻止事件冒泡,即只执行当前这个元素的事件,不会触发外层的事件-->
        <!--<input type="button" value="点击" @click.stop="btnHandler" />-->

        <input type="button" value="点击" @click="btnHandler"/>

        <!--'.prevent',阻止事件的默认行为,即不执行元素原本的操作-->
        <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下,你就知道</a>
    </div>

    <!--'.self',点击哪个元素就触发哪个元素上对应的事件,(里层元素)不会冒泡,也不会捕获-->
    <div id="div2" @click.self="divHandler">
        <input type="button" value="点击" @click="btnHandler"/>
    </div>

    <div id="div3" @click.self="divHandler">
        <!-- 注意:如果'.self'事件定义在内部元素中,则不会阻止冒泡行为 -->
        <!--'.once',无论事件被触发多少次,始终只会执行一次-->
        <input type="button" value="点击" @click.once="btnHandler">
    </div>
</div>


<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnHandler() {
                console.log("btn 点击事件");
            },
            divHandler() {
                console.log("div 点击事件")
            },
            linkClick() {
                alert("触发连接的点击事件");
            }
        }
    })
</script>
</body>
</html>

v-model 数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model 双向绑定</title>

    <style type="text/css">
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body>

<div id="app">

    <!--当修改input中msg的属性值,vm会同步修改data中对应的属性,然后渲染到页面上,实现数据双向绑定-->
    <!--注意:'v-model'只能运用在表单元素中-->
    <input type="text" v-model="msg" />

    <p v-cloak>{{msg}}</p>
</div>


<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello Vue!'
        },
        methods: {

        }
    })
</script>
</body>
</html>

案例:简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习:简易计算器</title>
</head>
<body>

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

    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" v-model="n2"/>
    <input type="button" value="=" @click="calc"/>
    <input type="text" v-model="result"/>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
        },
        methods: {
            calc() {
                var opt = this.opt;
                var n1 = parseInt(this.n1);
                var n2 = parseInt(this.n2);

                switch (opt) {
                    case "+":
                        this.result = n1 + n2;
                        break;
                    case "-":
                        this.result = n1 - n2;
                        break;
                    case "*":
                        this.result = n1 * n2;
                        break;
                    case "/":
                        this.result = n1 / n2;
                        break;
                    default:
                        alert("无法计算!");
                        break;
                }
            }
        }
    })
</script>
</body>
</html>

vue通过属性绑定为元素设置class样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性绑定元素设置class样式</title>

    <style type="text/css">
        [v-cloak]{
            display: none;
        }
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- :class=['样式变量,xxx'],使用数组为标签绑定class类型的变量 -->
    <h1 v-cloak :class="['red','italic']">{{msg}}</h1>

    <!--:class绑定的样式中可以使用三目运算符-->
    <h1 v-cloak :class="['thin',flag?'active':'']">{{msg}}</h1>

    <!--:class绑定的样式中可以使用对象-->
    <h1 v-cloak :class="['red',{'italic':flag}]">{{msg}}</h1>

    <!--为标签的class属性绑定一个对象,注意:对象中的属性不需要使用''号-->
    <h1 v-cloak :class="classObj">{{msg}}</h1>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello vue!',
            flag:true,
            classObj:{red:true,italic:true,thin:true}
        },
        methods:{

        }
    })
</script>
</body>
</html>

通过属性绑定为元素设置style行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过属性绑定,为元素设置style样式</title>
</head>
<body>

<div id="app">
    <!--:style,使用对象为标签绑定css类型的属性-->
    <!--注意:对象的属性值为kv对象,如果k包含'-',那么该k必须使用''号-->
    <h1 :style="{color:'red','font-size':'48px'}">{{msg}}</h1>
    <h1 :style="styleObj1">{{msg}}</h1>

    <!--:style,使用数组为标签绑定多个css样式对象,如果多个对象中有相同的属性,那么后面的会覆盖前面的-->
    <h1 :style="[styleObj1,styleObj2]">{{msg}}</h1>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'hello vue!',
            styleObj1:{color:'red','font-size':'48px'},
            styleObj2:{color:'green','font-style':'italic'}
        }
    })
</script>
</body>
</html>

v-for数据遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-for</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">
    <!--v-for,遍历数组-->
    <p v-cloak>{{list[0]}}</p>
    <!--注意:key表示数组中的元素,i是元素索引-->
    <p v-cloak v-for="(key,i) in list">{{key}},{{i}}</p>

    <!--遍历数组对象-->
    <p v-cloak v-for="(obj,i) in listObj">{{obj.username}}</p>

    <!--:key,使用 v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，
   必须在使用v-for的同时，指定唯一的 字符串/数字 类型:key 值-->
    <!--注意:v-for循环的时候,key属性只能使用number/string类型的值-->
    <p v-cloak v-for="item in listObj" :key="item.id"></p>

    <!--遍历对象中的属性,注意这里的key是属性值,value是属性名,i是索引-->
    <p v-cloak v-for="(key,value,i) in obj">{{key}},{{value}},{{i}}</p>

    <!--遍历数字,从1开始-->
    <p v-cloak v-for="count in 10">{{count}}</p>
</div>


<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            list:[1,2,3,4,5,6,7,8,9],
            listObj:[
                {id:1,username:'aa'},
                {id:2,username:'bb'},
                {id:3,username:'ee'},
                {id:4,username:'ff'},
                {id:5,username:'gg'}
            ],
            obj:{
                id:1,
                name:'张三',
                age:25,
                gender:'男'
            }
        }
    })
</script>
</body>
</html>

v-if,v-show控制元素内容显示/隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,v-show</title>
</head>
<body>

<div id="app">
    <!--如果元素涉及到频繁的切换,最好不要使用使用v-if-->
    <!--控制内容的显示/隐藏,如果表达式为false,则会删除整个标签元素;每次都会重新删除或创建元素-->
    <p v-if="flag">v-if</p>

    <!--控制内容的显示/隐藏,如果表达式为false,则会在标签中添加一个隐藏css样式;每次不会重新进行DOM的删除和创建操作-->
    <p v-show="flag">v-show</p>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            flag:true
        }
    })
</script>
</body>
</html>

案例:品牌列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 品牌列表案例</title>
    
    <!--bootstrap css核心文件-->
    <link rel="stylesheet" href="js/boostrap/css/bootstrap.min.css">

    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

<div id="app">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" v-model="id">
            </label>

            <!--@keyup,绑定一个keyup事件,还可以指定监听哪个按键-->
            <label>
                name:
                <input type="text" class="form-control" v-model="name" @keyup.enter="add">
            </label>

            <button type="button" class="btn btn-primary" @click="add()">添&nbsp;加</button>

            <label>
                search:
                <input type="text" class="form-control" placeholder="name" v-model="keywords">
            </label>
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <!--v-for,遍历的列表数据可以从一个方法中获取,该方法的参数可以访问vue实例中的数据-->
        <tr v-for="car in search(keywords)" :key="car.id">
            <td v-text="car.id"></td>
            <td v-text="car.name"></td>
            <td v-cloak>{{car.ctime | dataFormat('')}}</td>
            <td>
                <a href="" @click.prevent="del(car.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<!--bootstrap js核心文件-->
<!--<script src="js/boostrap/js/bootstrap.min.js"></script>-->
<script type="text/javascript" charset="UTF-8">
    //定义全局过滤器,格式化时间
    Vue.filter('dataFormat',function (data,pattern) {
        //根据给定的时间字符串,得到一个特定的时间
        var dt=new Date(data);
        var y=dt.getFullYear();
        var m=dt.getMonth()+1;
        var d=dt.getDate();
        
        if (pattern.toLowerCase()==='yyyy-mm-dd'){
            return `${y}-${m}-${d}`;
        }else{
            var hh=dt.getHours();
            var mm=dt.getMinutes();
            var ss=dt.getSeconds();

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            //因为做了数据双向绑定,所以这两个属性要在这里面定义
            id: '',
            name: '',
            keywords: '',
            list: [
                {id: 1, name: '奔驰', ctime: new Date()},
                {id: 2, name: '宝马', ctime: new Date()},
                {id: 3, name: '奥迪', ctime: new Date()},
                {id: 4, name: '兰博', ctime: new Date()},
                {id: 5, name: '福特', ctime: new Date()}
            ]
        },
        methods: {
            add() {
                //从data上获取id和name属性值,由于做了数据双向绑定,所以这也是用户输入的值
                var id = this.id;
                var name = this.name;
                var ctime = new Date();

                console.log(id);

                if (id == null || id == '') {
                    alert("Id输入框的值不能为空!!");
                    return false;
                }

                if (name == null || name == '') {
                    alert("Name输入框的值不能为空!!");
                    return false;
                }

                //组织出一个对象
                var car = {id: id, name: name, ctime: ctime};

                //将对象添加到data的list集合中
                this.list.push(car);

                //清空输入框的值
                this.id = this.name = '';
            },
            del(id) {
                //根据id找到list对应的对象,删除他
                this.list.some((item, i) => {
                    if (item.id == id) {
                        //删除list中对应的元素
                        this.list.splice(i, 1);

                        //终止循环
                        return true;
                    }
                })
            },
            search(keywords) {
                //filter()是数组中的一个方法,首先会遍历数组,然后执行过滤操作
                var newList=this.list.filter(item=>{
                    //includes()是es6的方法
                    if (item.name.includes(keywords)){
                       return item;
                    }
                });

                return newList;
            }
        }
    })
</script>
</body>
</html>
一code当先
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 关于this的一些语法问题
半亩方塘
02-07 968
   问题内容：js 关于this的一些语法问题 原讨论链接：http://community.csdn.net/expert/topicview1.asp?id=5064915 所属论坛：JavaScript     审核组：WEB开发 提问者：hejunbin     解决者：BlueDestiny 感谢：BlueDestiny
Javascript理解this对象
angyangan9569的博客
02-25 334
this是函数运行时自动生成的一个内部对象，只能在函数内部使用，但总指向调用它的对象。 通过以下几个例子加深对this的理解。 （1）作为函数调用 var name = 'Jenny'; function person() { return this.name; } console.log(person()); //Jenny 上面这个例子在全局作用域中调用person()，此...
Vue3项目在系统中空白显示，或者提示报错解决办法
最新发布
weixin_47294233的博客
09-06 740
Vue3项目在XP系统中空白显示，或者提示报错解决办法
解决vue项目xp系统下的兼容性
小唐的博客
06-20 948
解决vue2医院项目在xp系统下遇到的各种页面兼容性问题
windowXP系统无法正常访问vue3网页
零食粉碎机的博客
02-03 1895
windowXP系统访问vue3网站
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue项目低版本浏览器XP/IE适配方案
m0_38135164的博客
02-24 442
二、创建文件：babel-config.js(放置src目录下)一、下载安装插件：babel-polyfill。
Vue学习笔记（1） 一开始的使用以及Vue实例的详解
XP and Altoria
01-11 1663
Vue一款轻量级的js框架，在此分享一下自己学习历程，Vue的学习成本比较低，相对于React以及Angular来说算是相当简单了的 首先是不使用npm安装的前提下，我们简单利用link直接使用Vue 在你的网页中添加如下的js 然后接下来我们就可以开始Vue的学习之路了 首先从Vue实例开始说起 我们现在的网页是这样的 Vue
Vue.js(一)
xp_xpxp的博客
05-29 383
简介 Vue.js是一套构建用户界面的渐进式框架,也可以用来构建数据驱动的 WEB 界面 Vue.js语法也可以用于手机APP开发,但是需要借助weex Vue.js只关注视图层,不仅易于上手,而且还便于与第三方库和既有项目整合 Vue.js主要负责MVC中的MVC这一层,主要工作就是和界面打交道,控制前端页面效果 MVC 和MVVM模式 MVC模式:后端的分层开发模式 MVVM模式:前...
C#窗体内嵌Chromium内核浏览器实战 (1)
程序员大阳
10-26 2954
背景 为一个大型集团客户开发一套系统，为了便于升级维护使用了B/S结构。 BUT，客户要求客户端能读写射频卡、操作打印机打印票据，还好，可以写个C# winform程序通过webbrowser控件内嵌网页，同时也支持JS和C#代码互相调用。操作硬件读写卡、打印的功能交给C#就是了。 BUT，客户电脑竟然还有少量的XP…顿时无语，虽然是XP比例少，奈何人家体量大，咱们也没法要求客户把XP系统都换了。...
vue跨域解决方案_Vue.js对WinXP系统对兼容性
weixin_39866867的博客
12-12 1313
Vue.js对WinXP系统对兼容性点击上方“技术支持联盟”，选择“置顶公众号”第一时间了解程序员大小事儿作者: varcyan 前端开发摘要：当前使用系统用户中，有一部分winXP系统，在系统升级或新系统开发中，使用一些新的技术或框架(如vue)时，需要兼顾这一部分用户。由于vue以及其他一些新型js框架，在更新换代过程中已经放弃支持IE8甚至不再支持IE9浏览器，因此我们考虑其他的浏...
VUE学习-环境搭建
ZNG_XP的博客
11-08 505
这两天对VUE的知识开始有了兴趣，所以就开始了新的一轮学习路线，写几篇博客记录一下
Vue.js(三)
xp_xpxp的博客
06-29 168
过滤器–filter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 过滤器</title> <style type="text/css"> [v-cloak]{ ...
Vue实例的生命周期
xp_xpxp的博客
07-06 197
1.什么是生命周期? 从vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期 如图 2.生命周期函数(生命周期钩子/生命周期事件) 2.1.vue实例创建阶段的函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
学习vue语言 不错的文档
09-15
本文档详细介绍了Vue.js这一流行的前端JavaScript框架。Vue.js是一个用于构建用户界面的渐进式框架，它强调易用性、灵活性和可维护性，适合开发单页应用（SPA）和复杂Web应用。 Vue.js概述部分简述了Vue的核心理念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值