Vue指令

最新推荐文章于 2022-06-29 09:43:48 发布
最新推荐文章于 2022-06-29 09:43:48 发布
阅读量140 收藏
点赞数
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45545764/article/details/118856294
版权

一、v-bind

v-bind用于绑定数据和元素属性
例如：绑定a标签的href属性
若不用v-bind 就只有用{{ }}形式

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});

二、判断循环v-if 和v-for

v-if

<div id="app">
    <h1 v-if="ok">true</h1>
    <h1 v-else>false</h1>
</div>
<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            ok:true
        }
    });
     </script>

v-for

<div id="app">
    <li v-for="item in items">
        {{item.msg}}}
    </li>
</div>
<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            items:[
                {msg:"niubi"},
                {msg:"keai"},
            ]
        }
    });
</script>

可以取下标

<li v-for="(item,index) in items">

三、时间 v-on

注意VUE中的方法是methods

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:"jsg"
        },
        methods:{
            //方法必须定义在vue的method中
            sayhi: function ()
            {
                alert(this.message)
            }
        }
    });
</script>

v-on：+事件
事件

<div id="app">
    <button v-on:click="sayhi">click me</button>
</div>

在这里插入图片描述

四、v-model 双向绑定

v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入

{{ test}}

获取input数据，然后去修改input中数据会发现

中数据随之改变

1.文本框

<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{msg:"134565",
        }
    });
</script>

<div id="app">
    请输入文本:<input type="text" v-model="msg">{{msg}}
</div>

2.多选框如何展示

<div id="app">
    男<input type="radio" name="sex" value="男" v-model="msg">
    女<input type="radio" name="sex" value="女" v-model="msg">
    <p>
        选取了谁:{{msg}}
    </p>
</div>
<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{msg:"",
        }
    });
</script>

多选框如何只能选一个：
设置同一个name，将value设置为不同的值即可

设置html radio 默认选中的方法：添加checked 属性，设置为 true，
v-model绑定的是目标的value

3.下拉框

<div id="app">
    <select v-model="msg">
        <option value="" disabled>----请选择----</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>value:{{msg}}</p>
</div>
<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{msg:"",
        }
    });
</script>

注意：v-model的表达式的初始值未能匹配任何选项 <select元素将会被渲染为“未选中”状态在ios中会报错
如何让第一行有在这里插入图片描述
添加即可

<option value="" disabled>----请选择----</option>

五、Vue.component组件

感觉组件有点难
props可以传值从vue接受值
组件自己不能直接接受

<!--view层-->
<div id="app">
    <lyj v-for="item in items" v-bind:qin="item"></lyj>
</div>
<!--1.导入Vue的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

<script>
    Vue.component("lyj",{
        props:['qin'],
        template:"<li>{{qin}}</li>"
    })
    var vm = new Vue({
        el:'#app',
        data:{
            items:["A","B","C"]
        }
    });
</script>

六、axios通信及mount方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    [v-clock]{
        display:none;
    }
</style>
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">click me</a>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data(){
            return{
                info:  {
                    name:null,
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted(){//钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>

七、computed 计算属性

我们的vue对象中有一个属性，使用缓存来 将不经常变化的属性的结果缓存，下一次可以不用重复，直接从内存中调取，节省系统的资源开销
注意事项：

  • methods computed不能重名，重名之后会有优先级问题，method优先级高 特性：
  • 作用于缓存中，和mybatis十分相似,一旦内部有属性变化就会立刻刷新
<div id="app" v-clock>
    Now:{ {getTime()} }
    Now2:{ {getTime2} }
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:'123'
        },
        methods:{
            getTime:function(){
                return Date.now();
            }
        },
        computed:{
            getTime2:function(){
                this.message;
                return Date.now();
            }
        }
    });
</script>

八、插槽slot

我的理解slot像是一种段落
使用slot后可以在子组件内显示插入的新标签
注意：在使用slot时要 声明是哪一个组件 slot=“to_title” 如这样

        <to_title slot="to_title" v-bind:title="title"></to_title>
        <to_items slot="to_items" v-for="item in todoItems" v-


<div id="app">
    <to_do>
        <to_title slot="to_title" v-bind:title="title"></to_title>
        <to_items slot="to_items" v-for="item in todoItems" v-bind:item="item">        </to_items>
    </to_do>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("to_do",{
        template: '<div>' +
            '<slot name="to_title"></slot>'+
            '<ul>' +
            '<slot name="to_items"></slot>'+
            '</ul>'+
            '</div>'
    });
    Vue.component("to_title",{
        props: ['title'],
        template: '<p>{{title}}</p>'
    });
    Vue.component("to_items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: '课程列表',
            todoItems: ['kuansheng说java','kuansheng说vue']
        }
    });
</script>

九. 自定义事件分发（重点）

由于在组件component里无法操作在vue里的元素
所以利用vue定义一个方法 绑定在slot组件里，组件在从前端slot里取操作
在这里插入图片描述

<div id="app">
    <to_do>
        <to_title slot="to_title" v-bind:title="title"></to_title>
        <to_items slot="to_items" v-for="item in todoItems" v-bind:item="item">        </to_items>
    </to_do>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("to_do",{
        template: '<div>' +
            '<slot name="to_title"></slot>'+
            '<ul>' +
            '<slot name="to_items"></slot>'+
            '</ul>'+
            '</div>'
    });
    Vue.component("to_title",{
        props: ['title'],
        template: '<p>{{title}}</p>'
    });
    Vue.component("to_items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: '课程列表',
            todoItems: ['kuansheng说java','kuansheng说vue']
        }
    });
</script>

详解：this.$emit()函数

this.$emit(“function”,param); //其中function为父组件定义函数，param为需要传递参数

程序员爱何
关注
专栏目录
Vue学习总结（十）——循环遍历 v-for指令
third_的博客
08-22 2274
1、v-for遍历数组 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 v-for的语法类似于JavaScript中的for循环。 格式如下： item in items的形式。 （1）在遍历的过程中，没有使用索引值，下标值。语法格式：v-for="item in items" （2）如果在遍历的过程中，我们需要拿到索引值。语法格式：(item, index) in items <!DOCTYPE html> <html lang="en"> <.
VUE初学--列表渲染v-for
qq_42970981的博客
11-19 832
列表渲染 v-for v-for 指令基于一个数组来渲染一个列表，需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法，itemList 是元数据素组， item 是被迭代的数组元素的 别名 注：我们可以用 of 替代 in 作为分隔符，它更接近 JavaScript 迭代器的语法 <div id...
Vue中v-for循环
m0_64026548的博客
05-10 1万+
v-for循环遍历数据 永远不要把v-if和v-for同时用在同一个元素上。风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81 1.v-for遍历普通数组 in...
6、v-for列表渲染
weixin_46841213的博客
04-02 1766
v-for列表渲染1、v-for介绍2、v-for参数index3、of 替代 in 作为分隔符4、v-for遍历对象5、v-for的key属性6、在 v-for 里使用值范围 1、v-for介绍 v-for：基于一个数据来渲染一个列表。我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <div id="app"> <ul&
对于v-for中item in items中的理解
zhangjianshanshan的博客
01-24 2万+
困扰已久的问题是什么呢？这里我需要说的是其实就是对于v-for的理解 其实对于v-for也没有什么必要去理解，因为就是一个单纯的循环而已。对于这个循环，里面的问题以及他的内部属性是比较难理解的。 写个例子 这里我从官网上拿到的一个demo,这里你需要记住的是。对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这...
Vue 指令实现按钮级别权限管理功能
10-17
Vue指令实现按钮级别权限管理功能是一个涉及到前端Vue框架的权限控制技术。在Web开发中，用户权限管理是不可或缺的一部分，它确保了用户界面元素只向符合特定权限条件的用户显示。本文介绍的实现方法，通过Vue指令这...
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
ppt课件-第3章 Vue指令.zip
03-22
在这个“第3章 Vue指令”的PPT课件中，我们可以期待深入学习Vue指令的各个方面。 1. **Vue指令概述**：Vue指令是Vue.js中用于操纵视图的特殊属性，以响应数据模型的变化。它们以`v-`开头，如`v-if`, `v-for`, `v-...
vue指令只能输入正数并且只能输入一个小数点的方法
08-27
本文介绍了一种使用Vue指令来限制只能输入正数，并且确保只有一个小数点的方法。 首先，我们需要创建一个Vue指令，通过定义一个名为"numbers"的指令，并在其中编写逻辑来控制输入。具体步骤如下： 1. 在Vue的实例...
vue-resize-text：vue指令，可根据元素宽度自动调整字体大小
02-05
Vue指令可根据元素宽度自动调整字体大小。 它使字体大小在灵活或响应式布局上具有灵活性。 ：调整浏览器视口的大小以查看实际效果 安装 通过NPM安装 $ npm install vue-resize-text --save 通过CDN安装 < ...
#vue# 【十五】v-for的两种常见用法
ZHENGCHUNJUN的博客
07-14 962
#Vue# v-for的两种常见用法 v-for的两种情况 第一种情况，纯循环 v-for="item in 数字" //代表加上这个v-for的盒子或者标签，复制出相同的数 示例： <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="item in 4" :key="item"> <h3>{{ item }}</h3> </
#关于用好vue中的v-for循环的方法总结
老衲的少女心i~
08-04 4514
首先，我们来介绍一下，v-for官方文档上的基本用法 官网上：v-for的基本用法 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名： <div v-for="item in items"> {{ item.text }} </div> 另外也可以为数组索引指定别名 (或者用于对象的键)： <div v-for="(item, index) in items"></div> &
vue的循环遍历(v-for)
热门推荐
韩旭不会敲代码吧的博客
08-01 3万+
1.循环遍历 1.循环遍历: vue的循环遍历用v-for，语法类似于js中的for循环 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 2.v-for使用格式： 格式为：v-for = "item in items" (遍历items中的数据) 2.v-for遍历数组 1.v-for遍历数组 用v-for指令基于一个数组来渲染一个列表。 v-for 指令使用item in items形式的语法， 其中items是源
Vue中使用v-for警告：呈现的组件列表应该有显式的键值！
任她雨雪风晴
01-18 2952
在vue中使用v-for渲染数据初始代码： &lt;divider v-for="item in list"&gt;{{item.name}}&lt;/divider&gt; 遇到警告： (Emitted value instead of an instance of Error) &lt;divider v-for="item in list"&gt;: component lists...
vue基础之v-for
u014265398的博客
10-11 395
文章目录前言一.v-for指令1. 作用：可以用来遍历数组/对象二.实例总结 前言 学习vue基础之v-for指令 提示：以下是本篇文章正文内容，下面案例可供参考 一.v-for指令 1. 作用：可以用来遍历数组/对象 遍历数组 1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组 1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐ 遍历对象 2.1 使
VUE指令(3)——v-for
小生不才的博客
11-01 3832
遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现 1.遍历数组 语法：v-for=“item in items” items：要遍历的数组，需要在 vue 的 data 中定义好 item：迭代得到的当前正在遍历的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
Vue内置指令——v-for
沐小侠
06-29 952
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，item 则是被迭代的数组元素的别名。 当Vue用 v-for 正在更新已渲染过的元素列表时，它默认使用“就地复用”策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的改变，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 。
vue的基本使用
weixin_53125457的博客
04-09 156
vue 渐进式JavaScript 框架 vue 的挂载点 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。 通过 el 属性 设置挂载点 const app = new Vue({ // #app 对应的是页面中的div#app el:'#app' }) 通过显示调用 $mount() 方法 const app = new Vue({ // #app 对应的是页
Vue指令 v-for遍历、下拉列表、单选框、复选框
hangnan315的博客
06-22 8408
4 、v-for遍历 4.1 遍历数组中的对象 格式：v-for="item in list" 里面也可以返回下标 格式：v-for="（item.index） in list" item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致 <li v-for='item in list'> {{item.id}}---{{item.name}}---{{item.age}} </li> let vue = n
vue指令和用法
最新发布
05-30
以下是常见的Vue指令及其用法： 1. v-bind: 绑定数据到DOM元素的属性上，例如绑定src属性、href属性等。 2. v-if: 根据条件表达式来控制DOM元素的显示与隐藏。 3. v-for: 遍历数组或对象，生成相应的DOM元素。 4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值