精华内容
下载资源
问答
  • 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:更新阶段
    在这里插入图片描述
    这样,就达到了我们想要的效果了。
    在这里插入图片描述

    展开全文
  • v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏。这篇文章主要介绍了Vue.js 中的 v-show 指令及用法详解,需要的朋友可以参考下
  • Vue特性及指令用法

    2019-08-07 19:58:11
    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>
    
    展开全文
  • - 模板中的变量和函数必须是实例中的属性或者方法 - 对于js全局函数,有些可以使用,有些不可以,即(白名单): 对于全局window下的方法Vue设置了白名单,只有在白名单下的方法,模板才可以使用。 `白名单`: ...

    模板语法 {{}}

    {{}}
    作用:在视图中渲染数据
    注意:
     - 模板中是js环境(必须放表达式或值),不会去放语句。
     - 模板中的变量和函数必须是实例中的属性或者方法
     - 对于js全局函数,有些可以使用,有些不可以,即(白名单):
     对于全局window下的方法Vue设置了白名单,只有在白名单下的方法,模板才可以使用。
     `白名单`'Infinity,undefined,NaN,isFinite,isNaN,'+'parseFloat,parseInt,decodeURI,decodeURIComponent
     ,encodeURI,encodeURIComponent,'+'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,
     Set,JSON,Intl,' +'require'(摘自官网)
     - if结构不能用,if-else也不能
     if可以用逻辑运算符代替,即(&&||),这里涉及到短路运算(不懂的小伙伴可以私聊哦)
     if-else可以用三目运算符,即	a>b?c:d
    

    指令

    作用:扩展了普通html属性的功能(其用法跟自定义属性相同)
    语法:v-指令名="值"
    
    具体常用的Vue指令有:
    + v-model
    将表单控件的value属性与Vue中的数据进行`双向绑定`
    + v-text
    将元素的文本内容与一个Vue的数据进行绑定
    这里需要注意的是:{{}}模板引擎和v-text都不会渲染富文本数据
    + v-html
    同v-text,但v-html会渲染富文本数据
    + v-bind
    将一个普通的任意标签的属性(可以是自定义属性)的值与Vue的一个数据进行绑定,可以简写成 :属性
    + v-on
    将Vue元素的事件与Vue的方法进行绑定,可以简写成 @事件
    绑定方法为:
    
    <button @click="fn">按钮</button>
    new Vue({
      methods:{
        fn(e){
          // 这种绑定方式 fn就是事件函数,第一个参数就是事件对象
        }
      }
    })
    <button @click="fn()">按钮</button>
    // 需要传参的时候
    new Vue({
      methods:{
        fn(){
          // 这种绑定方式 fn是普通调用,不再是事件函数,如果需要事件对象则手动传入$event,
          // $event是Vue给我们提供的,就是时间对象,$event 挂载到Vue.prototype上的
        }
      }
    })
    方法中改变数据
    this.数据 = 值
    eg:
     {
       data:{
         isShow:true
       },
       methods:{
         fn(){
           this.isShow = !this.isShow
         }
       }
     }
     另外,Vue还给我们提供了事件修饰符:
     .stop	阻止事件冒泡
     .prevent	阻止默认事件
     .capture	事件捕获阶段提前触发
     .self	只能自己触发,其后代元素无法触发
     .once	事件只触发一次
    

    总结

    以上就是常见指令,即
    <元素 v-指令=“xxx”>
    指令的值需要写在引号中,且:
    1.为js环境
    2.里面可以写表达式,不能用语句
    3.全局函数中只能使用白名单中的

    即相当于模板中的语法,但v-model有点特殊,小伙伴们可以摸索一下。

    展开全文
  • vue.js常用指令及用法

    2021-04-12 10:05:15
    v-if指令可以完全根据表达式值在DOM生成或移除一个元素。 如果v-if表达式赋值为false,那么对应元素就会从DOM移除; 否则,对应元素一个克隆将被重新插入DOM <template> <div id="app"> &...

    v-if

    v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。

    如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;

    否则,对应元素的一个克隆将被重新插入DOM中

    <template>
        <div id="app">
            <h1>Title</h1>
            <p>paragraph 1</p>
            <p>paragraph 2</p>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                greeting: true
            }
        })
    </script>
    

    v-show

    v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素被隐藏。查看DOM时,会发现元素上多了一个内联样式style=“display:none”。

    <template>
        <div id="app">
            <h1>Title</h1>
            <p v-show="ok">我是对的</p>
            <p v-show="no">我是错的</p>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                ok: true,
                no: false
            }
        })
    </script>
    

    v-model

    v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。

    <div id="example">
        <form>
            姓名:
            <input type="text" v-model="data.name" placeholder="姓名"/>
            <br />
            性别:
            <input type="radio" id="one" value="One" v-model="data.sex"/>
            <label for="man"></label>
            <input type="radio" id="two" value="Two" v-model="data.sex"/>
            <label for="male"></label>
            <br />
            <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
            <label for="jack">阅读</label>
            <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
            <label for="john">游泳</label>
            <input type="checkbox" id="move" value="game" v-model="data.interest"/>
            <label for="move">游戏</label>
            <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
            <label for="mike">唱歌</label>
            <br />
            身份:
            <select v-model="data.identity">
                <option value="teacher" selected>教师</option>
                <option value="doctor">医生</option>
                <option value="lawyer">律师</option>
            </select>         
        </form>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#example',
            data: {
                data:{
                   name:'',
                   sex:'',
                   interest:[],
                   identity:''
                }
            }
        })
    </script>
    

    v-for

    <template>
        <div id="app">
            <h1>Title</h1>
            <ul>
                <li v-for="item in items" class="item-{{$index}}">
                    {{$index}} - {{parentMessess}} - {{item.msg}}
                </li>
            </ul>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                : '前端开发基础技术',
                items:{
                    {msg: 'html'}{msg: 'css'},
                    {msg: ‘javascript'}
                }
            }
        })
    </script>
    

    v-text

    v-text 指令可以更新元素的textContent.

    <span v-text="msg"></span> <br/>
    <span>{{msg}}</span>
    

    v-html

    v-html指令更新元素的innerHTML 能解析html标签

    <template>
        <div id="app">
            <h1>Title</h1>
            <p v-html="msg"></p>
            <p>{{msg}}</p>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg:'<p>效果一样</p>'
            }
        })
    </script>
    

    v-bind

    v-bind指令用于响应更新HTML特性,将一个或者多个attribute,或者一个组件prop动态绑定到表达式简写为:。

    <template>
        <div id="app">
            <h1>Title</h1>
            <div :class="[classA,{classB:isB,classC:isC}]></div>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                classA: 'A',
                isB: false,
                isC: true
            }
        })
    </script>
    

    v-on

    v-on指令用于绑定事件监听器。事件类型由参数指定。

    如果访问原始DOM事件,可以使用$event传入方法 ,简写为@

    <template>
        <div id="app">
            <h1>Title</h1>
            <p> {{}} </p>
            <button v-on:click="doThis">doThis</button>
        </div>
    </template>
     
     
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: 'hello world',
            },
            methods: {
                doThis: function(){
                    this.msg = 'hello world change !!!'
                }
            }
        })
    </script>
    

    v-cloak

    解决差值表达式闪烁的问题

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <style>
            [v-cloak]{
                display: none;
            }
    </style>
    </head>
     
    <body>
       
        <div id="app" v-cloak>{{msg}}</div>
     
        <script>
                new Vue({
                    el: '#app',
                    data: {
                        msg: '欢迎Vue!'
                    }
                })
            </script>
    </body>
     
    </html>
    

    v-pre

    跨过当前的标签不解析

    <div id="app">
       <span v-pre>{{msg}} 这句不会编译</span>
     </div>
     <script>
       var app =new Vue({
         el:'#app',
         msg:'this is a message'
       });
     </script>
    
    展开全文
  • 语法:v-model: 使用时请注意: ... v-model 是vue中唯一支持双向绑定的指令 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp...
  • 不具名插槽 子组件: 这里是不具名插槽组件 在父组件使用: 不具名插槽 作用域插槽: slot-scope使用(slot-scope绑定是子组件数据): 在组件模板书写所需slot插槽,并将当前组件数据通过v-bind绑定在slot...
  • 1.v-text, v-html ,{{ }} 插值表达式,都可以将vue中data中的数据显示到指定的标签位置中, v-html会将含有html规范的字符串,以此规范解析, v-html ,{{ }}会将数据原样解析 2.v-bind 属性绑定,可简写为 : :...
  • 问题一:请说出vue几种常用的指令v-if:根据表达式的值的真假条件渲染元素。在切换时元素它的数据绑定 / 组件被销毁并重建。v-show:根据表达式之真假值,切换元素的 display CSS 属性。v-for:循环指令,基于一个...
  • v-cloak 作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }一起用时,这个指令可以隐藏未编译 Mustache 标签直到实例准备完毕。官方API <div ...
  • v-bind:是Vue中,提供的用于绑定属性的指令 1. 直接使用指令`v-bind` 2. 使用简化指令`:` 3. 在绑定的时候,拼接绑定内容:`:title="btnTitle + ', 这是追加的内容'"` 4.v-bind中,可以写合法的JS表达式 &...
  • 我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上。 html: <input type=text v-model=...
  • 1.如何进行事件绑定传参标准写法:简写:new Vue({el:"#app",data:{ ... },methods:{处理函数(形参){//this—>当前new Vue()对象//可用this.变量名方式访问data中的变量,因为methods中的方法,也是被打散后...
  • 人们所常见到亚克力产品系由亚克力粒料、板材或树脂等原材料经由各种不同加工方法,并配合各种不同材质功能之零配件加以组装而成之亚克力制品。与玻璃相比,亚克力出色透光率和质轻韧强特点,让它非常适合...
  • vue中,显示或隐藏元素一般有两种方法,分别是v-if、v-show指令。 二者实现方法略有不同,性能也有所不同,我们后面说。 v-if 该指令动态向DOM树内添加或者删除DOM元素,切换有一个局部编译/卸载过程,切换...
  • Vue 有 v-html 这个便利的指令,可以让我们直接输出 HTML,但它有个缺点。 Vue 官网这样解释这个「指令」 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令: &...
  • v-if的用法:根据表达式真假条件来选择插入/移除元素。在切换时元素数据绑定/组件都是属于被销毁并重建。 &lt;div id="app"&gt; &lt;p v-if="show"&gt;显示&...
  • v-bind基本用法及语法糖,主要用于动态更新HTML 元素属性,接下来简单回顾下。 v-bind动态属性:常用于动态绑定HTML元素属性,例如id、class、href、src等属性。改 变任一方数据后都会实时更新。 对象语法格式 ...
  • Index.html文件中的写法: &lt;div id=”app”&gt; &lt;div v-if=”role == ‘admin’|| role= ‘super-admin’”&gt;//在此处要注意这个or判断两边,都需要role='变量' 你好管理员 &lt;/div...
  • 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过...
  • vue修饰符总结积累

    2018-12-11 16:01:59
    连接修饰符名称来调用修饰符,下面是对vue中的修饰符的总结积累: 一、v-model的修饰符 v-model是用于在表单表单元素上创建双向数据绑定的指令。在 &amp;amp;lt;input&amp;amp;gt;和 &amp;amp;lt;...
  • 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过...
  • 在前期博文《Vue进阶(幺贰柒):Vue插槽》中主要讲解了Vue中插槽基础用法,此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽与slot、slot-scope的用法区别。 demo 不具名插槽 <body> <div ...
  • 在这里 由浅入深: .sync修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近.sync的世界,深入理解后会发现,其实也就...在 Vue 中的指令有个统一好认的格式,就是以v-开头的就是指令,如: &l...
  • vue指令中v-if与v-showv-if与v-else的用法和区别 vue指令v-if&v-show 在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏效果 基本语法 <标签 v-if="true/false"></...
  • 1.v-model 会忽略所有表单元素 value、checked、selected 特性初始值而总是将 Vue 实例数据作为数据来源。你应该通过 JavaScript 在组件 data 选项声明初始值。 2.对于需要使用输入法 (如中文、日文、韩文...
  • Vue.js_22_v-show 指令

    2020-04-17 11:47:29
    v-show 的用法和 v-if 非常相似,也用于决定一个元素是否渲染。 二、v-if 和 v-show 对比 v-if 和 v-show 都可以决定一个元素是否渲染,那么开发我们如何选择呢? v-if 当条件为 false 时,压根...

空空如也

空空如也

1 2 3
收藏数 56
精华内容 22
关键字:

vue中的指令及用法

vue 订阅