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

发布时间:2020-08-03 20:04:56 作者:小生博客
来源:网络 阅读:581

小生博客:http://xsboke.blog.51cto.com

            -------谢谢您的参考,如有疑问,欢迎交流

目录:

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实例各个生命周期的钩子函数
  1. 简单的将数据渲染到DOM
        <div id="app">
            {{message}}                             -- 使用"{{}}"将数据渲染到DOM
        </div>
        <script type="text/javascript">
            var app = new Vue({                     -- 创建Vue实例
                el: '#app',                         -- 通过属性绑定元素
                data:{
                    message: 'Hello Vue!',          -- 设置上下文
                }
            })
        </script>
  1. 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'
                }
            })
  1. "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>
  1. "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>
  1. 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>
  1. "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>
  1. 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>
  1. 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>
  1. "v-bind:style"指令定义内联样式
    "v-bind"可以简写为":",所以"v-bind:style"可以写为":style"

        <body>
            <div id="app">
                <p :>我是P标签</p>
            </div>

            <script type="text/javascript">
                var app = new Vue({
                    el: '#app',
                    data:{
                        /* Vue的内联样式采用的json格式,而且要使用驼峰命名法,
                         * 和CSS以"-"命名";"结尾是不一样的
                        */
                        styleObject:{
                            backgroundColor: '#00f',
                            fontSize: '20px',
                        }
                    }
                })
            </script>
        </body>
  1. 指令支持数组
    <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>
  1. 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>
推荐阅读:
  1. Docker入门与简单使用
  2. AppleScript 快速入门

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue 前端 jquery

上一篇:APICloud中集成openinstall

下一篇:mysql数据库基础命令结尾

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》