vue基础语法

最新推荐文章于 2023-08-17 21:59:26 发布
最新推荐文章于 2023-08-17 21:59:26 发布
阅读量737 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AYUKiss/article/details/105671005
版权

第一个vue实例

<body>
<div id="app"> {{message}}
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",    //el即element，该vue实例要渲染的页面元素
        data:{
            message:"张三"   //渲染页面需要的数据
        }
    });
</script>

v-on:click=“方法名” 简写：@click=“方法名”

v-on:事件名=“js片段或函数名”

methods {
定义的方法
}

<div id="app"> {{number}}
    <button @click="add">++</button>
    <button @click="del">--</button>
</div>
script>
    var app=new Vue({
        el: "#app",
        data:{
            number: 0
        },
        methods:{
            add: function () {
                this.number++;
            },
            del:function () {
                  this.number--;
    }
        }
    });
</script>

事件修饰符

  • .stop ：阻止事件冒泡到父元素
  • .prevent：阻止默认事件发生*
  • .capture：使用事件捕获模式
  • .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
  • .once：只执行一次
<body>
<div id="app">
    <form action="www.baidu.com">
        <input type="submit" value="按钮" @click.prevent="change">
    </form>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        methods: {
            change:function () {
                console.log("abc")
            }
        }
    });
</script>
  • 演示
    在这里插入图片描述

按钮事件

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<input @keyup.enter=“submit”>

全部的按键别名：

  • .enter*
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

  • .ctrl
  • .alt
  • .shift
<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

鼠标点击与键盘enter组合

<body>
<div id="app">
    <div>{{number}}</div>
    <button @keyup.13c="change" @click="change">按钮</button>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            number:0
        },
        methods: {
            change:function () {
                this.number++
            }
        }
    });
</script>

vue的生命周期

v-once最终指令，无法修改

<div v-once>{{number}}</div>

v-text和v-html

  • v-text
<body>
<div id="app">
    <div v-text="hellow"></div>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            hellow:"这是一段话<h3>这是标题</h3>"
        },
    });
</script>

在这里插入图片描述

  • v-html
在这里插入代码片<body>
<div id="app">
    <div v-html="hellow"></div>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            hellow:"这是一段话<h3>这是标题</h3>"
        },
    });
</script>

在这里插入图片描述

v-pre 不解析

<body>
<div id="app">
    <div v-pre>{{msg}}</div>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            msg:"这是一段话"
        },
    });
</script>

v-bind 动态绑定属性，简写 :

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

<div id="app">
    <!--可以是数据模型，可以是具有返回值的js代码块或者函数-->
    <div v-bind:title="title"></div>
    //简写
    <div :title="title"></div>
</div>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: "title",
        }
    })
</script>

绑定class属性

<style>
    .active{
        color: red;
    }
</style>
<body>
<div id="app">
    <div :class="{active: isActive}" >啊哈哈</div>
    <div :class="getchange()" >啊哈哈1</div>
    <button @click="change">按钮</button>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    var app=new Vue({
        el: "#app",
        data:{
            isActive:true,
        },
        methods: {
            change: function () {
                this.isActive = !this.isActive
            },
            getchange: function () {
                return {active: this.isActive}
            }
        }
    });
</script>

在这里插入图片描述

v-for遍历

官方推荐我们在使用v-for时给对应的组件或元素添加一个key属性，提高性能
有key时其实就是链表
在这里插入图片描述

v-for="item in items"
  • items：要遍历的数组，需要在vue的data中定义好。
  • item：迭代得到的数组元素的别名

数组角标

v-for="(item,index) in items"
  • items：要迭代的数组
  • item：迭代得到的数组元素别名
  • index：迭代到的当前元素索引，从0开始

遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
  • 1个参数时，得到的是对象的属性值
  • 2个参数时，第一个是属性值，第二个是属性名
  • 3个参数时，第三个是索引，从0开始
<div id="app">
    <ul>
        <li v-for="(value, key, index) in user">
            {{index + 1}}. {{key}} - {{value}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{name:'峰哥', gender:'男', age: 18}
        }
    })
</script>

演示
在这里插入图片描述

计算属性 computed

使用计算属性的原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次，提高性能

data:{
    birthday:1529032123201 // 毫秒值
}

我们在页面渲染，希望得到yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({
    el:"#app",
    data:{
        birthday:1429032123201 // 毫秒值
    },
    computed:{
        birth(){// 计算属性本质是一个方法，但是必须返回结果
            const d = new Date(this.birthday);
            return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
        }
    }
})
  • 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

页面使用：

    <div id="app">
       <h1>您的生日是：{{birth}} </h1>
    </div>

v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染
语法：

v-if="布尔表达式"

示例：

<div id="app">
    <button v-on:click="show = !show">点我呀</button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    </h1>
    <h1 v-show="show">
        看到我啦？！show
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
</script>

在这里插入图片描述
v-for结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。

修改v-for中的案例，添加v-if：

    <ul>
        <li v-for="(user, index) in users" v-if="user.gender == '女'">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        </li>
    </ul>

效果：
在这里插入图片描述

v-else

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app">
    <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
    <h1 v-if="random >= 0.75">
        看到我啦？！if
    </h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！if 0.5
    </h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！if 0.25
    </h1>
    <h1 v-else>
        看到我啦？！else
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    })
</script>

在这里插入图片描述

v-show

根据条件展示元素的选项是 v-show 指令。用法大致一样：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

示例：

    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

在这里插入图片描述

v-model双向绑定

v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

  • input
  • select
  • textarea
  • checkbox
  • radio
  • components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br/>
    <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox" v-model="language" value="Swift" />Swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

懒加载，转number类型，去除空格

在这里插入图片描述

watch

watch可以让我们监控一个值的变化。从而做出相应的反应。
示例：

<div id="app">
    <input type="text" v-model="message">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        },
        watch:{
            message(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
    })
</script>

效果：
在这里插入图片描述

樱花献佛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue基础语法01
qq_46705598的博客
08-12 142
vue基础语法插值文本html属性表达式指令核心指令参数动态参数修饰符简写过滤器全局过滤器局部过滤器计算属性监听属性 插值 文本 {{msg}} <h3>文本</h3> {{msg}} html 使用v-html指令用于输出html代码 <h3>html字符渲染</h3> <div v-html="htmlStr"></div> htmlStr:'<span style
vue中的事件加判断条件进行选择性点击
document_write的博客
08-23 6922
@click="(items.length>1)?choose(items):''"
vue 动态生成按钮，@click 绑定方法名称，handler.apply is not a function
新青年1号
08-21 7741
需求来源于一个管理系统的权限管控模块。 需求描述：进入页面，触发方法，从服务端获取当前用户在当前页面下的操作权限，生成对应的操作按钮。 正常情况，接到这种需求，都会想到使用子组件获取操作权限，v-for 遍历生成按钮，父组件调用，如下： 子组件 mybutton.vue <template> <div> <el-button v-for="item in buttonlist" :key="item.id" @click="item.methodName"&.
vue之@click绑定的函数，如何实现加不加括号都可执行
yummry的博客
11-10 5305
vue@click 事件原理
vue3 事件处理 @click
最新发布
一步一个脚印，踏实努力，向着目标前进
08-17 9749
在Vue 3中，事件处理可以通过@click指令来实现。@click指令用于监听元素的点击事件，并在触发时执行相应的处理函数。下面是一个简单的示例，展示了如何在Vue 3中处理点击事件：
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
从Vue基础语法入手
08-10
本教程将从Vue的基础语法开始，逐步深入，帮助你理解这个强大的工具在实际项目中的应用。 首先，我们从Vue的基本结构说起。一个基本的Vue实例包含`<template>`、`<script>`和`<style>`三个部分。`<template>`用于...
前端框架Vue基础语法笔记
01-20
Vue基础语法笔记 本笔记主要涵盖了Vue基础语法的知识点，包括创建Vue实例、数据绑定、事件绑定、循环和数据双向绑定、组件化等方面的内容。 一、创建Vue实例 在Vue中，创建一个实例需要使用Vue.createApp()方法，...
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
vue点击事件 根据条件判断是否可以点击
kk
03-05 9269
需求：根据特定条件，增加或者去掉click事件（例如：clickFlag == true时，添加click事件；clickFlag == false时，去掉click事件；） 解决方法： 方式一：在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 为真 </div> <div v-else> 为假 </div> 方...
js修改id的值_Vue.js 组件的三个 API：prop、event、slot
weixin_39900582的博客
12-03 197
组件的构成一个再复杂的组件，都是由三部分组成的：prop、event、slot，它们构成了 Vue.js 组件的 API。如果你开发的是一个通用组件，那一定要事先设计好这三部分，因为组件一旦发布，后面再修改 API 就很困难了，使用者都是希望不断新增功能，修复 bug，而不是经常变更接口。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。属性 pr...
vue+elementui新增/编辑/删除
CMDN123456的博客
03-05 3738
vue+elementui 调用接口的新增/编辑/删除
vue3实现多条件筛选时，联动acitve样式
Shivy_的博客
04-07 1185
vue3实现多条件筛选时，联动acitve样式
vue 自定义组件注册click事件
qq_36392571的博客
05-31 1313
click事件只有原生的组件才可以使用。 而自定义的组件，如想使用click事件，可使用.native事件修饰符。
Vue基础语法复习
lhrdlp的学习笔记
08-23 441
文章目录1.插值语法1.1 Mustache1.2 v-once1.3 v-html1.4 v-text1.5 v-pre1.6 v-cloak2.绑定属性2.1 1.插值语法 1.1 Mustache 如何将data中的文本数据，插入到HTML中呢？ 可以通过Mustache语法(也就是双大括号)。 Mustache: 胡子/胡须. 我们可以像下面这样来使用，并且数据是响应式的 1.2 v-once 但是，在某些情况下，我们可能不希望界面随意的跟随改变 这个时候，我们就可以使用一个Vue的指令 v-
Vue根据条件添加click事件
热门推荐
weixin_34138139的博客
12-02 1万+
需求：根据特定条件，增加或者去掉click事件（例如：clickFlag == true时，添加click事件；clickFlag == false时，去掉click事件；） 解决方法： 方式一：在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div...
动态拼接的click事件不能被触发
只在朝暮间的博客
06-14 7751
一.需求分析 1.jsp页面引用的.js插件中动态拼接HTML页面上的元素,class设置为change. 2.在jsp的本js文件中调用$(选择器).click(function(){..}) $(".change").click(function(){ var y=$(this).parents("form").find("h3").html(); var d
vue基本语法讲解.pdf
05-11
vue基本语法讲解.pdf

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值