Vue2.0-上篇

最新推荐文章于 2024-08-14 20:51:47 发布

Little-Gao

最新推荐文章于 2024-08-14 20:51:47 发布

阅读量652

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 数据绑定事件机制生命周期

本文链接：https://blog.youkuaiyun.com/sinat_24227777/article/details/76850525

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue2.0的基础知识，包括Hello-World示例，数据绑定的v-model、v-for等指令，条件渲染的v-if与v-show，事件处理，键盘事件，动态绑定数据以及组件的生命周期。通过这些内容，读者可以掌握Vue2.0的核心概念。

Vue官方文档

Hello-World

{{ }}花括号解析数据

<div id="app">
    {{msg}}
</div>

<script type="text/javascript">
    //声明一个Vue的实例vm
    var vm=new Vue({
        //el属性，表示将vm实例挂载到 id=app的元素中
        el:'#app',
        //data属性，存放vm实例的数据
        data:{
            msg:'welcome to wuhan'
        }
    });
</script>

数据绑定

v-model、v-once、v-html

双向数据绑定，必须满足视图可以更改，泛指表单元素input，都需要增加v-model属性。在Vue中，指令以v-开头。

<div class="app">

    <!-- 双向数据绑定-->
    <input type="text"  v-model="msg">

    <!-- 表达式： 三元表达式、 赋值、运算 不支持逻辑if else-->
    {{msg=='Hello'?200:msg}}   {{age=100}}  {{1+3}}

    <!-- 绑定一次 Vue2.0写法-->
    <div v-once>{{msg}}</div>

    <!-- 如果绑定的数据是html需要转换成html标签 Vue2.0写法-->
    <div v-html="msg"></div>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'.app',
        data:{
            msg:'Hello',
            age:0
        }
    });
</script>

绑定数据arr

v-for

<div id="app">
    <!-- 要重复谁 就在谁身上用v-for-->
    <ul>
        <li v-for="(val,index) in arr">
            {{val}} {{index}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            arr:['iphone','motorola','iphone']
        }
    });
</script>

绑定数据obj

v-for

<div id="app">
    <ul>
        <li v-for="(val,key) in obj">
            {{val}} {{key}}
        </li>

        <!-- 如果v-for不使用(),那就是val。 使用小括号在在2.0中是(val,key),1.0中是(key,val) -->
        <li v-for="val in obj">
            {{val}} 
        </li>
    </ul>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            obj:{name:'jack',age:'18',city:'wuhan'}
        }
    });
</script>

show-if

v-show、v-if

v-show：如果为false，则display:none 。用于频繁切换显示或者隐藏。

v-if：如果为false，则removeChild 。　用于不频繁切换时，判断数据是否存在。

<div id="app">
    <!--真的消失、样式上的消失-->
    <div v-show="flag">是否为true 为true显示 否则消失</div>
    <div v-if="obj">{{obj.name}}</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            obj: undefined
        }
    });
</script>

事件机制

@click、@click.stop、 @click.prevent

方法可带(),也可不带。加括号一般用于传递参数，不传参就不加括号。v-on:click简写 @click。

<div id="app">
    <div @click="fn('parent')">
        parent
        <!-- .stop修饰符，修饰@click-->
        <!--@click.stop 阻止冒泡事件，否则点击child，parent也会监测到点击事件-->
        <div @click.stop="fn('child')">child</div>
    </div>
    <!--@click.prevent阻止事件的默认传递，触发fn1后，不会跳转页面-->
    <a href="http://www.baidu.com" @click.prevent="fn1">跳转到百度</a>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            fn(data) {
                alert(data);
            },
            fn1() {
                alert('稍后跳转');
            }
        }
    });
</script>

键盘事件

@keydown

<div id="app">
    <!--修饰符减少代码体积 @keydown.enter @keydown.13是等效的-->
    <!--常见修饰符.enter,.tab,.delete,.esc,.space,.up,.down....,键值-->
    <input type="text" @keydown.enter="fn">
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        methods:{
            fn(e){
                alert('按下回车键了');
            }
        }
    });
</script>

动态绑定数据

如果想要绑定动态数据，需要使用bind。v-bind简写‘:’

<div id="app">

    <!--<img v-bind:src="attr">-->
    <img :src="attr" :title="title" :width="w">
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            attr: 'http://www.baidu.com/img/bd_logo1.png',
            title: '小程序',
            w: '200px'
        }
    });
</script>

动态绑定class，style

v-bind:class 绑定的是类名，对应的类名已经事先设置好样式了，例如下面的.back和.color。

v-bind:style 绑定的是具体的行内样式。

<head>
    <meta charset="UTF-8">
    <title>动态绑定class</title>
    <script src="vue2.0.js"></script>
    <style type="text/css">
        .back{
            background: red;
        }
        .color{
            color: #f0ad4e;
        }
    </style>
</head>

<div id="app">
    <!--:class绑定style-->
    <!--对象：根据boolean类型增加样式-->
    <div :class="{back:flag,color:!flag}">对象：绑定class</div>
    <!--数组-->
    <div :class="[back1,color1]">数组：绑定class</div>

    <!--:style绑定行内样式-->
    <!--对象-->
    <div :style="{background:'yellow',color:'blue'}">对象：绑定style</div>
    <!--数组-->
    <div :style="[a,b]">数组：绑定style</div>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            a:{
                fontSize:'24px'
            },
            b:{
                background:'wheat'
            },
            back1:'back',
            color1:'color',
            flag:false
        }
    });
</script>

生命周期

挂载后，即调用mounted()后，数据就会显示在页面中

挂载成功后，点击修改按钮，修改前会触发beforeUpdate()，修改完成后触发updated()，然后就可以看到页面中的zzz变成了hello

若vm实例调用销毁函数，即vm.$destroy()，会触发beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed->页面显示zzz，此时点击修改按钮无效，因为实例vm已经销毁。

<div id="app">
    {{msg}}
    <button type="button" @click="update">修改</button>
</div>
<script src="vue2.0.js"></script>
<script type="text/javascript">
    //钩子函数-->完成一个状态以后，调用的函数
    var vm=new Vue({
        //el:'#app',//如果没有el元素，是无法进行编译的
        data:{
            msg:'zzz'
        },
        methods:{
            update(){
                this.msg='hello';
            }
        },
        beforeCreate(){
            alert('初始化之前');
        },
        created(){
            alert('初始化完成');
        },
        beforeMount(){
            alert('挂载前');
        },
        mounted(){
            alert('挂载后');
        },
        beforeUpdate(){
            alert('修改前');
        },
        updated(){
            alert('修改后');
        },
        beforeDestroy(){
            alert('销毁前')
        },
        destroyed(){
            alert('销毁后')
        }
    });
    vm.$mount('#app');//手动挂载，绑定范围 等价于el:'#app',
    //vm.$destroy();//强制让实例销毁，但是编译好的数据不会销毁
    console.log(vm)
</script>