Vue的指令和成员

目录

  • Vue的指令和成员

    • 指令

      • 表单
      • 斗篷
      • 条件
      • 循环
  • 成员
    • 计算成员
    • 监听成员

Vue的指令和成员

指令

表单

表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量",这种情况下绑定的变量所控制的就是表单元素的实际value值,我们可以用这种方法来实现实时同步一些input框的内容,以及单一复选框和多个复选框的设置,如下例

<body>
    <div id="app">
        <form action=""><!--这里我们定义的两个input框,一个textarea大文本框,其v-model都是绑定的同一个v1,这种情况下,我们只需要改变v1的值,三个框的值都会实时改变,而v-mode的值就是表单的value值,所以我们在input框里面输入的值就可以实时呈现出来-->
            <input type="text" v-model="v1">
            <input type="text" v-model="v1">
            <textarea name="" id="" cols="300" rows="100" v-model="v1"></textarea>
            <hr>

            <!--单一复选框-->
            <!---->
            <input type="checkbox" name="agree" v-model="v2">
            <!--这里的v2,只要给的值布尔值为真就为真,向后端发送的数据就是agree:true-->
            <hr>
            <!--多个复选框,多个复选框的v-model值要相同,-->
            男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
            女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
            ???:<input type="checkbox" name="hobbies" value="lala" v-model="v3">
            <p>{{ v3 }}</p>
            <hr>

            <!--单选框,type类型为radio-->
            中午吃啥：<br>
            肉肉:<input  name="food" type="radio" value="rourou" v-model="v4">
            菜菜:<input name="food" type="radio" value="caicai" v-model="v4">
            <p>{{ v4 }}</p>
            <hr>
            <button type="submit">提交</button>

        </form>
    </div>
</body>

<script>
    new Vue({
        el:'#app',
        data:{
            v1:'',  //v1的初值可以为空
            v2:true,//这里应该给的是布尔值,true或者false
            v3:['male','female'],//这里是一个比较有意思的用法,我们绑定v3的框有三个,value分别是'male','female'和'lala',这个数组里我们可以指定默认的value,即生成网页的时候数组里写的value对应的多选框会默认选中
            v4:'caicai',//这里的用法和上面的相似,也是生成时候的默认值,默认选中value值为'caicai'的单选框
        }
    })
</script>

斗篷

斗篷指令比较适用于一些比较大的项目中,因为通常情况下我们导入Vue的语句会放在body的下面,这样其实在网页渲染的时候,在上面还没有读取到Vue的时候里面的{{}}不会被解析,而是直接以{{}}的形式显示出来,当然这个时间非常的短暂,不过如果网页较大,或者网速较慢的情况下,会比较明显的看到这个问题,所以斗篷指令就是为了解决这个问题,方法也非常的简单,我们在需要提前解析的地方加入v-cloak,然后在style里面赋予display:none就可以了.

<head>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <div v-cloak>
        {{}}
        {{}}
    </div>
</body>

这样我们在打开网页的时候就不会出现双大括号没被渲染的那一个瞬间了.

条件

Vue中的条件指令不多,常用的其实就两个类,即v-if和v-show,其后面所应该添加的都应给是布尔值,两者展示出的效果几乎完全相同,但是内层含义有些许区别.

  • v-if="true|false",当其值为假时,页面上不渲染该标签,我们可以用此方法来隐藏标签中的信息
  • v-show="true|false",如果这个后面的值为false,我们在页面上也看不到该标签,但这并不代表该标签没有渲染,而是给这个属性所在的标签赋予了display:none的属性,所以虽然没有展示出来,但实际上是经过了渲染的.且存在于整个页面的结构中,只是因为这个属性所以隐藏了.

实例如下:

<body>
    <div id="app">
        <!--这里两者的显示效果是一样的,但是真正存在形式不太一样-->
        <p v-if="false">if指令</p>
        <p v-show="false">show指令</p>

        <!-- v-if其实就类似于我们之前所接触到的if,同样有elif,有else
        v-if
        v-else-if
        v-else
        使用的时候需要注意两点:
        1、上分支成立，下分支会被屏蔽
        2、else分支只要在所有上分支都为假时就会显示，不需要条件
        -->
        <p v-if="v1 === '1'">if分支</p>
        <p v-else-if="v1 === '2'">elif分支1</p>
        <p v-else-if="v1 === '3'">elif分支2</p>
        <p v-else>else分支</p>
        <hr>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '1'
        }
    })
</script>

循环

Vue中的循环也是我们非常熟悉的东西,就是for,只不过这里的是v-for,其基本的语法结构为

v-for="成员 in 容器"

这个容器可以是很多的东西,比如字符串,比如数组,字典,甚至可以是对象,下面我们一一举例:

<body>
    <div id="app">
        <!--1、字符串-->
        <p>
            <span v-for="v in title">{{ v }}</span>
        </p><!--只有一个v的话就是从字符串里每次取一个值,然后渲染-->

        <p>
            <span v-for="(v, i) in title">
                <span v-if="i != 0"> | </span>
                {{ v }}
            </span>
        </p><!--有两个参数,第一个v依然是从字符串里取出来的值,第二个参数是索引值,不仅字符串可以这样使用,数字,字典,对象都可以在最后加一个参数来取到其索引值-->

        <!--2、数组-->
        <div>
            <p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
        </div>

        <!--3、对象: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
        <div><!--只遍历value-->
            <p v-for="v in people">{{ v }}</p>
        </div>
        <div><!--同时遍历value和key-->
            <p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
        </div>
        <div><!--遍历value和key的同时加上索引值-->
            <p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
        </div>
        <br>

        <div><!--for循环的嵌套,即先把对象们从数组中取出来,然后对每个对象的value和key值进行遍历-->
            <div v-for="(stu, i) in stus">
                <hr v-if="i != 0">
                <p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
            </div>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '循环指令',
            arr: [1, 4, 2, 5, 3],
            people: {
                name: '兔子',
                color: '粉白',
                price: 6.66,
            },
            stus: [
                {
                    name: "Bob",
                    age: 18
                },
                {
                    name: "Tom",
                    age: 17
                },
                {
                    name: "Jerry",
                    age: 19
                }
            ]
        }
    })
</script>

成员

成员其实就是我们在定义new Vue({})时候里面的一些值,比如el实例成员,data数据成员,methods方法成员,computed计算成员,watch监听成员以及delimiters分隔符成员,下面我们着重介绍计算成员和监听成员

计算成员

计算成员的关键字为computed,添加方法和data相同,但使用的时候需要注意以下几点:

  1. computed中定义的是方法属性,和data相似,所以如果在computed中定义了一个值,不需要再data中重复定义,否则会报错
  2. computed中定义的方法属性一定要有返回值,否则正文中此方法属性就会呈现为none的形式
  3. computed中定义的方法属性只有在被渲染的时候才会触发,如果只是在computed中定义了,正文中并没有进行渲染,那么就不会触发这个方法属性
  4. computed中定义的方法属性中,如果出现了别的变量值,那么其内的所有变量值任意发生变化都会重新调用一次绑定的方法,重新更新一下方法属性的值

实例如下,这个实例实现的是两个input框,第三个button按钮里面会实时显示前两个框的和,如果前两个框有一个为空,button按钮显示为"结果"字符,而不是其和:

<body>
    <div id="app">
        <input type="text" v-model="v1">
        +
        <input type="text" v-model="v2">
        =
        <button>{{ res }}</button>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: '',
            // res: '结果',这里没必要重复定义,因为我们已经在computed里面定义过res这个方法属性
        },
        computed: {
            res () {
                console.log('该方法被调用了');
                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';//这个三元表达式的意思是,如果v1和v2框内都有值的情况下,res就会被返回这两者的数值和,一旦有一个框没有值,res被返回的就是"结果"这个字符串.+this.v1和+this.v2指的是取v1和v2的数值类型,而不是字符串
            }
        }
    })
</script>

监听成员

监听,顾名思义,就是我们可以在监听成员里面加入已有的方法属性,从而实时监听其状态,显示出来或者对其做判断,做操作等等.监听成员在添加的时候需要注意以下几点:

  1. watch只能给已有的属性设置监听方法,即如果上面的data或者computed里面都没有定义这个属性方法,watch是没有办法监听的
  2. watch监听的意义在于,监听的属性值一旦发生变化就会触发监听成员里面定义的方法,执行其逻辑,触发方式类似于js的change
  3. watch监听成员里面定义的方法不需要返回值,这一点和computed要区别开,computed的方法属性是一定要有返回值.

接下来我们实现实时拆分一个两字姓名的人的姓和名,分别显示在两个span框里面,实例如下:

<body>
    <div id="app">
        <p>
            姓名：<input type="text" v-model="full_name">
        </p>
        <p>
            姓：<span>{{ first_name }}</span>
        </p>
        <p>
            名：<span>{{ last_name }}</span>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
        watch: {//full_name是上文中已经定义过的属性,所以可以添加监听方法
            full_name() {//我们监听的方法是,当输入的姓名长度为2时,执行监听方法,以空格切割开姓名之后,取其第一个值为姓,第二个值为名,分别赋予first_name和last_name,这样是实现了实时拆分姓和名
                if (this.full_name.length === 2) {
                    k_v_arr = this.full_name.split('');
                    this.first_name = k_v_arr[0];
                    this.last_name = k_v_arr[1];
                }
            }
        }
    })
</script>

原文地址：https://www.cnblogs.com/Xu-PR/p/11844478.html

时间： 2024-08-30 16:19:36

Vue的指令和成员的相关文章

Vue一些指令和成员变量以及组件一点

表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单指令</title> </head> <body> <div id="app"> <form action=""> <!--属性指令:v-model=

vue之指令篇 ps简单的对比angular

这两天在开始vue的大型项目,发现和ng还是有许多不同,这里对比下两者的指令系统 难度系数:ng的指令难度大于vue:至少vue上暂时没发现@&=:require,compile,precompile,postcompile之类的小型地雷... 这篇文章只看表象:何为指令?这里借助ng的解释来解释vue,就是当你的项目中,需要一些dom操作,并且MVMM自带的事件指令感觉麻烦的时候,可以把一些dom操作封装到一个公共方法,这就是指令,大概用在vue上也可以说个70%: 写法,vue: Vue.d

vue的指令

我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new  Vue({ el: "#box", // element(元素) 当前作用域 data(){ return { //用return返回对象 msg: "122" } } }) 首先是 v-model双向绑定数据 <input type="text" v-model="msg"/>   {{msg}} <!--取数据--&

vue自定义指令(Directive中的clickoutside.js)的理解

.array p { counter-increment: longen; margin-left: 10px } .array p::before { content: counter(longen) "." } .alink { font-size: 16px; color: blue } 阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DO

vue 常用指令

vue常用指令: 1. v-model   一般用在表单元素   input-->  text  ---> v-model='msg' 2. 循环数组: <li v-for="(value,index) in arr"> {{value}}{{index}} </li> 3.循环json: <li v-for="(value,key) in json"> {{value}} {{key}} </li> 事件

vue自定义指令

什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊属性. 它可以写在DOM元素上,对html进行操作.常用的指令比如有:v-if,v-else,v-show,v-for等.这些都是官方直接给定的,另外Vue也允许注册自定义指令,有时这很有用. 自定义指令方法 自定义一个指令很简单,官网给出一个简单的例子,自定义一个聚焦指令v-focus: // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中

Vue常用指令

vue中常用v-表示指令,下面总结一下常用的指令有哪些: 插入文本:v-text 相当于元素的innerText属性,必须是双标签 插入HMTL:v-html 相当于元素的innerHTML属性 循环:v-for v-for的使用,除了item属性,还有一些其他辅助属性.假设你现在循环的对象名字为students: 如果students是数组,还有index属性,如v-for="(item,index) in students"; 如果students是对象,还有value,key属性

Vue.js指令

一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本概念 2.1.什么是Vue.js指令 指令是带有v-前缀的特殊属性:v-bind.v-bind:is.v-bind:key.v-cloak.v-else.v-else-if.v-for.v-html.v-if.v-model 2.2.Vue.js指令的用途 在表达式的值改变时,将某些行为应用到DOM

Vue基础指令

一 Vue框架简介 Vue是一个构建数据驱动的web界面的渐进式框架. 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件 1 <div id="app"> 2 <span>你的名字是{{name}}</span> 3 </div> 4 var app=new Vue({ 5 el: '#app', 6 data:{ 7 name:'wdb' 8 } 9 }) 二 Vue指令 Vue的指令directives很像我们所说的自