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>

posted @ 2018-06-24 10:47 短毛兔阅读(200) 评论(0) 编辑收藏举报

刷新页面返回顶部

短毛兔

Vue起步

Vue起步

Vue.js是什么

起步

声明式渲染

绑定元素特性

条件判断

循环

事件监听

处理用户输入

总结

模板语法

附赠小案例

轮播图

仿新浪导航条

仿新浪tab选项卡

公告