为了账号安全,请及时绑定邮箱和手机立即绑定

Vue快速入门-1-Vue的简单使用

标签:
AngularJS

目录:

1. 简单的将数据渲染到DOM

2. Vue的"v-"指令

3. "v-if"指令的使用

4. "v-for"指令的使用

5. Vue的事件处理

6. "v-model:value"实现双向数据绑定

7. Vue实现逆转字符串

8. Vue 动态添加class属性,以及三目运算.

9. "v-bind:style"指令定义内联样式

10. 指令支持数组

11. Vue实例各个生命周期的钩子函数

简单的将数据渲染到DOM

        <div id="app">

            {{message}}                             -- 使用"{{}}"将数据渲染到DOM

        </div>

        <script type="text/javascript">

            var app = new Vue({                     -- 创建Vue实例

                el: '#app',                         -- 通过属性绑定元素

                data:{

                    message: 'Hello Vue!',          -- 设置上下文

                }

            })

        </script>

Vue的"v-"指令

    通过"v-"用来绑定属性,然后对属性值进行操作

        <div id="app" v-bind:title='vueTitle'>      -- 使用"v-"时不需要再使用"{{}}"渲染

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    vueTitle: 'vue data vueTitle'

                }

            })

"v-if"指令的使用

    只用来判断真假(true|false)

        <div id="app">

            <p v-if="seen">如果是true则可以显示</p>         -- 如果seen的值为true则显示p标签,如果为false则不显示

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    seen:true,

                }

            })

        </script>

"v-for"指令的使用

        <div id="app">

            <ul>

                <li v-for="item in list">       -- item就是for从list中取出来的变量,仔细看看其实和普通的for循环一样

                    {{item}}                    -- 如果循环的是一个字典类型数据,通过 "item." 获取value

                </li>

                </ul>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    list:["Item A","Item B","Item C"]

                }

            })

        </script>

Vue的事件处理

    通过"v-on"指令,处理click的事件

    所有的事件触发时执行的函数,都需要写到Vue实例的的methods选项中,

        <div id="app">

            <p>{{message}}</p>

            <button v-on:click="showmessage">显示消息</button>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    message: 'Hello Vue!'

                },

                // 所有的函数都定义在methods

                methods:{

                    showmessage:function(){

                        this.message = "Hello World!"

                    }

                }

            })

        </script>

"v-model:value"实现双向数据绑定(就是不同标签中的内容是相同的)

        <div id="app">

            <p>{{message}}</p>

            <input v-model:value="message" />       -- input标签和p标签互相随对方改变

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    message: 'Hello Vue!'

                },

            })

        </script>

Vue实现逆转字符串

        <div id="app">

            <p>{{message}}</p>

            <button v-on:click="reverse">逆转消息</button>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    message: 'Hello Vue!'

                },

                methods:{

                    reverse:function(){

                        this.message = this.message.split('').reverse().join('')        -- Vue逆转字符串,类似python中,先将字符串转换为序列,然后翻转列表,最后在join为字符串

                    }

                }

            })

        </script>

Vue 动态添加class属性,以及三目运算.

    动态添加class属性

        <style type="text/css">

            .active{

                background-color: #0f0;

            }   

        </style>

        <body>

            <div id="app">

                <!-- 支持三目运算符 -->

                <p v-bind:class="{Vactive:isActive}">我是P标签</p>      -- 当isActive为true时,class属性才会等于"Vactive",然后将引用上面style定义的CSS样式

            </div>

            <script type="text/javascript">

                var app = new Vue({

                    el: '#app',

                    data:{

                        isActive:true,

                        Vactive:'active'

                    }

                })

            </script>

        </body>

    三目运算

        <style type="text/css">

            .active{

                background-color: #0f0;

            }

            .error{

                background-color: #f00;

            }

        </style>

        <body>

            <div id="app">

                <!-- 支持三目运算符 -->

                <p v-bind:class="isActive ? Vactive:Verror">我是P标签</p>       -- 当isActive为true时,引用Vactive的值,为false时,引用Verror的值

            </div>

            <script type="text/javascript">

                var app = new Vue({

                    el: '#app',

                    data:{

                        isActive:true,

                        Vactive:'active',

                        Verror:'error',

                    }

                })

            </script>

        </body>

"v-bind:style"指令定义内联样式

    "v-bind"可以简写为":",所以"v-bind:style"可以写为":style"

        <body>

            <div id="app">

                <p :style="styleObject">我是P标签</p>

            </div>

            <script type="text/javascript">

                var app = new Vue({

                    el: '#app',

                    data:{

                        /* Vue的内联样式采用的json格式,而且要使用驼峰命名法,

                         * 和CSS以"-"命名";"结尾是不一样的

                        */

                        styleObject:{

                            backgroundColor: '#00f',

                            fontSize: '20px',

                        }

                    }

                })

            </script>

        </body>

指令支持数组

    <style type="text/css">

        .active{                                            -- 11.1

            background-color: red;

        }

        .error{                                             -- 因为".error"在".active"后面,所以:".error"的优先级最高.

            background-color: blue;

        }

    </style>

    <body>

        <div id="app">

            <p :class="items">我是P标签</p>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    items:['active','error'],           -- 如果数组中多个变量的CSS属性冲突,则按照DOM从上往下读的原则,后面的CSS样式优先级高,此例".error"的优先级高,

                }                                       -- 注意,优先级与数组的顺序无关,而是标签<style>中的CSS顺序,因为浏览器是不会识别Vue的,Vue最终还是转换为了html语言

            })

        </script>

    </body>

Vue实例各个生命周期的钩子函数

    通俗讲,就是在Vue实例运行的各个阶段可以使用的函数

    比如:

        在Vue实例创建时可以执行created函数

        在Vue实例被挂载到DOM时可以执行mounted函数

        在Vue实例更新时,可以执行updated函数

        <div id="app">

            {{message}}

            <button @click="change">单击更新message</button>            -- "v-on"指令可以简写为"@",所以这里的"v-on:click"简写为了"@click"

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el: '#app',

                data:{

                    message:'hello vue!'

                },

                methods:

                    change:function(){                              -- 点击button按钮时执行change函数 

                        this.message = 'hello world!'               -- 更改message的值

                    }

                },

                // 钩子函数,不用写在methods中

                created:function(){

                    console.info('Vue对象创建时被调用!');           -- 信息被输入到console控制台

                },

                mounted:function(){

                    console.info('Vue对象挂载到dom元素时执行!');

                },

                updated:function(){

                    console.info('data数据被更新的时候执行');

                }

            })

        </script>

©著作权归作者所有:来自51CTO博客作者小生博客的原创作品,如需转载,请注明出处,否则将追究法律责任


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消