精华内容
下载资源
问答
  • Vue常用的指令及用法

    2020-07-22 08:34:35
    v-if 可以判断一个属性 长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if 如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。 <div v-...

    v-if :判断是否隐藏

    • v-if 可以判断一个属性 的长度 或 是否true 等等 来进行控制隐藏显示 可以结合 v-else 来使用 注意:使用v-else 必须要有v-if
    • 如果不需要频繁切换某节点使⽤v-if(初始渲染开销较⼩,切换开销⽐较⼤)。
    <div v-if="list.lenght > 0"> v-if </div>  
    
    <div v-else> v-else </div>
    

    v-for:数据循环

    • v-for循环普通数组
    //item代表是循环的值 ,  index代表是每一项 也可以说是下标 :key 代表标识 
     <div v-for="(item,index) in list" :key="index">
           <p>{{ item }}</p>
     </div>
    

    v-bind:class:绑定一个属性

    最简单的绑定(这里的active加不加单引号都可以,以下也一样都能渲染)

    :class="{ 'active': isActive }"
    

    判断是否绑定一个active

    :class="{'active':isActive==-1}"  
    或者
    :class="{'active':isActive==index}"
    

    v-model:实现数据双向绑定

    <input type="text" v-model="search">
    data(){
         search:''
    }
    

    运行结果:
    在这里插入图片描述

    v-show:判断隐藏显示

    <div  v-show="show">v-show</div>
     // true 显示   false 隐藏
     data () {
            return {
                show:false,
                
            }
        },
    

    这里重点说明一个v-if和v-show的区别:

    共同点:都是通过判断绑定数据的true/false来展示的

    不同点:v-if只有在判断为true的时候才会对数据进行渲染,如果为false代码删除。除非再次进行数据渲染,v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
        v-show是无论判断是什么都会先对数据进行渲染,只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下,改变数据的值可以使数据展示或隐藏

    展开全文
  • Vue自定义指令封装及用法

    千次阅读 2020-02-24 16:02:41
    vue的指令很多,例如v-if,v-for,v-model等等,当然尤大大也给我们提供了自定义属性这一 玩意儿,让我们也可自己定义指令,例如v-hello,v-fuck等等,那我们为什么需要自定义指令呢?那好,我就问你一句话,你在写...

    Vue自定义指令

    vue中的指令很多,例如v-if,v-for,v-model等等,当然尤大大也给我们提供了自定义属性这一 玩意儿,让我们也可自己定义指令,例如v-hello,v-fuck等等,那我们为什么需要自定义指令呢?那好,我就问你一句话,你在写项目当中有没有某一刻有想要操纵DOM 的冲动,但是vue很明确是不能直接操纵DOM的,那这时候就可以用到我们的自定义指令了。具体操作,如下所示:

    主要是通过Vue.directive来定义!

      <script>
            Vue.directive('hello',{
                inserted(){//这个名字是固定的
                    console.log("加油,中国!")
                }
            })
            var vm=new Vue({
                el:"#box"
            })
        </script>
    

    具体用法:

        <div id="box">
            <div v-hello>加油,武汉!</div>
        </div>
    

    当然了,我们的自定义指令也可以传参。具体用法,如下所示:

    其实道理一样,只是我们传递了el和bind两个参数。el是节点的意思,大家都知道,而bind是从哪儿来的呢?

      <script>
            Vue.directive('color',{
                inserted(el,bind){
                    console.log(bind)
                    el.style.background=bind.value
                }
            })
            var vm=new Vue({
                el:"#box"
            })
        </script>
    

    通过打印bind我们可以看到,它包含我们指令的所有信息

    在这里插入图片描述
    在使用过程中我们需要注意的就是要将传递的参数当做字符串来传,所以需要再加“ ”
    在这里插入图片描述
    接下来我们看一种情况
    在这里插入图片描述
    以我上面这种写法,我在控制台当中通过vm.mycolor:"red"来改变mycolor的值
    在这里插入图片描述
    然而视图并没有更新,那是因为指令也是有生命周期的,inserted:插入(只执行一次)
    所以要想达到上面的那种效果,我们要引进另一生命周期,update:更新阶段
    在这里插入图片描述
    这样,就达到了我们想要的效果了。
    在这里插入图片描述

    展开全文
  • Vue特性及指令用法

    2019-08-07 19:58:11
    1.了解vue MVP典型应用:安卓 MVC典型应用:java(MVC可以在view中直接使用model数据) MVVM典型应用:Vue MVVM: M:model 模型层 v:view 视图层 VM:view model(桥梁,V与M连接桥梁,也可以看作为控制器MVCC层,...

    1.了解vue

    MVP典型应用:安卓
    MVC典型应用:java(MVC可以在view中直接使用model的数据)
    MVVM典型应用:Vue

    MVVM:

    M:model 模型层

    v:view 视图层

    VM:view model(桥梁,V与M连接的桥梁,也可以看作为控制器MVC的C层,监听两者动态)

    框架的好处:

    1. 降低开发难度;
    2. 符合开发规范,更容易把控项目进度;
    3. 增强代码的复用性;

    MVC 思想:一种将数据层与视图层进行分离的设计思想

    MVVM思想:意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之相同

    MVP思想:MVP的全称为Model-View-Presenter,Model提供数据,View负责显示,Presenter负责逻辑的处理

    创建视图模型,(VM层,等同于Vue实例)

    建议:el:绑定的时候,用ID

    声明式渲染:只需要告诉程序想要什么效果,其他的都交给程序

    命令式渲染:之前的JS(命令程序去做什么,程序就按照命令一步步滴去做)

    Vue数据驱动(VM实时监听):

    即:视图的内容随着数据的改变而改变

    模板语法:{{}}响应式的展示(双大括号语法, 双大括号赋值大法)

    如果在表达式中写入过多的逻辑代码,那么违背了最初的设计思想;也就使代码看起来很复杂,难以维护

    Vue.js的核心:数据驱动和组件化

    Vue.js 指令:v-开头的特殊属性,给HTML标签添加更多的特殊功能。多个指令之间用空格隔开

    1.v-show:是用css的display属性

    eg:v-show=表达式;v-show=“bool”;

    元素一直存在只是被动态设置了display:none

    2.v-model:作用主要是用于表单数据的双向绑定

    v-model=变量

    v-model和复选框关联,勾选后,其值就会变成bool值

    v-model和单选框关联,勾选后,其值就会变成value值

    v-model和下拉框关联,勾选后,其值就会变成option的value值(v-model和select绑定)

    双向绑定的原理:数据劫持(拦截)结合发布订阅模式

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的;
    数据劫持:当我们访问或设置对象的属性的时候,都会触发Object.defineProperty()函数来拦截(劫持),然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

    发布者-订阅者模式:其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

    3.v-on指令简写:@事件名 eg @click=“fun()”

    作用:为HTML元素绑定事件监听

    v-on:click=“func()”

    注:函数定义在 methods 配置项中

    4.v-for指令

    v-for="(v,i) in arr"

    5.v-bind指令简写为 :class="bool?red:’ ’ "

    v-bind:href=“url”

    作用:绑定HTML的属性

    绑定多个属性(不能使用简写):
    <img v-bind=‘{src:myUrl, title: msg}’ />

    <li v-for="(v,i) in arr"> 
                        <!-- <p>{{v.srcm}}</p> -->
                        <!-- 注意v-bind:src='v.srcm',虽然v.srcm是变量但是v-bind会自动解析,所以不需要用模板语法 -->
        <div ><img v-bind:src='v.srcm'></div>
        <p class="myPos" >{{v.con}}</p>
    </li>
    

    6.v-if 指令

    v-if和v-show的效果基本一样

    区别在于:

    v-if直接对元素的dom进行添加和删除,有更高的切换消耗(安全性高);

    v-show有更高的初始化的渲染消耗;(对安全性无要求选择)

    7.v-else-if指令

    8.v-else指令(搭配v-if使用)语法:

    {{text}}

    9.v-text指令,简写{{}},一般不用

    10.v-html指令,用的较少,安全性较低

    语法:

    11.v-once指令,一次性插值(一旦插入,不能修改)

    语法:

    {{text}}
    todoList案例:

     <div id="box">
            <h2>任务列表</h2>
            <p>任务总数:<span>{{obj.length}}</span>还有:<span>{{surplus()}}</span>未完成 【<span class="finish" @click="finish()">完成</span>】</p>
            <ul>
                <li v-for="(v,i) in obj">
                    <input type="checkbox" v-model="v.colbool">
                    <span  v-if="v.style" @click="edit(v)" v-bind:class="v.colbool?'gray':''">{{v.task}}</span>
                    <input type="text" v-model="v.task" @blur="edit(v)" v-else>
                </li>
            </ul>
            <input type="text" v-model="newtitle"><button @click="add()" v-bind:disabled="btnbool">添加</button>
        </div>
        
    </body>
    </html>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
        <script>
            new Vue({
                el:"#box",
                data:{
                   obj:[
                       {task:"切图",style:true,colbool:false},
                       {task:"编写JS代码",style:true,colbool:false},
                       {task:"编写文档",style:true,colbool:false},
                       {task:"编辑项目日志",style:true,colbool:false}
                   ],
                   newtitle:'',
                    btnbool:true
                },
                methods:{
                    add(){
                        this.obj.push({task:this.newtitle,style:true,colbool:false})
                        this.newtitle=""
                    },
                    edit(v){
                        if(v.colbool==true){
                            return;
                        }
                        v.style=!v.style
                    },
                    surplus(){
                        let num=0;
                        this.obj.forEach(function(value,i){
                            // console.log(value,i)
                            if(value.colbool==false){
                                num++;
                            }
                        });
                        return num;
                    },
                    finish(){
                        var arr=this.obj;
                        this.obj=[];
                        // for(var i=0;i<arr.length;i++){
                        //     if(arr[i].colbool==false){
                        //         this.obj.push(arr[i])
                        //     }
                        // }
                        var that=this;
                        arr.forEach(function(value){
                            if(value.colbool==false){
                                //注意this 的指向问题
                                that.obj.push(value)
                            }
                        })
                    }
                },
                watch:{
                    newtitle(){
                        if(this.newtitle!=''){
                            this.btnbool=false 
                        }else{
                            this.btnbool=true
                        }
                    }
                }
            })
        </script>
    
    展开全文
  • 兄弟组件之间传值vuevue实例传 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...

    兄弟组件之间的传值vue

    用vue实例传

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>Document</title>
    	</head>
    	<body>
    		<div id="app">
    			<componenta></componenta>
    			<componentb></componentb>
    		</div>
    		<script src="../vue.js"></script>
    		<script>
    			var bus=new Vue();//新建一个实例
    			Vue.component('componenta', {
    				template: `
    				<div>
    					<h1>这是组件</h1>
    					<button @click="send">发送</button>
    				</div>
    		`,
    				data: function() {
    					return {
    						msg: "我是组件A的值,要传给B"
    					}
    				},
    				methods:{
    					send(){
    						bus.$emit('sendEvent',this.msg);
    					}
    				}
    			})
    			Vue.component('componentb',{
    				template:`
    					<div>
    						<h1>这是组件B</h1>
    						<p>{{txt}}</p>
    					</div>
    				
    				`,
    				data:function(){
    					return{
    						txt:""
    					}
    				},
    				mounted() {
    					/* var that=this;
    					bus.$on('sendEvent',function(msga){
    						that.txt=msga;
    					}) */
    					//方法二:箭头函数 this指向不会发生改变
    					bus.$on('sendEvent',(msga)=>{
    						this.txt=msga;
    					})//Es6
    				}
    			})
    			new Vue({
    				el: "#app"
    			})
    		</script>
    	</body>
    </html>
    
    

    Vue自定义指令

    1、自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。
    2、钩子函数:
    指令定义函数提供了几个钩子函数(可选):

    bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

    inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
    (来自百度搜索)
    update:第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值,之后被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。


    3、钩子函数的参数:(el, binding)

    el:指令所绑定的元素,可以用来直接操作 DOM 。(常用)

    binding:一个对象,包含以下属性

    name:指令名,不包含v-的前缀;

    value:指令的绑定值;例如:v-my-directive=“1+1”,value的值是2;

    以下有四个有案列

    1,用Vue自定义指令给input框被选中
    2,用Vue自定义指令加背景颜色
    3,用Vue自定义指令刷新随机改变背景颜色
    4,Vue.use的用法
    自定义指令的第二用处是用于集成第三方插件。用vue.use

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="app" v-chg>//绑定自定义插件
    			<input type="text" v-focus />
    			<p v-color>hahlhdkshaahd</p>
    		</div>
    		<script src="../vue.js"></script>
    		<script src="plugin.js"></script>
    		<script>
    			Vue.directive('focus',{
    				inserted(el){
    					el.focus();
    				}
    			})
    			Vue.directive('color',{
    				inserted(el){
    					var num=(Math.random()*1000000).toFixed(0);
    					el.style.background='#'+num;
    				}
    			})
    			Vue.use(myPlugin);//Vue.use的用法
    			new Vue({
    				el:"#app",
    			})
    		</script>
    	</body>
    </html>
    
    
    plugin.js代码
    var myPlugin={};
    myPlugin.install=function(){
    	Vue.directive('chg',{
    		inserted(el){
    			el.style="width:1600px;height:100px;background:#e6caff";
    		}
    	})
    }
    
    展开全文
  • v-show 指令通过改变元素 css 属性(display)来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中 v-show 指令及用法详解,需要朋友可以参考下
  • 模板语法 {{}} ... 对于全局window下方法Vue设置了白名单,只有在白名单下方法,模板才可以使用。 `白名单`: 'Infinity,undefined,NaN,isFinite,isNaN,'+'parseFloat,parseInt,decodeURI,decodeUR
  • vue.js常用指令及用法

    2021-04-12 10:05:15
    v-if指令可以完全根据表达式值在DOM中生成或移除一个元素。 如果v-if表达式赋值为false,那么对应元素就会从DOM中移除; 否则,对应元素一个克隆将被重新插入DOM中 <template> <div id="app"> &...
  • 如果数据项顺序被改变,Vue则不是移动DOM元素来匹配数据项顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过每个元素。    2.为了给Vue一个提示,以便它能跟踪每个节点身份,从而...
  • 经过一段时间的vue学习,一次文章做个汇总。 一, 1.v-text, v-html ,{{ }} 插值表达式,都可以将vue中data中数据显示到指定标签位置中, v-html会将含有html规范字符串,以此规范解析, v-html ,{{ }}会...
  • 语法:v-model: 使用时请注意: ... v-model 是vue中唯一支持双向绑定的指令 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp...
  • 下面列出了自定义指令的用法及带参数自定义指令的用法。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="../js/vue...
  •    1.v-if 和 v-show 作用都是切换界面上元素显示或隐藏    2. v-if 实现原理:通过动态创建或移除元素实现元素显示与隐藏    3. v-show 实现原理:通过动态切换元素display样式,来控制元素...
  • v-bind:是Vue中,提供的用于绑定属性的指令 1. 直接使用指令`v-bind` 2. 使用简化指令`:` 3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ', 这是追加的内容'"` 4.v-bind中,可以写合法的JS表达式 &...
  • VUE基本指令

    2021-04-09 11:15:50
    本文对Vue的基本指令做一个简单的理解 v-model v-bind v-html v-text v-if v-show v-for v-on:click v-model 用法 v-model 指令在表单 、 元素上创建双向数据绑定。它负责监听用户的输入事件 以更新数据。 ...
  • 不具名插槽 子组件: 这里是不具名插槽组件 在父组件中使用: 不具名插槽 作用域插槽: slot-scope使用(slot-scope绑定是子组件数据): 在组件模板中书写所需slot插槽,并将当前组件数据通过v-bind绑定在slot...
  • 1.如何进行事件绑定传参标准写法:简写:new Vue({el:"#app",data:{ ... },methods:{处理函数(形参){//this—>当前new Vue()对象//可用this.变量名方式访问data中变量,因为methods中方法,也是被打散后...
  • vue中,显示或隐藏元素一般有两种方法,分别是v-if、v-show指令。 二者实现方法略有不同,性能也有所不同,我们后面说。 v-if 该指令动态向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载过程,切换...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 161
精华内容 64
关键字:

vue的指令及用法

vue 订阅