精华内容
下载资源
问答
  • VUE指令

    2021-01-30 14:46:54
    VUE指令

    VUE指令:
    (1).【v-on 】指令,它用于监听 DOM 事件,:click为监听事件名(:click监听按钮点击事件)。
    (2).【v-model 】指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定。
    (3).【v-bind】主要用于属性绑定。(【:style】【:class】)
    (4).【v-if 】指令将根据表达式的值返回true或false。
    (5).【 v-else 】指令给 v-if 添加一个 “else” 块。
    (6).【v-else-if】 在 2.1.0 用作 v-if 的 else-if 块。
    (7).【v-html】指令用于输出 html 代码。将字符串解析为html代码。
    (8).【v-for】指令用于循环,需要以 i in set(set为一个集合)形式的特殊语法。

    展开全文
  • vue指令

    千次阅读 2019-05-27 09:05:15
    vue指令 指令:带有v-前缀的指令,代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。 v-text 作用:更新元素的textContent,若只更新部分文本内容需要使用{{ Mustache }}插值。 <span v-...

    本文参考官方文档

    vue指令

    指令:带有v-前缀的指令,代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

    v-text

    • 作用:更新元素的textContent,若只更新部分文本内容需要使用{{ Mustache }}插值。
    <span v-text="msg"></span>
    

    v-html

    • 作用:更新元素的innerHTML。
    • 注意:v-html不能用来复合局部模板,因为vue不是基于字符串的模板引擎。另外只对可信内容使用v-html,避免xss攻击带来重大危险。
    <span v-html="html"></span>
    

    v-show

    • 作用:根据指令的表达式值的真假,切换元素的display css属性。当条件变化时,会触发过渡效果。
    • 说明:v-show会让元素始终渲染并保留在DOM中,因为只是改变css属性display。
    <h1 v-show="ok">Hello!</h1>
    

    v-if

    • 作用:根据指令的表达式值的真假渲染元素。
    <h1 v-if="awesome">Vue is awesome!</h1>
    

    v-else

    • 作用:表示v-if的“else块”,不需要表达式,但必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
    <div v-if="Math.random() > 0.5">
    	Now you see me
    </div>
    <div v-else>
    	Now you don't
    </div>
    

    v-else-if

    • 作用:表示 v-if 的 “else if 块”。可以连续使用。必须紧跟在带 v-if 或者 v-else-if 的元素之后。
    	<div v-if="type === 'A'">
    		A
    	</div>
    	<div v-else-if="type === 'B'">
    		B
    	</div>
    	<div v-else-if="type === 'C'">
    		C
    	</div>
    	<div v-else>
    		not A/B/C
    	</div>
    

    v-for

    • 作用:
      基于源数据(该数据类型可以是Array | Object | number | string | Iterable),进行多次渲染元素或模板块。该指令的值必须使用特定的语法alias in expression,为当前遍历的元素提供别名。
    	<ul id="example">
    		<li v-for="item in items">
    			{{ item.id }}
    		</li>
    	</ul>
    	
    <script>
    		var app = new Vue({
    
    			el: '#example',
    			data: {
    				items: [
    					{ text: "foo"},
    					{ text: "bar"}
    				]
    			}
    		})
    	</script>
    

    上面结果:

    • foo
    • bar

    另外也可以为数组索引指定别名 (或者用于对象的键):

    	<div v-for="(item, index) in items"></div>
    	<div v-for="(val, key) in object"></div>
    

    v-for 默认行为试着不改变整体,而是替换元素。如果需要重新对元素进行排序,则需要使用 key 属性:

    	<div v-for="item in items" :key="item.id">
    		{{ item.id }}
    	</div>
    

    v-on

    • 缩写:@
    • 参数:event
    • 修饰符
      • .stop -调用event.stopPropagation()。
      • .prevent -调用event.preventDefault()。
      • .capture -添加事件监听器时使用capture模式。
      • .self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
      • .{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调。
      • .native -监听组件根元素的原生事件。
      • .once -只触发一次回调。
      • .left -只当点击鼠标左键时触发。
      • .right -只当点击鼠标右键时触发。
      • .middle -只当点击鼠标中键时触发。
      • .passive -以{ passive: true }模式添加侦听器。
    • 作用:绑定事件监听器。事件类型由参数指定。

    v-bind

    • 缩写: :

    • 修饰符

      • .prop -被用于绑定DOM属性.
      • .camel -.camel -将 kebab-case 特性名转换为 camelCase.
      • .sync -语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器 -
    • 作用:动态地绑定一个或多个特性,或一个组件prop到表达式。

    <!-- 绑定一个属性 -->
    <img v-bind:src="imageSrc">
    <!-- 缩写形式 -->
    <img :src="imageSrc">
    
    <!-- class绑定 -->
    <div :class=" { red: isRed } "></div>
    <div :class="[classA, classB]"></div>
    
    <!-- style绑定 -->
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="{ styleObjectA, styleObjectB }"></div>
    

    v-model

    • 修饰符:

      • .lazy -取代input监听change事件。
      • .number -输入字符串转为有效的数字。
      • .trim -输入首尾空格过滤。
    • 作用:在表单控件或组件上创建双向绑定。

    v-slot

    • 提供具名插槽或需要接收prop的插槽。
    展开全文
  • vue 指令

    2017-10-18 09:38:21
    相信很多人学习vue最先接触的是vue指令,Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的...

    文章是基于vue 2.0

    相信很多人学习vue最先接触的是vue指令,Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML属性。

    接下来分别介绍vue的一些常用指令:

    1. v-if指令
    2. v-show指令
    3. v-else指令
    4. v-for指令
    5. v-bind指令
    6. v-on指令
    1.v-if是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:v-if="expression"expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式。例如:
    代码:
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <p>Hello, Vue.js!</p>
                <p v-if="yes">Yes!</p>
                <p v-if="no">No!</p>
                <p v-if="age >= 25">Age: {{ age }}</p>
                <p v-if="name.indexOf('jack') >= 0">Name: {{ name }}</p>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            
            var vm = new Vue({
                el: '#app',
                data: {
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'keepfool'
                }
            })
        </script>
    </html>
    效果:


    2.v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

    代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <p>Hello, Vue.js!</p>
                <p v-show="yes">Yes!</p>
                <p v-show="no">No!</p>
                <p v-show="age >= 25">Age: {{ age }}</p>
                <p v-show="name.indexOf('jack') >= 0">Name: {{ name }}</p>
            </div>
        </body>
        <script src="js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    yes: true,
                    no: false,
                    age: 28,
                    name: 'keepfool'
                }
            })
        </script>
    </html>
    
    效果:


    3.可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须紧跟在v-if或v-else-if元素的后面——否则它不能被识别。

    代码:

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <p v-if="age >= 29">Age: {{ age }}</p>
        <p v-else>Name: {{ name }}</p>
        <p>---------------------分割线---------------------</p>
        <p v-if="name.indexOf('fool') < 0">Name: {{ name }}</p>
        <p v-else-if="name.indexOf('fool') == 0">Name: {{ name }}</p>
        <p v-else>Sex: {{ sex }}</p>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                age: 28,
                name: 'keepfool',
                sex: 'Male'
            }
        })
    </script>
    </html>
    效果:


    4.v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
    v-for="item in items"
    items是一个数组,item是当前被遍历的数组元素。

    代码:

    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item.fruit}}</li>
        </ul>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items:[
                    {fruit: "apple"},
                    {fruit: "banana"},
                    {fruit: "orange"}
                ]
            }
        })
    </script>
    </html>
    效果:


    5.v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class
    v-bind:argument="expression"
    代码:

    <ul class="pagination">
      <li v-for="n in pageCount">
         <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
      </li>
    </ul>
    6.v-on 用于监听指定元素的DOM事件,比如点击事件:<a v-on:click="doSomething">
    代码:
    <div id="example04">
            <input type="text" v-model="message">
            <button v-on:click="greet">Greet</button>
            <!-- v-on指令可以缩写为@符号-->
         <button @click="greet">Greet Again</button>
        </div>
    <script>
        var exampleData04={
            message:"Nice meeting U"
        };
        var vm2=new Vue({
            el:"#example04",
            data:exampleData04,
            methods:{
                greet:function(){
                    alert(this.message);
                }
             
            }
        })
    </script>

    展开全文
  • Vue 指令

    2018-07-11 15:24:38
    vue 指令介绍 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。1. v-bind 主要用于属性的绑定 例: 给元素添加一个title 属性&lt;div id="app1"&...

    vue 指令介绍

        指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。

    1. v-bind 主要用于属性的绑定

        例: 给元素添加一个title 属性

    <div id="app1">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
      </span>
    </div>
    var app1 = new Vue({
      el: '#app1',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })
    在这里,使用 v-bind 指令的意思是:“将 <span> 这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

       

    2. v-if 主要用于条件判断

        例: 控制切换一个元素是否显示

    <div id="app2">
      <p v-if="seen">现在你看到我了</p>
    </div>
    var app2 = new Vue({
      el: '#app2',
      data: {
        seen: true
      }
    })

    这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。


    3. v-for 指令可以循环遍历绑定数据

        例: 用绑定数组的数据来渲染一个项目列表

    <div id="app3">
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
    </div>
    var app4 = new Vue({
      el: '#app3',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })
     

    4. v-on 指令用于事件监听,通过它来调用在Vue实例中定义的方法

        例: 用事件监听调用在Vue实例中定义的方法

    <div id="app4">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">逆转消息</button>
    </div>
    var app4 = new Vue({
      el: '#app4',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })


    5. v-model 指令用于可以轻松的实现双向数据绑定

        例:实现表单输入和应用状态之间的双向绑定

    <div id="app5">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    var app5 = new Vue({
      el: '#app5',
      data: {
        message: 'Hello Vue!'
      }
    })





        例: 控制切换一个元素是否显示
    展开全文
  • vue代码补全vue 指令 Vue同位素 (Vue.Isotope) Vue directive for lists allowing ... 列表的Vue指令允许进行同位素布局过滤和排序。 动机 (Motivation) Create a directive that allows to use vue with isot...
  • Vue指令学习文档

    千次阅读 2021-03-09 17:24:13
    文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符:Vue指令之`v-model`...
  • vue指令实现防止连点

    2020-07-08 15:02:01
    应用vue指令,实现防止按钮连点,此文件内容只是局部指令,全局指令需要自己完成,但是核心功能是一样的
  • 第3章 Vue指令 课程目标vue 指令的定义v-if与v-show的区别使用数组表达式绑定 class 属性使用 v-model 绑定表单元素vue 示例实现的任务展示课程内容vue指令v-ifv-forv-showvue指令v-bindvue指令v-model综合案例 Vue...
  • vue指令概念

    2020-04-23 22:27:53
    vue 指令vue 当中一个非常重要的概念 学习 vue 指令需要了解哪些? 知道什么是指令 理解指令的用途 指令的书写规范 使用指令完成页面的交互效果 什么是指令 用官方话来说就是 html 的特殊属性 HTML的属性...
  • 13、Vue指令

    2021-03-15 11:18:57
    这次主要学习了Vue指令。 什么是Vue指令?有什么作用? Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将...
  • vue 水波纹指令 物质纹波效应 (Material Ripple Effect) ... 材质纹波效果作为Vue指令。 View demo 查看演示 Download Source 下载源 This directive it's meant to be used in any element in which ...
  • 第3章 Vue指令; 课程目标;课程内容; Vue指令;指令修饰符;指令详解;指令详解;v-for指令;v-for指令; !DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>hello,world</title> </head> <body> ...
  • const install = function(Vue) { Vue.directive('permission', permission) } if (window.Vue) { window['permission'] = permission Vue.use(install); // eslint-disable-line } permission.install = ...
  • vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content... Vue指令可动态模糊元素。 对于部分隐藏元素很有用,...
  • vue给元素添加指令 可拖动的vue指令 (draggable-vue-directive) Vue2 directive that handles drag & drop. 处理拖放的Vue2指令。 入门 (Getting Started) npm install draggable-vue-directive --save 典型...
  • 浅谈 Vue 指令

    千次阅读 2018-11-07 15:41:26
    谈到 Vue 指令,我们脑海里浮现的第一个疑问便是 指令 是什么: 指令是告诉计算机从事某一特殊运算的代码。如:数据传送指令、算术运算指令、位运算指令、程序流程控制指令、串操作指令、处理器控制指令。 那么 Vue ...
  • Vue.resize 检测HTML调整大小事件的vue指令
  • Vue指令用法1

    2019-06-02 10:09:43
    Vue指令用法1 先简单介绍Vue的特点: 1、是一套构建用户界面的框架,有提过双向数据绑定的功能,实现前后端的相互通信。 2、只关注视图层,也就是说,通过框架中所提供的指令,使得前端只需要关心数据的业务逻辑,...
  • Vue指令的详细介绍

    万次阅读 2019-05-11 22:54:39
    今天给朋友们介绍Vue指令的用处: v-bind     - -     可简写为 : 动态绑定属性值的时候使用 v-on     - -     可简写为 @ ...
  • vue 指令和模板

    千次阅读 2017-06-05 23:05:22
    一、vue指令vue指令有很多,比如: v-bind, v-click, v-style, v-class, v-once, v-if, v-else-if, v-model 等等。 这些指令我就不一一讲解用法了。具体用法可以去看vue 官网的APIhttps://cn.vuej
  • Vscode通过vue指令生成vue模板页面查找vue.json 查找vue.json 通过文件=》首选项=》用户代码片段 输入vue.json,找到vue.json 输入一下模板 { // Example: "Print to console": { "prefix": "vue", "body": ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,934
精华内容 10,773
关键字:

vue指令

vue 订阅