vue快速复习手册 - Web

TOP

vue快速复习手册(一)

2019-09-17 19:00:09 【大中小】浏览:64次

1.基本使用

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Vue的基本使用</title>
    <!-- 01.导包 -->
    <script src="./js/vue.js"></script>
    <script>
        // 03. 监听
        window.onload = function () {
            // 04:创建vue
            var vm = new Vue({
                // 绑定操作对象
                el:'.box',
                data: {
                    content: 'Vue的基本使用'
                }
            });
        }
    </script>
</head>
<body>
    <!-- 02:div标签(设置模板变量)-->
    <div class="box">{{content}}</div>

</body>
</html>

View Code

2.基本语法

2.1.操作数据

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>操作数据</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve对象
            var vm = new Vue({
                el:'.box',
                data:{
                    content:'操作数据'
                }
            });
        }
    </script>
</head>
<body>

    <div class="box">
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

2.2.修改属性

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>02-操作数据</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve对象
            var vm = new Vue({
                el:'.box',
                data:{
                    content:'操作数据',
                    linkdata:'百度链接',
                    url:'http://www.baidu.com'
                }
            });
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 第一种. v-bind: -->
        <!-- <a v-bind:href="url" target="_blank">{{linkdata}}</a> -->
        <!-- 第二种. : -->
        <a :href="url" target="_blank">{{linkdata}}</a>
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

2.3.调用方法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>操作数据</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve对象
            var vm = new Vue({
                // 标签对象
                el:'.box',
                // 数据和属性
                data:{
                    content:'操作数据',
                    linkdata:'百度链接',
                    url:'http://www.baidu.com',
                    count:0
                },
                // 方法
                methods: {
                    fnAddClick:function () {
                        // 跨域
                       this.count += 1; 
                    }
                }

            });
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 第一种.v-on: -->
        <!-- <button v-on:click='fnAddClick'>计数器:{{count}}</button> -->
        <!-- 第二种.@ -->
        <button @click='fnAddClick'>计数器:{{count}}</button>
        <a v-bind:href="url" target="_blank">{{linkdata}}</a>
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

小结：v-bind:简写: v-on: 简写@

3.条件渲染

关键字：v-if，v-else-if，v-else，v-show

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'.box',
                data:{
                    flag:4
                }
            });
        }
    </script>
</head>
<body>
    <div cl

首页上一页 1 2 3 下一页尾页 1/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：面试题-JavaScript交换两个变量的..	下一篇：jquery.dataTables的探索之路-服..