Vue.js

最新推荐文章于 2022-07-25 20:49:17 发布

zhisais

最新推荐文章于 2022-07-25 20:49:17 发布

阅读量486

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhisais/article/details/70666243

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue_1

Vue的特点
Vue的基本结构
什么是指令
熟悉以下指令
- v-model
- v-for
- v-show
- v-on

MVVM模型

        /
        <script>
            window.onload = function () {
                var c = new Vue({
                    el:'#box',
                    data:{
                        message:'hello, Vue!',
                        arr:['apple','juice','banana'],
                        json:{
                            name:'lucy',age:23,place:'chongqing'
                        },
                        msg2: true
                    },
                    methods:{
                        clickShow:function () {
                            this.msg2===false ? this.msg2=true : this.msg2 = false;
                        },
                        clickAdd:function () {
                            this.arr.push(this.message);
                        }
                    }
                })
            }
        </script>
        <body>
            <div id="box">
                {{message}}
                <br />
                <input type="text" value="message" v-model='message' />
                <br />
                {{message}}
                <br />
                {{arr}}
                <br />
                {{arr[0]}}
                <br />
                {{json}}{{json.name}}
                <ul>
                    <li v-for="(k,v,index) in json" :key="json.id" v-show="msg2">
                        {{k}}&nbsp;{{v}} {{index}}
                    </li>
                </ul>
                <button v-on:click="clickShow()">显示隐藏内容</button>
                <button v-on:click="clickAdd()">添加一个内容</button>
           </div>
     </body>

Vue_2

事件

事件绑定

用法：使用v-on:click=” 或者简写@click=”

var vue = new Vue({
        el:'#dd',
        methods:{
            fun1:function{
                alert(1);
            }
        }
    })
    <div id='dd'>
        <input type='text' @click='fun1'>
    </div>

事件对象

用法 fun1($event)

var vue = new Vue({
    el:'#dd',
    methods:{
        fun1:function(ev){
            alert(ev.clientX);
        }
    }
})
<div id='dd'>
    <input type='text' @click='fun1($event)'>
</div>

阻止冒泡

@click.stop=’fun1’

    //Vue的写法
    var vue = new Vue({
            el:'#dd',
            methods:{
                fun1:function(){
                    alert(1);
                },
                fun2:funtion(){
                    alert(2);
                }
            }
        })
        <div id='dd' @click='fun2'>
            <input type='text' @click.stop='fun1()'>
        </div>
    -----------------------------------------------------
    //原生Js的写法
    var vue = new Vue({
        el:'#dd',
        methods:{
            fun1:function(ev){
                ev.cancelBubble=true;
                alert(1);
            },
            fun2:funtion(){
                alert(2);
            }
        }
    })
    <div id='dd' @click='fun2'>
        <input type='text' @click='fun1($event)'>
    <div>

阻止默认事件

Vue的写法
```
@contextmenu.prevent='fun1()';
```

原生Js的写法

fun1:function(ev){
    ev.preventDefault();
}

键盘事件绑定特殊按键

@keydown.enter='fun1' / @keydown.13='fun2'

属性

一般属性的绑定

用法： v-bind:attribute = ‘dd’ 或者简写成：attribute =’dd’

var vue = new Vue({
        el:'#dd',
        data:{
            url:'a.png'
        }
    })
<div id='dd'>
    <img :src='url'>
</div>

class 属性的绑定

    <style>
        .a{
            color:red;
        }
        .b{
            backgroundcolor:blue;
        }
    </style>

用法一： :class= ‘[data里的数据]’

var vue = new Vue({
            el:'#dd',
            data:{
                class1:a;                       }
        })
    <div id='dd'>
    <p :class='[class1]'></p>

用法二：：class= ‘{a:true,b:false}’ 绑定一个Json数组

//此时a样式起作用，b样式不起作用
<div id='dd'>
<p :class='{a:true,b:false}'></p>
--------------------------------------------------------
//当然也可以这样写

var vue = new Vue({
    el:'#dd',
    data:{
    g:true,
    h:false                     }
})
<div id='dd'>
<p :class='{a:g,b:h}'></p>

用法三：：class=’json’

var vue = new Vue({
    el:'#dd',
    data:{
        json:{
                a:true,
                b:false;
             }                      
    }
})
<div id='dd'>
<p :class='json'></p>

style 属性的绑定

用法一： :style= ‘[a,b]’ a,b同样是数据

var vue = new Vue({
    el:'#dd',
    data:{
        a:{color:red},
        //复合样式必须遵循驼峰式命名
        b:{backgroundColor:blue}                
    }
})
<div id='dd'>
<p :style='[a,b]'></p>

用法二： :style=’json’

var vue = new Vue({
    el:'#dd',
    data:{
        a:{
            color:red,
            backgroundColor:blue
        }           
    }
})
<div id='dd'>
<p :style='a'></p>

模板

基本写法 {{message}}，双向绑定，动态更新
只更新一次的写法v-once=’message’
转义html标签的写法v-html=’message’

过滤器

Vue 2.0当中去除了内置的过滤器

过滤器注册 ,提供的全局的过滤器注册组件，具体使用方法看下例：

window.onload = function () {
   Vue.filter('cap',function (value) {
      return value.toUpperCase();
   });
    var vue = new Vue({
       el:'#dd',
       data:{
          message:'asdfgh'
       }
   });
}
<div id ='dd' >
    <input type="text"  v-once="message" v-model="message"/><br />
    //前台数据显示ASDFGH
    <p>{{message | cap}}</p>
 </div>

zhisais

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

Vue_1Vue的特点Vue的基本结构什么是指令熟悉以下指令 v-modelv-forv-showv-onMVVM模型 / <script> window.onload = function () { var c = new Vue({ el:'#box',
复制链接

扫一扫