Vue起步

Vue.js是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javascript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue官方视频介绍推荐观看。

起步

首先创建一个.html文件，然后通过以下方式引入Vue:

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue的核心就是通过简洁的模板语法来声明式地将数据渲染到DOM的系统中:

<div id="app">
        <h2>{{ books }}</h2>
    </div>

const app = new Vue({
    el:'#app',
    data:{
        books:'《Vue》',
    }
});

《Vue》

我们已经成功创建了第一个Vue应用！看起来这跟字符串模板非常类似。现在数据和DOM已经建立了关联，所有的东西都是响应式的。打开浏览器的 JavaScript 控制台，并修改 app.books 的值，你将看到上例相应地更新。

绑定元素特性

除了文本值的插入，我们还可以像这样来绑定元素特性：

<div id="app">
    <span v-bind:title='time'>
        鼠标悬停，显示信息
    </span>
</div>

const app = new Vue({
    el:'#app',
    data:{
        time: '页面加载于' +  new Date().toLocaleString(),
    }
})

v-bind:被称为指令，指令带有v-前缀，以表示他们是vue提供的特殊特性。v-bind:的意思是将这个元素的属性(title)特性和Vue实例time属性保持一致。

条件判断

控制切换一个元素是否显示也相当简单:

<div id="app">
    <div id='block' v-if="seen" style="width: 200px;height: 200px;background-color: orange">

    </div>
    <button v-on:click="isShow">显示/隐藏</button>
</div>

var app = new Vue({
    el : "#app",
    data:{
        seen:true,
    },
    methods:{
        isShow:function() {
            this.seen = !this.seen;
        }
    }
});

通过该示例，我们不仅可以把数据绑定到DOM元素的文本和属性，还可以绑定到DOM的结构

循环

<div id="app">
    <ul>
        <li v-for="book in books">
            {{ book }}
        </li>
    </ul>

    <hr>

    <ul>
        <li v-for="(todo,index) in todos">
            {{ index+1 }}  - {{ todo.text }}
        </li>
    </ul>
</div>

var app = new Vue({
    el:"#app",
    data:{
        books:["python","java","c++","c#","c"],
        todos:[
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ]
    }
});

通过v-for，我们可以绑定数据数据来渲染一个项目的列表。

事件监听

通过v-on来实现用户和应用的交互。

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

const app = new Vue({
    el : "#app",
    data:{
        message:"Hello Vue",
    },
    methods:{
        reverseMessage:function (argument) {
            this.message = this.message.split('').reverse().join('');
        }
    }
});

在reverseMessage方法中，我们更新了应用的状态，但没有触碰DOM---所有的DOM操作都有Vue去处理，我们只需要关注逻辑层面即可

处理用户输入

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

const app = new Vue({
    el : "#app",
    data:{
        message:"Hello Vue",
    },
});

总结

模板语法

文本-数据绑定 {{ message }}
JavaScript 表达式 {{ 1+1 }}/{{ ok ? 'YES' : 'NO' }}
元素属性绑定 v-bind 缩写一个冒号:
事件监听 v-on 缩写@
Focusing on what is best for the community
Showing empathy towards other community members

附赠小案例

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue"></script>
    <style type="text/css">
        *{
            
            background-color: #ccc;
        }

        #app{
            width: 100%;
            margin: 0 auto;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img :src="nowImg" width="280px" height="165px" style="border-radius: 10px;">
        <ul>
            <li :class="{ red:index==count }"   v-for="(img,index) in images" @click="changeImg(index)">
                {{ index+1 }}
            </li>
        </ul>

    </div>
</body>

<script type="text/javascript">
    const app = new Vue({
        el:"#app",
        data:{
            isActive:true,
            count:0,
            nowImg:'img/google.png',
            images:[
                {img:'img/google.png'},
                {img:'img/facebook.png'},
                {img:'img/youtube.png'},
                {img:'img/gmail_custom.png'},
            ]
        },
        methods:{
            changeImg:function (index) {
                this.count = index;
                this.nowImg = this.images[index].img;
            },
        }
    });
</script>
</html>

仿新浪导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="lib/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .orange{
            color: orange;
        }
        .header{
            width: 1000px;
            margin: 0 auto;
            height: 40px;
            border-bottom: 1px solid #ccc;
        }
        
        .header-left{
            list-style: none;
            position: relative;
        }
        .header-left .li-left{
            text-align: center;
            font-size: 12px;
            line-height: 40px;
            float: left;
            margin-right: 20px;
        }
        .header a{
            display: block;
            color: #333;
            text-decoration: none;
            width: 100%;
            height: 40px;
            padding: 0px 5px;

        }
        .header a:hover{
            background-color: #eee;
            color: orange;
        }
        .header .phone-client{
            position: relative;
            text-align: center;
            font-size: 12px;
            line-height: 40px;
            float: left;
            margin-right: 20px;
        }
        ul{
            list-style: none;
        }
        .phone-client-menu li a{
            padding: 0px 4px;
            border: 1px solid #ddd;
            border-top: none;
        }
        .phone-client-menu li{
            text-align: center;
        }
        .isHidden{
            display: none;
        }


        .header-right{
            float: right;
            margin-right: 0px;
        }
        .header-right{
            list-style: none;
        }
        .header-right .li-left{
            text-align: center;
            font-size: 12px;
            line-height: 40px;
            float: left;
            margin-right: 20px;
        }
        .weibo{
            position: relative;

        }
        .weibo .weibo-menu{
            padding: 0;
            margin:0;
            position: absolute;
            width: 70px;
            text-align: center;
        }
        .weibo .weibo-menu a{
            padding: 0px 4px;
            border: 1px solid #ddd;
            border-top: none;
        }
        .blog{
            position: relative;

        }
        .blog .blog-menu{
            padding: 0;
            margin:0;
            position: absolute;
            width: 70px;
            text-align: center;
        }
        .blog .blog-menu a{
            padding: 0px 4px;
            border: 1px solid #ddd;
            border-top: none;
        }

        .email{
            position: relative;

        }
        .email .email-menu{
            padding: 0;
            margin:0;
            position: absolute;
            width: 70px;
            text-align: center;
        }
        .email .email-menu a{
            padding: 0px 4px;
            border: 1px solid #ddd;
            border-top: none;
        }

    </style>
</head>
<body>
    <div class="header" id="header">
        <ul class="header-left">
            <li class="li-left"><a href="#">设置为首页</a></li>
            <li class="li-left"><a href="#">手机新浪网</a></li>
            <li class="phone-client" @mouseover="showElement('phone')" @mouseout="hiddenElement('phone')" ><a href="#">移动客户端&nbsp;&nbsp;<i class="fa fa-angle-down orange" @mouseout="hiddenElement('phone')"></i></a>
                <div class="phone-client-menu" v-show="phone" >
                    <ul>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">新浪新闻</a></li>
                        <li><a href="">新浪体育</a></li>
                        <li><a href="">新浪娱乐</a></li>
                    </ul>
                </div>
            </li></ul>

        <ul class="header-right">
            <li class="li-left"><a href="#">登陆</a></li>
            <li class="li-left weibo" @mouseover="showElement('weibo')" @mouseout="hiddenElement('weibo')"><a href="#">微博&nbsp;&nbsp;<i class="fa fa-angle-down orange"></i></a>
                <div class="weibo-menu" @mouseover="showElement('weibo')" v-show="weibo" @mouseout="hiddenElement('weibo')">
                    <ul>
                        <li><a href="">私信</a></li>
                        <li><a href="">评论</a></li>
                        <li><a href="">@我</a></li>
                    </ul>
                </div>
            </li>
            <li class="li-left blog" @mouseover="showElement('blog')" @mouseout="hiddenElement('blog')"><a href="#">博客&nbsp;&nbsp;<i class="fa fa-angle-down orange"></i></a>
                <div class="blog-menu" @mouseover="showElement('blog')" v-show="blog" @mouseout="hiddenElement('blog')">
                    <ul>
                        <li><a href="">博客评论</a></li>
                        <li><a href="">博客提醒</a></li>
                    </ul>
                </div>
            </li>
            <li class="li-left email" @mouseover="showElement('email')" @mouseout="hiddenElement('email')"><a href="#">邮箱&nbsp;&nbsp;<i class="fa fa-angle-down orange"></i></a>
                <div class="email-menu" @mouseover="showElement('email')" v-show="email" @mouseout="hiddenElement('email')">
                    <ul>
                        <li><a href="">免费邮箱</a></li>
                        <li><a href="">VIP邮箱</a></li>
                        <li><a href="">企业邮箱</a></li>
                    </ul>
                </div>
            </li>
            <li class="li-left"><a href="">网站导航</a></li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    const app = new Vue({
        el :'#header',
        data:{
            isHidden:false,
            phone:false,
            weibo:false,
            blog:false,
            email:false,
        },
        methods:{
            showElement:function(argument) {
                switch(argument){
                    case 'phone':this.phone = true;
                        break;
                    case 'weibo':this.weibo = true;
                        break;
                    case 'blog':this.blog = true;
                        break;
                    case 'email':this.email = true;
                        break;
                }
            },
            hiddenElement:function (argument) {
                switch(argument){
                    case 'phone':this.phone = false;
                        break;
                    case 'weibo':this.weibo = false;
                        break;
                    case 'blog':this.blog = false;
                        break;
                    case 'email':this.email = false;
                        break;
                }
            }
        }

    });
</script>
</html>

仿新浪tab选项卡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue"></script>
    <link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div id="app">
    <div class="header">
        <ul>
            <li v-for="(item,index) in items" @mouseover="showContent(index)">
                <a href="">{{ item.item }}</a>
            </li>
        </ul>
    </div>
    <div class="content">
        {{ content }}
    </div>
</div>
</body>
<script>
var app = new Vue({
    el:"#app",
    data:{
        content:"图片",
        items:[
            {item:'图片'},
            {item:'专栏'},
            {item:'热点'},
        ],
    },
    methods:{
        showContent:function(index) {
            switch(index){
                case 0:
                    this.content = "图片"
                    break;
                case 1:
                    this.content = "专栏"
                    break;
                case 2:
                    this.content = "热点"
                    break;

            }

        }
    }


})
</script>
</html>

Vue起步

Vue起步

Vue.js是什么

起步

声明式渲染

绑定元素特性

条件判断

循环

事件监听

处理用户输入

总结

模板语法

附赠小案例

轮播图

仿新浪导航条

仿新浪tab选项卡

猜你喜欢