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

    2020-03-01 18:19:46
    今天利用空闲时间为大家分享一下常用的vue指令。 v-model:表单控件元素上创建双向数据绑定 通过改变input的值可以vue实例的值,进而改变视图的值,相反,改变实例的值同样可以改变输入框的值 代码示例: 效果图:...

    今天利用空闲时间为大家分享一下常用的vue指令。

    1. v-model:表单控件元素上创建双向数据绑定
      在这里插入图片描述
      通过改变input的值可以vue实例的值,进而改变视图的值,相反,改变实例的值同样可以改变输入框的值
      代码示例:
      在这里插入图片描述效果图:(输入框输入111222,后面会跟着添加111222)
      在这里插入图片描述

    2. v-text:更新标签的文本内容(和“{{}}”的用法等效)
      代码示例:(v-text和{{}}的显示效果一致)
      在这里插入图片描述

      *效果展示:*
      

      在这里插入图片描述

    3. v-html:将html代码以标签的形式展示在试图上(不用v-htm就会以字符串的形式渲染在页面上)
      代码示例:在这里插入图片描述

    效果展示:(从浏览器页面和控制台可以看到,第一个渲染成了h3标签,而第二个是字符串)在这里插入图片描述
    4. v-if/v-show
    同:根据条件渲染,值为true则渲染,为false则不渲染
    异:前者是通过销毁或创建来渲染页面,后者是通过display:none来进行隐现的(若频繁切换隐现可以优先使用v-show,若v-if和v-for一同使用,后 者优先级高)
    代码示例:
    在这里插入图片描述

    效果展示:(v-if不会生成标签,而v-show显示表示,只是display的属性为
    none)
    在这里插入图片描述
    5. v-else:和v-if搭配使用,若v-if的值为false时是会显示v-else的内容
    代码示例:
    在这里插入图片描述

    效果展示:显示的为v-else内容
    在这里插入图片描述
    6. v-for:通过遍历data中的数据实现列表渲染,可以迭代数组,对象,整数。
    若项较多可以再加上 :key=””
    代码示例:item为数组的每一项,index为每一项的下标
    在这里插入图片描述

    效果展示:
    在这里插入图片描述
    7. v-bind: 动态绑定DOM元素属性(可以简写为“:”)
    例如img标签中src属性前不加v-bind符合就会显示等号后面写死的值,若加上则可以调用到data中的值
    在这里插入图片描述
    8. v-on:绑定事件的监听器,可以缩写为“@”(用在普通元素上时,只能监听原生 DOM 事件。 用在自定义元素组件上时,也可以监听子组件触发的自定义事件)
    代码如下:
    在这里插入图片描述

    效果展示:在这里插入图片描述
    9. v-once:数据只会渲染一次,无论数据如何变化都不会在渲染
    代码示例:在这里插入图片描述

    效果展示:双向绑定后,无论输入框的值如何改变,p标签的内容都不会在渲染
    在这里插入图片描述
    逆战班哦

    展开全文
  • - Vue指令 - Vue基本属性 - Vue组件通信 Vue 基本属性 data属性 在.vue扩展名文件下,data属性必须定义为函数形式,在普通的Vue对象中,data属性就是一个对象。 相当于react中state,代表了当前组件状态;组件...

    VUE初级

    大纲知识点:

    - Vue指令
    - Vue基本属性
    - Vue组件通信

    Vue 基本属性

    data属性
    在.vue扩展名文件下,data属性必须定义为函数形式,在普通的Vue对象中,data属性就是一个对象。

    相当于react中state,代表了当前组件的状态;组件呈现一个什么样的状态,data属性就必须有什么样的描述。

    el属性
    Vue 对象/组件将要挂载页面元素,可以使用选择器

    • 类型string | Element 选择器|HTML元素
    • 限制:只在用 new 创建实例时生效。
    • 详细:
      提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
    new Vue({
      el:"#app"
    })
    

    components属性

    • 类型Object
    • 详细
      包含 Vue 实例可用组件的哈希表。

    methods属性

    事件处理函数、组件业务逻辑函数等等都必须定义在methods属性中,注意定义在method属性中的函数,不能使用箭头函数

    • 类型{ [key: string]: Function } 对象
    • 详细
      methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

    注意,不应该使用箭头函数来定义 method 函数(例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

    methods属性

    • 类型{ [key: string]: Function | { get: Function, set: Function } }
    {   
     key:function    
     key:{ 
           
     	 }
    }
    

    计算属性对应的是定义在data属性中数据,当参与计算的data中的数据发生变化,相应的计算属性对应函数会被调用,重新计算并且返回结果。计算属性会监听data中参与计算的数据。

    计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

    watch 监听属性

    监听定义在data属性中的数据,监听的数据发生变化,就会触发相应的处理函数

    • 类型{ [key: string]: string | Function | Object | Array }
    var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
          f: {
            g: 5
          }
        }
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
        c: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
          handler: 'someMethod',
          immediate: true
        },
        // 你可以传入回调数组,它们会被逐一调用
        e: [
          'handle1',
          function handle2 (val, oldVal) { /* ... */ },
          {
            handler: function handle3 (val, oldVal) { /* ... */ },
            /* ... */
          }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function (val, oldVal) { /* ... */ }
      }
    })
    vm.a = 2 // => new: 2, old: 1
    
    Vue 基本属性
    v-show:

    根据表达式之真假值,切换元素的 display CSS 属性。

    当条件变化时该指令触发过渡效果。

    v-show绑定的boolean值,如果绑定值是true,则当前元素显示,如果绑定的值是false,则当前元素隐藏

    v-bind:

    动态地绑定一个或多个属性,或一个组件 prop 到表达式。

    v-if v-else v-else-if

    有条件的渲染元素或者组件,只有v-if可以单独使用,v-else或者v-elsep-if必须与v-if联用

    v-if:如果指令绑定的表达式的取值为true,则指令所在的元素被渲染,否则则不渲染

    v-else:如果上一兄弟元素的v-if取值为false,则v-else所在元素被渲染,反之,上一兄弟元素的v-if绑定的值为true,则不渲染

    v-else-if:如果上一兄弟元素绑定的表达式的值没有匹配到,则判断v-else-if的取值,如果是true,则指令所在元素被渲染,否则不渲染

    v-text
    更新元素的 `textContent`。如果要更新部分的 `textContent`,需要使用 `{{ Mustache }}`插值。
    <span v-text="msg"></span>
    <!-- 和下面的一样 -->
    <span>{{msg}}</span>
    
    v-html
    等同于innerHTML,更新元素的 innerHTML
    v-for
    等同于innerHTML,更新元素的 innerHTML
    v-for

    基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression,为当前遍历的元素提供别名:

    <div class="list_item" v-for="(number,index) in items" :key="index">{{number}}</div>
    
    v-on

    绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

    用在普通元素上时,只能监听原生 DOM 事件用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

    事件修饰符
    • .stop - 调用 event.stopPropagation() 阻止事件冒泡。
    • .prevent - 调用event.preventDefault()。阻止元素的默认行为。
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - (2.2.0) 只当点击鼠标左键时触发。
    • .right - (2.2.0) 只当点击鼠标右键时触发。
    • .middle - (2.2.0) 只当点击鼠标中键时触发。
    • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    
    <!-- 动态事件 (2.6.0+) -->
    <button v-on:[event]="doThis"></button>
    
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    
    <!-- 缩写 -->
    <button @click="doThis"></button>
    
    <!-- 动态事件缩写 (2.6.0+) -->
    <button @[event]="doThis"></button>
    
    <!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    
    <!-- 阻止默认行为,没有表达式 -->
    <form @submit.prevent></form>
    
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    
    <!-- 键修饰符,键别名 -->
    <input @keyup.enter="onEnter">
    
    <!-- 键修饰符,键代码 -->
    <input @keyup.13="onEnter">
    
    <!-- 点击回调只会触发一次 -->
    <button v-on:click.once="doThis"></button>
    
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
    
    v-model 双向绑定

    只能输入元素上使用

    修饰符:
    • .lazy - 取代 input 监听 change 事件
    • .number - 输入字符串转为有效的数字
    • .trim - 输入首尾空格过滤

    Vue 组件通信

    props属性
    • 类型Array | Object
    • 详细
      props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。
    发布订阅模式
    父传子
    1. 在父组件中的子组件标签中定义传递数据属性,需要使用动态绑定来传递数据
    2. 在子组件中,增加props属性,在props属性中定义一个与传递数据时定义名称相同属性用来接受数据,然后表明数据数据类型
    3. 使用数据
     //父组件
    <NavigationBar title="我的"/>
    
    
    //子组件
    <template>
     <div class="navigation_bar_container">
       <div class="navigation_bar_wrapper">
         <div class="navigation_bar_back_icon">
           <img src="../assets/fanhui.png"
           v-on:click="onClicBack"/>
         </div>
         <div>{{title}}</div>
         <div></div>
       </div>
     </div>
    </template>
    
    <script>
    export default {
     //props属性
     props:{
       title:String//如果传递的数据不符合定义时的数据类型,vue将抛出警告
     }
    
    子传父

    利用Vue提供的触发自定义事件$emit函数实现

    1. 子组件需要向父组件传递数据时,使用$emit函数出发自定义事件,并传递数据
    2. 在父组件中,增加对自定义事件的监听,子组件触发自定义事件后,父组件监听并执行事件对应的处理函数,然后获取子组件传递给父组件的数据
    //子组件
    methods:{
       onClicBack(){
         // 函数
         //参数1:自定义事件名称
         //参数2:事件触发需要传递的数据
         this.$emit("goback",111111)
       }
     }
    
    //父组件
    //监听自定义事件goback,触发后执行函数back
     <NavigationBar title="我的"
       v-on:goback="back"/>
    
    跨组件传值(兄弟组件传值)

    在Vue中,兄弟组件传值我们使用的是eventBus方式

    首先,创建一个名称为EventBus的Vue对象(组件):

    import Vue from "vue";
    //中转站
    //创建了一个Vue对象,使用这个vue对象作为中转站
    const EventBus = new Vue({
    
    })
    
    export default EventBus;
    

    然后,在将要传递数据的组件中引入,当我们想要传递数据的时候,使用EventBus对象触发一个自定义事件,将需要传递的数据以事件触发方式传递:

    <template>
      <div class="input_container">
        <div class="input">
          <input type="text" placeholder="请输入将要提交的内容"
          v-model="inputValue"/>
        </div>
        <div class="button">
          <button v-on:click="onClcikSumit">提交</button>
        </div>
      </div>
    </template>
    
    <script>
    import EventBus from "../EventBus/EventBus";
    
    export default {
      data(){
        return{
          inputValue:""
        }
      },
      methods:{
        onClcikSumit(){
          // var inputValue = this.$refs.input.value;
          // window.console.log(this.inputValue);
          //$emit触发一个自定义事件
          EventBus.$emit("submitMessage",this.inputValue);
        }
      }
    }
    </script>
    
    

    最后,在接受数据的组件中,同样引入EventBus组件,在接受数据组件挂载结束的生命周期函数中,监听触发的自定义事件:

    <template>
      <div class="content_container">
        {{content}}
      </div>
    </template>
    
    <script>
    import EventBus from "../EventBus/EventBus";
    
    export default {
      data(){
        return{
          content:""
        }
      },
      mounted(){
        EventBus.$on("submitMessage",(message)=>{
          this.content = message
          window.console.log(message)
        });
      }
    }
    </script>
    

    当事件触发后,就会监听到事件,然后执行事件对应的函数,获取到传递的数据。

    展开全文
  • 问题一:请说出vue几种常用的指令v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。v-show:根据表达式之真假值,切换元素的 display CSS 属性。v-for:循环指令,基于一个...

    问题一:请说出vue几种常用的指令

    • v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
    • v-show:根据表达式之真假值,切换元素的 display CSS 属性。
    • v-for:循环指令,基于一个数组或者对象渲染一个列表,vue 2.0以上必须需配合 key值 使用。
    • v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。
    • v-on:用于监听指定元素的DOM事件,比如点击事件。绑定事件监听器。
    • v-model:实现表单输入和应用状态之间的双向绑定
    • v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
    • v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    问题二: 请问 v-if 和 v-show 有什么区别?

    共同点:

    v-if 和 v-show 都是动态显示DOM元素。

    区别:

    1、编译过程: v-if 是 真正 的 条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。

    2、编译条件: v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做。直到条件第一次变为真时,才会开始渲染条件块。v-show不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    3、性能消耗: v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

    4、应用场景: v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

    自义定指令

    注册:

    290faeb40b29158764cf217c1e11e81c.png

    模板中使用:

    66bb21271c36ced594fefd0d9b45e9cd.png
    展开全文
  • vue中常用指令 1.v-bind 想要让标签上属性使用data中数据,前面加上v-bind,简写 :。 2.v-on 给元素加事件,v-on:click=“say”,方法定义在methods里面, 简写@click="say“。 3.v-text 跟插值表达式功能类似,...

    vue中常用指令

    1.v-bind 想要让标签上的属性使用data中的数据,前面加上v-bind,简写 :。

    2.v-on 给元素加事件,v-on:click=“say”,方法定义在methods里面,
    简写@click="say“。

    3.v-text 跟插值表达式功能类似,可以向指定元素加入数据。

    4.v-html 可以将带有标签的字符串,渲染到指定的额元素中。

    5.v-show 指令给一个bool类型,如果为true,显示。否则false,不显示。

    6.v-if 用法同v-show

    扩展:v-show和v-if的区别?
    当条件为真时,都可以。
    当条件为假时,v-if是删除dom节点,v-show是隐藏dom节点。
    如果在页面频繁的使用时,使用v-show。如果页面使用只有初始化一次是否显示时,使用v-if。
    template 他是透明标签。这个标签只有v-if可以控制他的添加和删除,v-show不好使

    7.v-else-if 配合v-if使用,需要元素相连的关系。

    8.v-else 配合v-if 使用,相连,没有条件

    9.v-for 循环

    循环数组

    在这里插入图片描述
    如果在遍历的过程中不需要使用索引值,v-for=“movie in movies”,一次从movies中取出movie,并且在元素内容中,我们可以使用插值已发,来使用movie。
    如果在遍历的过程中,我们需要拿到元素在数组中的索引值,v-for=“(movie,index)in movies”,其中index就代表了取出的movie在原数组的索引值。

    循环对象

    在这里插入图片描述

    组件的key的属性在这里插入图片描述

    10.v-once. vue模板只执行渲染一次

    1. v-ore 元素加上指令后,不会渲染vue模板,一般跳过写好的静态资源

    2. v-cloak 做用是解决插值表达式闪烁的问题

    3. v-model 双向数据绑定

    <!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>常用指令v-model</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div class="app">
            <!-- 数据绑定 -->
            {{msg}}----{{arr}}----{{age}}----{{users}}
            <!-- 双向数据绑定 -->
            <input type="text" v-model="name">
            <select v-model="tag">
                <option value="01">01</option>
                <option value="02">02</option>
            </select>
            <input type="checkbox" value="01" v-model="test">
            <input type="checkbox" value="02" v-model="test">
            {{name}}----{{tag}}----{{test}}
    
        </div>
        <script>
            var vm = new Vue({
                el: '.app', //指定关联的元素
                data: { //存储数据
                    msg: 'Hello World',
                    arr: [1, 2, 3],
                    age: 21,
                    users: {
                        id: 12,
                        name: '秋香'
                    },
                    name: '',
                    test: '',
                    tag: '01'
                }
            });
        </script>
    </body>
    
    </html>
    

    动态添加样式

    vue实现点击切换改变样式

    html代码

    <ul>
        <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li>
    </ul>
    

    js代码

    export default {
        data(){
            return{
                dataList:["选项1","选项2","选项3","选项4","选项5","选项6"],
                clicked:0   //标识,初始化默认选中第一项
            }
        },
        methods:{
            changeTab(index){
                this.clicked = index;
            }
        }
    }
    

    css样式

    .bor{
       border:2px solid black;
    }
    

    效果
    在这里插入图片描述

    :style

    <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        </head>
    <body>
      <div id='app'>
      
        <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1>
     
        <h1 :style="styleObj1">这是一个H1</h1>
     
        <h1 :style="[styleObj1,styleObj2]">这是一个H1</h1>
     
      </div>
    </body>
    <script src="vue.min.js"></script>
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},
          styleObj2:{'font-style':'italic'},
        }
      });
    </script>
    </html>
     
    
    三目实现
    html :style="{color:(index==0?conFontColor:'#000')}"
    html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"
    
    展开全文
  • Vue常用指令总结

    2020-03-31 21:50:02
    文章目录常用指令v-cloak:防止页面加载时出现闪烁问题v-text:将数据填充到标签中v-html:将HTML...bind:属性绑定绑定class对象-绑定对象语法绑定class对象-绑定数组语法绑定class细节用法绑定对象绑定数组 区别...
  • v-htmlv-text的用法区别:他们显示普通文本效果差不多,但是v-html可以解析html结构。 V-ifv-show异同: 1.他们显示效果是一样,都是通过真假来决定是否显示 2.v-if会对dom进行操作,如果为假会直接从...
  • vue常用指令 一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀特殊特性。指令特性值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是,当表达式值改变时,将其产生连带影响,响应式地...
  • 文章目录前言一、vue常用指令 + 事件+样式?1、v-for2、v-if v-show3、filter 筛选 避开 v-if v-for 一起使用4、v-bind v-model5、监听器 watch6、计算属性7.vue 事件8、按键事件9、样式处理10、动态行内式二、过渡...
  • Vue.js基本常用指令

    2020-12-16 09:58:03
    v-text指令和v-html很简单,v-text是用于渲染普通文本,无论何时,绑定数据对象上 msg属性发生了改变,插值处内容都会更新。 如果你想输出真正 HTML,你需要使用 v-html指令,v-text仅渲染标签,不能解析 ...
  • 1.vue常用指令 1.v-once 能执行一次性地插值,当数据改变时,插值处内容不会更新。但请留心这会影响到该节点上其它数据绑定 2.v-show v-if一样 区别是if是注释掉 v-show是给一个display:none属性 让它不...
  • Vue指令及是事件修饰符Vue常用指令其他基础指令v-model利用v-model制作简易计算器利用指令添加CSS样式v-for注意事项v-if 与 v-show两者之间区别事件修饰符.stop 防止事件冒泡.prevent 阻止默认行为.capture 捕获...
  • vue常用指令 v-text 解析输出变量 不解析标签 v-html 解析输出变量 解析标签 v-if 条件输出 不符合元素就不渲染 用于初始渲染数据筛选 v-show 条件输出 将元素全部渲染出来 不符合给隐藏掉 用于选项卡...
  • 本篇博客会继续给大家介绍八大 Vue 常用指令两个指令(v-for v-model) 一、v-bind指令(绑定元素样式属性) 1、v-bind 指令的基本用法 2、v-bind 指令的简化写法 二、v-for指令(遍历对象)
  • vue自定义指令

    2018-12-01 00:04:46
    其实vue提供了自定义指令可以自己写类似v-demo这样的指令,用法和常用的指令相同。 vue提供了directive方法来给我们创建自定义指令。用法如下: 先新建一个n.js文件。 Vue.directive('n',{ /*插入数据时触发*/ ...
  • vue的初级用法

    2020-08-19 18:55:00
    vue的初级用法vue的基本介绍常用指令插值表达式v-cloakv-textv-htmlv-bindv-on vue的基本介绍 new Vue({ el : "选择器", data : {} }) el:用来标记使用vue来管理dom对象 一般是选择器 但是 不能使用html...
  • VUE常用特性

    2020-12-14 21:42:58
    1、基于vue的表单操作 input 单行文本 textarea 多行文本 select 单选框 checkbox 多选框 2.表单域修饰符 number:转化为数值 trim:去掉开始结尾空格 lazy:将input转换为change事件 3.自定义指令 3.1为何需要...
  • 本篇主要是为了介绍如何使用之前撸的三个vue在移动端常用的组件,现已开源,欢迎大家使用:一个基于vue的浮窗组件,可在屏幕内自由拖拽,拖拽后的位置即可不变,也可在移动过程中手指释放浮窗横向贴边。Example移动...
  • vue基础用法

    2020-07-19 19:24:14
    文章目录准备工作1. vue.js快速入门使用1.1 vue.js库下载1.2... Vue对象提供属性功能3.1 过滤器3.1.1 使用Vue.filter()进行全局定义3.1.2 在vue对象中通过filters属性来定义3.4 计算属性侦听属性3.4.1 计算属性
  • Vue 基本用法

    2018-12-19 15:52:00
    Vue的基本用法 模板语法{{ }} 关闭掉 django中提供模板语法{{ }} 指令系统 v-text v-html v-showv-if v-bindv-on v-for v-model 双向数据绑定 Vue的常用属性 data:function(){} el ...
  • vue是一个mvvm框架,angular类似,但比较小巧,容易上手,尤其适用于移动端项目。vue的通常用法为一片html代码配合上json,再new出来vue实例即可。vue与angular共同点是均不兼容低版本IE浏览器(如IE6,7,8...
  • vue - 基本用法

    2019-02-25 22:22:46
    2.vue常用的指令 v-mode 双向数据的绑定,一般用于表单元素 v-for 对数组或对象进行循环操作 v-on 用来把绑定事件,用法:v-on:事件名 = 函数 v-show / v-if 用来显示或隐藏元素,v-show是通过display...
  • vue

    2020-11-23 00:30:58
    Vue.js的常用指令 v-bind指令 :绑定属性样式 v-model指令:双向数据绑定 v-on指令 v-if指令 v-show指令 v-else指令 v-for指令 vue生命周期在工作中的用法 beforeCreate():实例在内存中被创建出来,还没有初始...
  • 今天要写的是 vue.js 里面两个很常用的指令:v-model v-for 。 1、v-model v-model 是 vue.js 里面唯一一个可以实现数据双向绑定的指令。 v-model 只能通过表单元素实现与用户的交互,也就是说, v-model 只能...
  • 本课程主要讲解vue实例常用属性方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间通信、使用axios发送http请求、使用Vue Router实现路由控制,使用webpack打包工具的用法、ES6语法、webpack与...
  • vue面试题

    2021-03-16 20:26:20
    二、vue中父子组件如何传值的三、v-show 和 v-if 指令的区别和不同点说出vue中的指令和他的用法5、vue-loader是什么?使用他的用途6、axios是什么?怎么使用7.单页面和多页面应用的区别以及优缺点8.简述一下vue常用...
  • 12. vue基础原理

    2020-08-11 10:28:33
    一、Vue使用 (一) 基本使用,组件使用-常用,必须会 [1]. 指令、插值 插值、表达式 指令、动态属性 ... [2]. computedwatch ...computed 有缓存,data不变则不会重新计算 ...v-if v-else的用法,可使用变量,也可以使
  • VUE笔记

    2020-11-23 08:34:46
    2、简述vue常用的指令(最少写出六个) ​ v-html 解析输出变量 能解析html ​ v-text 解析输出变量 ​ v-bind 给标签绑定属性 可以简写为 :属性名=“变量” ​ v-on 给元素绑定事件 用法 v-on:事件名=“方法名” ...
  • 1-1 vue的指令 01.v-cloak指令用法 02.v-cloakv-text的区别 03.什么是双向数据绑定,双向绑定的使用场景 04.事件函数的调用,事件函数参数传参 05.事件修饰符 06.常用按键修饰符 07.表单域修饰符用法 第二章 ...
  • 面试题总结(一)

    2021-04-14 08:21:20
    vue常用的指令和用法 1.v-model:双向数据绑定,一般用于表单元素 2.v-for:对数组和对象进行循环操作 3.v-on:进行事件的绑定,v-on:事件名 = ‘事件函数’。简写 @事件名 = ‘事件函数’ 4.v-if/v-show =
  • vue2.0知识点汇总

    千次阅读 2017-12-13 13:32:39
    vue常用指令 class结合v-bind使用 methods v-on使用 v-on高级用法 v-for使用 简单学生添加删除案例 父子组件使用父传子 父组件向自组件传递数据 子组件向父组件通信vuebus vue高级 vue过滤器 获取DOM元素 vue...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

vue常用的指令和用法

vue 订阅