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

    2020-03-26 13:04:51
    vue的指令 全局: Vue.directive(‘指令名不带v-’,函数(el,binding)) el == 使用指令的DOM元素 binding 是个对象 含有传入的 参数(binding.value) 局部: 定义在选项里面 directives:{ 指令名不带v- : 函数(el,...
                               vue的指令
    

    全局: Vue.directive(‘指令名不带v-’,函数(el,binding))
    el == 使用指令的DOM元素
    binding 是个对象 含有传入的 参数(binding.value)
    局部: 定义在选项里面
    directives:{
    指令名不带v- : 函数(el,binding){}
    }

    如果一个函数已经不能表达出指令的话可以用对象来代替

    {
    钩子函数
    inserted:fn(el,binding) 绑定指令的元素插入到父节点时调用
    bind:fn 指令第一次绑定到元素时调用
    update:fn 指令所在的元素的model层的数据,view有更新请求时
    componentUpdated:fn 更新完成时
    }

    展开全文
  • vue的学习代码-vue的指令部分 vue-if | text | for | on | model | bind | pre | html 等等
  • Vue基础篇五:Vue的指令 文章目录系列文章目录一、内置指令二、自定义指令 一、内置指令 指令 说明 v-text 更新元素的 textContent v-html 更新元素的 innerHTML <template> <div> <...

    系列文章目录

    Vue基础篇一:编写第一个Vue程序
    Vue基础篇二:Vue组件的核心概念
    Vue基础篇三:Vue的计算属性与侦听器
    Vue基础篇四:Vue的生命周期(秒杀案例实战)
    Vue基础篇五:Vue的指令


    一、内置指令

    指令 说明
    v-text 更新元素的 textContent
    v-html 更新元素的 innerHTML
    <template>
      <div>
        <h2>v-text</h2>
        <div v-text="'hello vue'">hello world</div>
        <h2>v-html</h2>
        <div v-html="'<span style=&quot;color: red&quot;>hello vue</span>'">
          hello world
        </div>
      </div>
    </template>
    
    指令 说明
    v-show 根据表达式之真假值,切换元素的 display CSS property
    v-if 根据表达式的值的 truthiness 来有条件地渲染元素
    v-if-else 表示 v-if 的“else if 块”
    v-else 为 v-if 或者 v-else-if 添加“else 块”
    <template>
      <div>
        <h2>v-show</h2>
        <div v-show="showed">hello vue</div>
        <h2>v-if v-esle-if v-else</h2>
        <div v-if="currHour >=6 && currHour < 12 ">上午好! </div>
        <div v-else-if=" currHour >=12 && currHour < 18 ">下午好! </div>
        <div v-else>晚上好!</div>
      </div>
    </template>
    <script>
    export default {
      data: function () {
        return {
          showed: true,
          currHour: new Date().getHours()
        };
      },
    };
    </script>
    
    指令 说明
    v-for 基于源数据多次渲染元素或模板块
    v-bind 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式
    <template>
      <div>
        <h2>v-for v-bind</h2>
        <div v-for="num in numbers" v-bind:key="num">{{ num }}</div>
      </div>
    </template>
    <script>
    export default {
      data: function () {
        return {
          numbers:  [1, 2, 3,4,5,6,7,8,9]
        };
      },
    };
    </script>
    
    指令 说明
    v-on 绑定事件监听器
    <template>
      <div>
        <h2>v-on</h2>
         {{ number }}
        <button v-on:click="addNumber">number++</button>
      </div>
    </template>
    <script>
    export default {
      data: function () {
        return {
          number:0
        };
      },
      methods:{
          addNumber(){
            this.number=this.number+1
          }
      }
    };
    </script>
    
    指令 说明
    v-model 在表单控件或者组件上创建双向绑定
    <template>
      <div>
        <h2>v-model</h2>
        <input v-model="message" />
        <br/>
        {{message}}
      </div>
    </template>
    <script>
    export default {
      data: function () {
        return {
          message:''
        };
      }
    };
    </script>
    
    指令 说明
    v-slot 提供具名插槽或需要接收 prop 的插槽
    <template>
    <div>
        <slot name="header"></slot>
        <slot name="default"></slot>
        <slot name="footer"></slot>
    </div>
    </template>
    
    <template>
        <BaseLayout>
      <template v-slot:header>
        <h1>这是头部区域</h1>
      </template>
    
      <template v-slot:default>
        <p>这是内容区域</p>
      </template>
    
      <template v-slot:footer>
        <p>这是底部区域</p>
      </template>
    </BaseLayout>
    </template>
    
    <script>
    import BaseLayout from './components/Slot.vue'
    export default {
         name: "App",
       components: {
        BaseLayout
      },
    }
    </script>
    
    
    指令 说明
    v-pre 跳过这个元素和它的子元素的编译过程
    v-once 只渲染元素和组件一次
    v-cloak 保持在元素上直到关联实例结束编译:在简单项目中,使用 v-cloak 指令是解决屏幕闪动的好方法
    <template>
      <div>
        <h2>v-pre</h2>
        <div v-pre>{{ this will not be compiled }}</div>
        <h2>v-once</h2>
         <button v-on:click="addNumber">number++</button> -->
        <div v-once>
          {{ number }}
        </div>
        <h2>v-cloak</h2>
        <div v-cloak>
      {{ message }}
    </div>
      </div>
    </template>
    <script>
    export default {
      data: function () {
        return {
          number:0,
          message:'这是一个Vue项目'
        };
      },
      methods:{
          addNumber(){
            this.number=this.number+1
            console.log(this.number)
          }
      }
    };
    </script>
    

    二、自定义指令

    • 一个指令定义对象可以提供如下几个生命周期钩子函数
    钩子函数 说明
    bind 只调用一次,指令第一次绑定到元素时调用
    inserted 被绑定元素插入父节点时调用
    update 所在组件的 VNode 更新时调用
    componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用
    unbind 只调用一次,指令与元素解绑时调用
    • 自定义指令案例
    <template>
      <div>
        <p>请输入:</p>
        <input v-if="show" ref="txt" :value="message" v-focus type="text" />
        <button  @click="ontxtInput">输入框设置</button>
        <button  @click="ontxtVisible">输入框消失</button>
      </div>
    </template>
    
    <script>
    export default {
      data: function () {
        return {
          message: "",
          show: true,
        };
      },
      directives: {
        focus: {
          // 指令的定义
    
          bind(el, binding) {
            console.log("bind", el, binding);
          },
    
          inserted: function (el, binding) {
            el.focus();
            console.log("inserted", el, binding);
          },
    
          update(el, binding) {
            console.log("update", el, binding);
          },
          componentUpdated() {
            console.log("componentUpdated");
          },
          unbind() {
            console.log("unbind");
          },
        },
      },
      methods: {
        ontxtInput() {
          this.show=true;
          this.message = "输入框设置";
        },
        ontxtVisible(){
            this.show=false;
        }
      },
    };
    </script>
    

    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 1、单向数据 {{}} 小胡子语法,可以放表达式、赋值、三元(判断) 2、双向数据 表单元素:input、checkbox、textarea、select、...3、vue的指令 只是dom上的行间属性,所有指令都以 v- 开头 基础指令 1、v-model 实...

    1、单向数据
    {{}}
    小胡子语法,可以放表达式、赋值、三元(判断)
    2、双向数据
    表单元素:input、checkbox、textarea、select、radio(value属性会自动被vue忽略,selected、checked都没有意义)
    表单元素更改映射到数据中,通过指令实现双向数据
    3、vue的指令
    只是dom上的行间属性,所有指令都以 v- 开头

    基础指令

    1、v-model
    实现双向数据
    在这里插入图片描述
    2、v-text
    防止大括号出现在页面上

    <div v-text="msg"></div>             //div中不能写东西
    

    3、v-once
    只绑定一次 ,当数据再次发生变化,也不会导致页面刷新 (常用)

    <div v-once>
       {{msg}}
    </div>
    

    防止以下情况发生
    在这里插入图片描述
    4、v-html
    在这里插入图片描述

    展开全文
  • 创建指令Vue.directive("指令名",{inserted(elem){//指令所在元素被加载到DOM树上后自动执行指令//elem会自动获得指令所在当前元素对elem执行DOM操作!}})2. 使用指令:2、Axios什么是:专门发送http请求函数库...

    一、 自定义指令

    如何:

    1. 创建指令

    Vue.directive("指令名",{

    inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令

    //elem会自动获得指令所在的当前元素

    对elem执行DOM操作!

    }

    })

    2. 使用指令: 

    2、Axios

    什么是: 专门发送http请求的函数库

    为什么: ajax

    1. 自己封装函数:

    2. jQuery: $.ajax() 小题大做

    3. Vue有一个组件resource,已不推荐使用

    4. Axios 官方推荐

    何时: 只要在vue中发送ajax请求都用axios

    如何:

    1. 引入: axios.min.js

    2. 发送2种请求:

    get请求:

    axios.get("url",{

    params:{

    参数:值

    }

    }).then(res=>{

    获得服务端返回的结果: res.data

    })

    post请求:

    axios.post("url","变量=值&变量=值&...").then(res=>{...})

    三、组件化开发

    什么是组件: 拥有专属的HTML,CSS,JS和数据的页面独立区域

    什么是组件化: 今后所有页面都是由多个组件组成的

    每定义一个网页,都要先划分组件结构,再分别编写每个组件

    为什么:

    1. 重用

    2. 便于大项目的分工协作

    3. 松散耦合

    如何:

    1. 创建组件:

    每个组件包含三部分:

    HTML: 独立的HTML片段:

    是HTML5中新增的专门保存一段隐藏的HTML片段的元素——专门为框架保存HTML模板

    JS:

    Vue.component("组件名",{

    //和new Vue()极其相似

    template:"#tplxxx", //代替了el,每创建一个组件的副本,就自动复制一次模板中的html片段

    data:function(){//每创建一个组件的副本,就调用一次data(),为当前组件创建专属的模型数据data

    return {

    count:1

    }

    },

    //其余和new Vue()完全一样

    })

    CSS:

    2. 使用组件:

    组件名其实就是一个标签名

    只要在主内容中,添加一个<组件名>组件名>,运行时Vue就会用组件的template代替<组件名>标签所在位置

    组件分类:

    1. new Vue({ ——根组件

    el:"#app",

    data:{}

    })

    2. Vue.component("组件名",{——全局组件: 可在任何位置随意使用的组件

    template:"#tplxxx",

    data:function(){ return {} }

    })

    3. 子组件: 仅限于在某个父组件内才能使用的组件

    如何: 3步:

    1. 只要将Vue.component降级为普通对象

    强调: 变量名最好是将来组件标签名的驼峰方式

    2. 在父组件中添加components属性: {

    子组件变量名, 子组件变量名, //ES6简写

    }

    Vue会将驼峰命名的组件名,转为小写,并用-分隔

    比如: todoAdd -> todo-add

    todoList -> todo-list

    组件间传递数据:

    父子间:

    1. 父->子:

    为什么: Vue中父组件的数据模型是专属的,子组件默认不能使用父组件的数据

    解决: 2步:

    1. 子组件:

    var 子组件={

    template:"xxx",

    props:["变量", ... ] //声明一个内外两用的变量

    //对外: 父元素可为其绑定数据

    //对内: 相当于data:{ 变量 }

    }

    {{变量}}  

    2. 父组件:

    <子组件:变量="模型变量">子组件>

    父组件将自己的模型变量的值传递给子组件的变量属性,子组件就获得了父组件的数据

    2. 子->父:

    1. 父组件: 在子组件身上提前定义自定义事件和处理函数:

    <子组件 @自定义事件="父的处理函数"//不要加()

    //当有人触发自定义事件时,自动执行父组件中的处理函数,修改父组件自己的数据

    父组件{

    ...

    methods:{

    处理函数(形参) {//形参会收到子传来的参数

    //操作父组件中的数据

    }

    }

    }

    2. 子组件:

    任何时候都可以:

    this.$emit("父给子定义的事件名",实参)

    意为触发父给子提前定义的事件,并自动引发执行父的处理函数。

    展开全文
  • Vue的指令及其用法

    千次阅读 2019-06-23 22:16:02
    Vue 1.0 叫它 属性指令( 借鉴Angular来Vue 2.0 统称为 ‘指令指令是用一个 v-xxx 表示 指令是用来操作dom Vue中不允许直接操作dom mustache语法 — 属性写法 属性值是直接写数据,不需要使用 {{ ...
  • vue常用的指令 如v-text,v-html,v-if,v-show,v-for……等等一类的vue指令,这些指令看似简单,但背后的逻辑需要了解,尤其现在关于vue面试经常会提到的问题,比如v-if和v-show的区别是什么,v-for和v-if在同一个标签...
  • vue的指令实例属性

    千次阅读 2016-10-03 20:18:28
    所有的钩子函数将被复制到实际的指令对象中,钩子内 this 指向这个指令对象。这个对象暴露了一些有用的属性:  el: 指令绑定的元素。  vm: 拥有该指令的上下文 ViewModel。  expression: 指令的表达式,不...
  • 修饰符是由点开头的指令后缀来表示的。 .stop :阻止事件冒泡到父元素 .prevent:阻止默认事件发生* .capture:使用事件捕获模式 .self:只有元素自身触发事件才执行。(冒泡或捕获的都不执行) .once:只执行一次 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,276
精华内容 6,910
关键字:

vue的指令

vue 订阅