Vue基本指令

文章目录 收缩

0.定义Vue基本html结构

<script src="https://cdn.bootcss.com/vue/2.4.0/vue.js"></script>
<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg2"></p>
    <p v-bind:title="title">看title</p>
    <p :title="title">看title</p>
    <input type="button" value="按钮" v-on:click="show">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello,vue',
            msg2:'<h1>hello,vue</h1>',
            title:'title测试',
        },
        methods: {
            show:function(){
                alert('你点到我了!');
            }
        },
    });
</script>

1.插值表达式 和 v-text

插值表达式:

<p>{{msg}}</p>

v-text:

<p v-text="msg"></p>

2.v-html

跟v-text类似,但支持html标签解析。

3.v-bind

属性绑定机制,缩写是::

4.v-on

事件绑定机制,缩写是:@

5.v-model

v-bind只能实现数据的单项绑定,无法实现数据的双向绑定
v-model可以实现数据的双向绑定

    <div id="app">
        <p>{{ msg }}</p>
        单项绑定:<input type="text" :value="msg" ><br>
        双向绑定:<input type="text" v-model:value="msg">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                'msg':'从小爱吃零食,长大为人正直~~'
            }
        });
    </script>

注:v-model只能运用在表单元素中

6.v-for指令

循环普通数组
不带索引:

    <div id="app">
        <p v-for="item in list">{{item}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5]
            }
        });
    </script>

带索引:

    <div id="app">
        <p v-for="(item,i) in list">{{i}}:{{item}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5]
            }
        });
    </script>

注:其中i为索引值

循环对象数组

    <div id="app">
        <p v-for="item in list">姓名:{{item.name}},年龄:{{item.age}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[
                    {'name':'张三','age':18},
                    {'name':'李四','age':20},
                ]
            }
        });
    </script>

循环对象

    <div id="app">
        <p v-for="(value,key) in user">键:{{key}},值:{{value}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'张三',
                    age:'18'
                }
            }
        });
    </script>

带索引:

<p v-for="(value,key,i) in user">键:{{key}},值:{{value}},索引:{{i}}</p>

迭代数字:

   <p v-for="count in 10">{{count}}</p>

注:count值从1开始

2.2.0+的版本里,当在组件中使用v-for时,key是必须的,key只接受string/number
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key属性。

7.v-if 和 v-show

每次都会重新删除或创建元素。有较高的切换性能消耗。
每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none样式

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <p v-if="flag">从小爱吃零食</p>
    <p v-show="flag">长大为人正直</p>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            flag:true
        }
    });
</script>

修饰符

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

自定义按键修饰符:

Vue.config.keyCodes.f1 = 112

过滤器

Vue.js允许自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache插值和v-bind表达式,过滤器应该被添加在JavaScript表达式的尾部,由管道符:| 指示。

全局过滤器

Demo1:字符串替换

<div id="app">
    <p>{{ msg | msgFormat('水果')}}</p>
</div>
<script>
    Vue.filter('msgFormat',function(str,args){
        return str.replace(/零食/g,args);
    })

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'从小爱吃零食,长大也爱吃零食'
        }
    })
</script>

Demo2:设置时间格式

<div id="app">
    <p>当前时间:{{ ctime | dateFormat}}</p>
</div>
<script>

    Vue.filter('dateFormat',function(timestr){
        var t = new Date(timestr)
        var y = t.getFullYear()
        var m = (t.getMonth()+1).toString().padStart(2,'0');
        var d = (t.getDay()).toString().padStart(2,'0');
        return `${y}-${m}-${d}`  //ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来
    })

    var vm = new Vue({
        el:'#app',
        data:{
            ctime:new Date()
        }
    })
</script>

私有过滤器

私有过滤器调用的时候,如果私有过滤器与全局过滤器名称一致,则优先调用私有过滤器。

<div id="app">
    <p>{{ msg | msgFormat}}</p>
</div>
<script>
    Vue.filter('msgFormat',function(str){
        return str.replace(/零食/g,'水果');
    })

    var vm = new Vue({
        el:'#app',
        data:{
            msg:'从小爱吃零食,长大也爱吃零食',
            ctime:new Date()
        },
        filters:{
            msgFormat:function(str){
                return str.replace(/零食/g,'冰粉');
            }
        }
    })
</script>

结果:从小爱吃冰粉,长大也爱吃冰粉

自定义指令

使用vue.directive定义全局指令

以下示例通过在input输入框中添加v-focus指令,实现页面加载后,自动获取焦点功能。

<div id="app">
搜索:<input type="text" id="search" v-focus>
</div>
<script>
//使用vue.directive定义全局指令,第一个参数为指令的名称,前面不需要加v-,但调用的时候要加上v-前缀
Vue.directive('focus', {
    //每当指令绑定在元素上的时候,会立即执行bind函数,只执行一次
    //在每个函数中都有一个el参数,是一个原生的js对象
    bind:function(el){
    console.log('触发bind函数~')

    },
    //元素插入到DOM中的时候触发,也只触发一次
    inserted:function(el){
    el.focus()
    console.log('触发inserted函数~')
    },
    //当VNode更新的时候触发,可能会触发多次
    updated:function() {
    console.log('触发updated函数~')
    },
})


var vm = new Vue({
    el:'#app',
    data:{

    }
})
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注