精华内容
下载资源
问答
  • 1. 文本插值:{{ }} Mustache 1 <div id="app"> 2 {{ message }} 3 </div> 2. DOM属性绑定:v-bind 1 <div id="app-2">...3 鼠标悬停几秒钟查看此处动态绑定提...

    1. 文本插值:{{ }} Mustache

    1 <div id="app">
    2 {{ message }}
    3 </div>

    2. DOM属性绑定: v-bind

    1 <div id="app-2">
    2 <span v-bind:title="message">
    3 鼠标悬停几秒钟查看此处动态绑定的提示信息!
    4 </span>
    5 </div>

    3. 指令绑定一个事件监听器:v-on 

    1 <div id="app-5">
    2   <p>{{ message }}</p>
    3   <button v-on:click="reverseMessage">逆转消息</button>
    4 </div>

    4. 实现表单输入和应用状态之间的双向绑定:v-model

    1 <div id="app-6">
    2   <p>{{ message }}</p>
    3   <input v-model="message">
    4 </div>

    5. 控制切换一个元素的显示:v-if 和 v-else

    1 <div id="app-3">
    2   <p v-if="seen">现在你看到我了</p>
    3 </div>

    6. 列表渲染:v-for

    1 <div id="app-4">
    2   <ol>
    3     <li v-for="todo in todos">
    4       {{ todo.text }}
    5     </li>
    6   </ol>
    7 </div>
     1 var app4 = new Vue({
     2   el: '#app-4',
     3   data: {
     4     todos: [
     5       { text: '学习 JavaScript' },
     6       { text: '学习 Vue' },
     7       { text: '整个牛项目' }
     8     ]
     9   }
    10 })

    用 v-for 把一个数组对应为一组元素

    在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

    1 <ul id="example-2">
    2   <li v-for="(item, index) in items">
    3     {{ parentMessage }} - {{ index }} - {{ item.message }}
    4   </li>
    5 </ul>

    一个对象的 v-for

    也可以用 v-for 通过一个对象的属性来迭代。比如对象里的属性值value

    1 <ul id="v-for-object" class="demo">
    2   <li v-for="value in object">
    3     {{ value }}
    4   </li>
    5 </ul>

    还可以传入第二个参数key 和第三个参数 index,顺序不能乱,否则结果也会乱

    1 <div v-for="(value, key, index) in object">
    2   {{ index }}. {{ key }}: {{ value }}
    3 </div>
     1 new Vue({
     2   el: '#v-for-object',
     3   data: {
     4     object: {
     5       firstName: 'John',
     6       lastName: 'Doe',
     7       age: 30
     8     }
     9   }
    10 })

     

    结果:

    0. firstName: John
    1. lastName: Doe
    2. age: 30
     
    为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):
    1 <div v-for="item in items" :key="item.id">
    2   <!-- 内容 -->
    3 </div>

    建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

    7. 根据条件展示元素:v-show

    1 <h1 v-show="ok">Hello!</h1>

    带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

    注意,v-show 不支持 <template> 语法,也不支持 v-else

    8. v-if vs v-show

    v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

    9.v-if 与 v-for 一起使用

    当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

    转载于:https://www.cnblogs.com/GochanTao/p/7655192.html

    展开全文
  • 自定义指令分为全局指令和局部指令。全局指令可在任意vue组件内...下面介绍一下指令的具体用法。 指令,常用于封装一些涉及dom的公共功能,比如表单的自动获取焦点,列表的下拉收缩等。 一、指令的钩子函数 指...

    自定义指令分为全局指令和局部指令。全局指令可在任意vue组件内生效,局部指令仅在注册了指令的组件内生效。

    全局指令和局部指令写法几乎相同。全局指令是在main.js内使用Vue.directive注册,局部指令是在组件的directives选项写入。

    下面介绍一下指令的具体用法。

    指令,常用于封装一些涉及dom的公共功能,比如表单的自动获取焦点,列表的下拉收缩等。

    一、指令的钩子函数

    指令对象共有五个钩子函数:bind、inserted、update、componentUpdated、unbind。这些参数均可选。

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用

    二、钩子函数的参数

    • el:指令所绑定的元素,可以用来直接操作 DOM 。
    • binding:一个对象,包含以下属性:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
      • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1"中,表达式为 "1 + 1"
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
    • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    三、简单的案例

    一个实现了点击展开、选中收缩的下拉框.

    代码如下:

    vue:

    <template>
        <div>
            <span class="direct-val">{{inputVal}}</span>
            <ul class="direct-list direct-hide" v-toogleList>
                <li class="direct-item" v-for="(item) in directList" :key="item" @click="changeVal(item)">{{item}}</li>
            </ul>
        </div>
    </template>
    <script>
    export default {
        data(){
            return{
                inputVal:'1',
                directList:[1,2,3,4,5,6,7,8]
            }
        },
        methods:{
            changeVal(val){
                this.inputVal=val;
            }
        }
    }
    </script>

    directive.js:

    function toogleClass(){
        let dom=this;
        let classList=[...dom.classList];
        if(classList.includes('direct-hide')){
            dom.classList.remove('direct-hide');
            dom.classList.add('direct-show');
        }else if(classList.includes('direct-show')){
            dom.classList.remove('direct-show');
            dom.classList.add('direct-hide');
        }
    }
    export default {
        inserted(el,binding){
            el.previousElementSibling.addEventListener('click',toogleClass.bind(el))
            el.addEventListener('click',toogleClass.bind(el))
            console.log(binding)
        },
        unbind(el){
            el.previousElementSibling.removeEventListener('click',toogleClass.bind(el))
            el.removeEventListener('click',toogleClass.bind(el))
        }
    }

    main.js:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import direct from './directives/directive'
    Vue.config.productionTip = false
    Vue.directive('toogleList', direct)
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    输出的bind对象如图:

    效果:

    四、其他事项

    vue的官方文档还介绍了其他关于自定义指令的内容。

    以上就是vue中自定义指令的简单介绍。

    展开全文
  • vue一些常用指令

    2018-05-23 09:42:24
    指令指令(Directive),换句话说就是元素自定义属性,在 Vue 中是以 v- 为前缀自定义属性,属性值为对象或 js 表达式指令类型用法v-textstring &lt;span v-text="msg"&gt;&lt;/span&...

    指令

    指令(Directive),换句话说就是元素的自定义属性,在 Vue 中是以 v- 为前缀的自定义属性,属性值为对象或 js 表达式

    指令类型用法
    v-textstring
      <span v-text="msg"></span>
      <!--效果等同于-->
      <!--v-text 的权重高于 {{}}-->
      <span>{{msg}}</span>
    v-htmlstring
      <div v-html="html"></div>
    v-showboolean
      <!--show 的值会直接影响 div 在文档中是否显示-->
      <div v-show="show"></div>
    v-ifboolean
      <!--status 的值会直接影响 div 在文档中是否存在-->
      <div v-if="status"></div>
    v-else-ifboolean
      <div v-if="flag == 1">1</div>
      <!--必须跟 v-if 或者 v-else-if 元素后面-->
      <div v-else-if="flag == 2">2</div>
    v-else不需要表达式
      <div v-if="flag == 1">1</div>
      <div v-else-if="flag == 2">2</div>
      <!--必须跟 v-if 或者 v-else-if 元素后面-->
      <div v-else>2</div>
    v-forArray | Object | Number | String
      <!--
        data = 3 
        结果会生成 3 个 div,
        value 的值分类为 1, 2, 3 
        index 的值分别为 0, 1, 2
      -->
      <div v-for="(value, index) in data">
        <span v-text="value"></span>
        <span>{{index}}</span>
      </div>
      <!--也可以这样写-->
      <div v-for="value in data">
        <span v-text="value"></span>
      </div>
    
      <!--
        data = "abc" 
        结果会生成 data.length 个 div,
        value 的值分类为 a, b, c 
        index 的值分别为 0, 1, 2
      -->
      <div v-for="(value, index) in data">
        <span v-text="value"></span>
        <span>{{index}}</span>
      </div>   
      <!--也可以这样写-->
      <div v-for="value in data">
        <span v-text="value"></span>
      </div>
    
      <!--
        data = {name: 'Tom', age: 18} 
        结果会生成 data 属性个数 个 div,
        value 的值分类为 Tom, 18 
        key 的值分别为 name, age
      -->
      <div v-for="(value, key) in data">
        <span v-text="key"></span>
        <span>{{value}}</span>
      </div>
      <!--也可以这样写-->
      <div v-for="value in data">
        <span v-text="value"></span>
      </div>
    
      <!--
        data = [{name: 'Tom', age: 18}, {name: 'Jack', age: 20}] 
        结果会生成 data.length 个 div,
        obj 的值分类为 data[0], data[1] 
        index 的值分别为0, 1
      -->
      <div v-for="(obj, index) in data">
        <span v-text="JSON.stringify(obj)"></span>
        <span>{{index}}</span>
      </div>    
      <!--也可以这样写-->
      <div v-for="obj in data">
        <span v-text="JSON.stringify(obj)"></span>
      </div>    
    v-onFunction
      <!--click事件直接绑定一个方法-->
      <button v-on:click="say1">say1</button>
      <!--缩写方式-->
      <!--click事件使用内联语句-->
      <button @click="say2('调用了 say2', $event)">say2</button>     
    v-bindObject
      <img v-bind:src="'imgs/red.jpg'" />
      <!--缩写方式-->
      <img :src="'imgs/yellow.jpg'" />
    v-model表单元素的值
      <!--仅限于表单元素,双向绑定-->
      <input type="text" v-model="mess"/>
    v-pre不需要表达式
      <!--{{}} 不编译,当字符串输出-->
      <span v-pre>{{mess}}</span>
    v-cloak不需要表达式
      <!--
        mess = 'abc'
        span 还没被 vue 解析的时候会显示 {{mess}}
        解析后会显示 123
        用于解决这两个转换的过程不友好的显示
        尤其是在页面加载过慢的情况很容易出现这种情况
      -->
      <span v-cloak>{{mess}}</span>
    v-once不需要表达式
      <!--内容只解释一次,当改变 mess 时不会再次映射到 span-->
      <span v-once>{{mess}}</span>
    展开全文
  • Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别功能,这时候,我们就需要用到vue中一个很强大功能了—自定义指令。 在开始之前,我们...

    Vue中内置了很多的指令,如v-model、v-show、v-html等,但是有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候,我们就需要用到vue中一个很强大的功能了—自定义指令。

    在开始之前,我们需要明确一点,自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作,所以我们不能盲目的胡乱的使用自定义指令。

    1. 注册

    假设我们需要自定义一个 v-focus 指令,即在 或 标签初始化时获得焦点。
    注册自定义指令分为全局注册与局部注册两种:
    全局注册:

    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus',{
    // 当被绑定的元素插入到 DOM 中时……
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    })
    

    局部注册:

    export default{
    	// 如果想注册局部指令,组件中也接受一个 directives 的选项:
    	directives: {
    	  focus: {
    	    // 指令的定义
    	    inserted: function (el) {
    	      el.focus()
    	    }
    	  }
    	}
    }
    

    然后你可以在模板中任何元素上使用新的 v-focus property,如下:

    <input v-focus>
    

    2. 属性

    自定义指令属性包含这些钩子函数,它们都是可选的:

    钩子函数 说明
    bind 只调用一次,第一次绑定指令到元素时调用,我们可以在此绑定只执行一次的初始化动作。
    inserted 被绑定元素插入父节点时调用(父节点只要存在即可调用,不必存在于 document 中)。
    update 无论绑定值是否发生变化,只要被绑定元素所在的模板被更新即可调用。Vue.js 会通过比较更新前后的绑定值,忽略不必要的模板更新操作。
    componentUpdated 被绑定元素所在模板完成一次更新周期时调用。
    unbind 指令与元素解绑时调用,只调用一次。

    这些钩子函数一般包含这些入参:

    入参 说明
    el 指令所绑定的元素,可利用它直接操作 DOM
    binding 绑定对象。(下面会具体说明)
    vnode 编译生成的虚拟节点。
    oldVnode 上一个虚拟节点,仅在 update 与 componentUpdated 中可用。

    绑定对象属性说明:

    属性 说明 示例
    name 指令名,不包含前缀 v-。 v-focus 中的 focus。
    value 指令所绑定的值(计算后)。 v-focus=“1 + 2” 中的 3。
    oldValue 指令所绑定的前一个值,无论值是否改变都有值,且仅在 update 与 componentUpdated 中可用。 -
    expression 绑定的值的字符串形式(不计算)。 v-focus=“1 + 2” 中的 1 + 2。
    arg 传递给指令的参数。 v-focus:xxx 中的 xxx。
    modifiers 包含修饰符的对象。 v-focus.a.b 中,为 {a:true, b:true}。
    展开全文
  • vue的指令系统  所谓指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。  在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上。  接下来...
  • 定义全局自定义指令 注意:Vue.directive(...参数2:参数2是一个对象,这个对象身上有一些指令相关函数(也就是下边介绍钩子函数),这些函数可以在特定阶段,执行相关操作。 <div> <!-- 让inpu...
  • vue指令、自定义指令

    2020-11-10 22:35:48
    自定义指令的用法 一.什么是指令? 1.vue中内置的指令 在vue中提供了一些基础的指令,方便我们直接操作操作DOM节点,主要的内置指令有: v-cloak:用于在数据还没插入到标签时,不显示原始文本,需要添加样式 . <style&...
  • 关于vue的一些总结

    2017-09-09 14:25:57
    最近学习了一段时间的vue js 除了路由没用过之外 基本上其他的都用过了 对于vue的一些用法 在此做一个总结。 开始使用vue之前 需要导入vuejs这个文件...下面先介绍一下vue的双向绑定 指令:v-model vue的一些指令
  • vue指令

    2021-03-22 22:58:14
    vue的基础用法 在官网中可以看到vue在基本的使用中需要具备的一些文件 首先我们先要定义一个区域,在这个区域中展示自己的vue内容,定义一个div就是 定义好这个容器下面在开始写js代码的时候引入一下vue文件,vue...
  • vue 指令系统使用

    2019-10-08 06:54:57
    vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上。 OK,接下来我们一一介绍我们的指令系统的用法。 v-if 指令 <div id="app"> <h2 v-if="show"> haha</h2&...
  • VUE 之 JS指令

    2018-11-07 23:06:00
    1、v-text的用法:   2、v-html   3、v-for   4、v-if , v-else if ,v-else    v-if 每次生成都只有一个标签,即符合条件的标签。 5、v-show    v-show 和 v- if 的区别:  切换性能:  v-...
  • vue自定义指令 directive

    2020-02-09 18:58:21
    同样vue提供给开发者一些钩子,用以帮助开发者自定义vue指令用法和v-on等是一样vue.direactive如何使用? //在html方面,直接在标签上绑定,但是要添加上v- <div id="app"> <!--#...
  • vue表单的用法

    2017-10-21 14:09:00
    尽管有些神奇,但v-model本质上不过是语法糖,它负责监听用户输入事件以更新数据,并特别处理一些极端例子。 v-model会忽略所有表单元素value、checked、selected特性初始值。因为它会选择 Vue 实例数据来...
  • 什么是vue Vue.js是目前最流行的前端MVVM框架 作者:尤雨溪 ( 华人 ) 前Google员工 Vue.js 是什么 是一套构建用户界面的渐进式的自底向上增量开发MVVM框架,...每个框架都会有自己的一些特点,会对开发者有一定的要求
  • vue指令系统

    2018-07-06 19:39:00
    所谓指令系统,大家可以联想咱们的cmd...OK,接下来我们一一介绍我们的指令系统的用法。 1、条件渲染 一、v-if 表示条件渲染 在vue中,我们使用v-if指令,将当前的dom元素设置 &lt;p v-if = 'show...
  • 不是跳过了js是笔记写在本子上了哈哈 ...还有哈,这边不会写一些理论笔记只是知识点整理和记录 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>V...
  • 所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我...OK,接下来我们一一介绍我们的指令系统的用法。 条件渲染 0x00 v-if 表示条件渲染 在vue中,我们使用v-if指令,将当前的dom元素设置 <p v-if ...
  • v-on的用法,v-on是给页面上绑定事件方法可以绑定的事件有很多这里就举一个例子。具体代码: 具体页面展示效果: v-bind作用不太清除,暂时知道可动态的改变一些样式、class名、title名之类的。 v-model双向...
  • vue——指令系统介绍

    2018-07-30 17:56:00
    所谓指令系统,大家可以联想咱们的cmd...OK,接下来我们一一介绍我们的指令系统的用法。 1、条件渲染 一、v-if 表示条件渲染 在vue中,我们使用v-if指令,将当前的dom元素设置 <p v-if = 'show'>显示...
  • vue指令系统介绍

    2019-10-04 00:58:22
    所谓指令系统,大家可以联想咱们的cmd命令行...OK,接下来我们一一介绍我们的指令系统的用法。 1、条件渲染 一、v-if 表示条件渲染 在vue中,我们使用v-if指令,将当前的dom元素设置 <p v-if = 'show'&...
  • Vue支持我们自己开发一些使用方法类似内置指令(如v-show、v-for等)的自定义指令,通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法,并实现一个指令v-drag实现悬浮框拖动功能。 一、基本...
  • directive的用法 Vue.directive() 定义全局的指令 Vue.directive() // 有两个参数 参数1 : 指令的名称, 注意:在定义的时候不用加 v- 前缀; 但在使用时 必需加 v- 前缀进行调用; 参数2 : 是一个对象,这个...
  • vue2.0-常用几个指令

    2018-05-26 16:56:00
    面 讲述vue2.0的常用的十...我们看看它的用法: 2. v-html 指令 它帮助我们绑定一些包含html代码的数据在视图上。比如:“<b>hello,vue</b>”,这个字符串包含了<b>标签,要想<b...
  • vue.js中很多修饰符都是以 v- 形式出现,下面将一些常用的指令: 1、v-cloak 我们用vue来传输数据时候,往往会用到类似 {{ msg }} 这样内容,正常情况下这样内容只有程序员可以看到,而有一种情况,当...
  • Vue(九) 自定义指令

    2018-11-23 20:18:00
    前面介绍了许多 Vue 内置的指令,比如 v-if、v-show等,这些丰富的指令能满足我们绝大部分业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层操作,这时就要用到自定义指令。 基本用法 自定义...
  • Vue 2.0 v-model的用法

    2018-11-28 17:45:26
    你可以用 v-model 指令在表单 &...它负责监听用户输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素 value、checked、selected 特性初始值而总是将 ...
  • 前端inn公众号ID:前端inn关注作者:阿良编辑:煜喵喵不爱喝酒上次我们学习了关于Vue的一些基本指令用法,相信你对Vue已经有了一些了解。本节阿良给大家讲解Vue的基础用法之组件封装、组件传参、动态绑定style和...
  • 前端inn公众号ID:前端inn关注作者:阿良编辑:煜喵喵不爱喝酒上次我们学习了关于Vue的一些基本指令用法,相信你对Vue已经有了一些了解。本节阿良给大家讲解Vue的基础用法之组件封装、组件传参、动态绑定style和...

空空如也

空空如也

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

vue的一些指令的用法

vue 订阅