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起步的更多相关文章

  1. vue 起步走 --“安装篇”

    在说明之前,溶解得在这说一句 ,菜鸟开始安装这些东西真是不容易,各种疯狂的百度,搜索.(找的我眼泪都快流下来了),不说废话,开始正经. 第一步:环境的搭建 : vue推荐开发环境: Node.js: ...

  2. 初识vue——起步

    一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...

  3. vue起步和模板語法

    vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...

  4. vue 起步

    vue 官网 目前最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”.授予了这么高的评价的vue ...

  5. vue 起步_code

    <template> <div class="hello"> <h1>{{ msg }}</h1> <div>{{dat ...

  6. 【Vue起步-Windows】N01：环境安装

    本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境 在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...

  7. webpack+vue起步

    本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...

  8. vue 起步（一）

    准备 安装nodejs(下载),Windows 安装包(.msi) npm相关 打开cmd查看npm版本, npm -v,如果没有安装npm,执行npm install npm -g进行安装 查询当前 ...

  9. 第二章、 Vue 起步

    2-2.编写hello world 首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据 两秒后内容变为bye world 其中app表示实例对象,$dat ...

随机推荐

  1. [CF671E] Organizing a Race

    题目大意 有\(n\)个加油站排成一行,编号为\(1\sim n\) ,\(i\)与\(i+1\)间有一条长为\(w_i\)千米的道路. 一辆汽车在经过加油站\(i\)时会得到\(g_i\)升汽油 , ...

  2. 【agc003D】Anticube

    Portal --> agc003D Description 给你\(n\)个数,要从里面选出最多的数满足这些选出来的数中任意两个数的乘积都不是立方数 Solution (为什么感觉最近这种解法 ...

  3. CentOS 6.5下Squid代理服务器的安装与配置

    1.1   缓存代理概述 作为应用层的代理服务器软件,squid主要提供缓存加速,应用层过滤控制的功能. 1.  代理的工作机制 当客户机通过代理来请求web页面时,指定的代理服务器会先检查自己的缓存 ...

  4. [postfix]转发邮件设置

    http://stackoverflow.com/questions/22537523/postfix-recipient-bcc-maps-multiple-recipients-how-to ht ...

  5. Docker简介和安装（一）

    Docker简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协 ...

  6. UIApplication概述

    1.通过类方法sharedApplication可以获得唯一实例 2.可以打开mail或者email,通过openUrl方法. 3.指定UIApplicationDelegate可以跟踪各种应用状态. ...

  7. Xcode关闭警告

    对于关闭某个警告,如果需要全局关闭的话,直接在Other C Flags里写 -Wno-...就行了,比如 -Wextra -Wno-sign-compare 就是一个常见的组合.如果相对某几个文件开 ...

  8. 简便开发插件 -- lombok

    lombok是一款可以精减java代码.提升开发人员生产效率的辅助工具,可以利用注解在编译期自动生成setter/getter/toString()/constructor代码. 彻底将开发人员从繁琐 ...

  9. numpy基础整理

    记笔记用jupyter实在太方便了,懒得再重新写到博客园上,直接放个链接吧→_→ numpy(一):https://douzujun.github.io/page/%E6%95%B0%E6%8D%AE ...

  10. ABOUT ME/OI回忆录

    \(ABOUT\ ME/OI回忆录\) 博主是一个退役的老菜鸡啦,学\(OI\)两年没搞过什么很厉害的东西,也没有做过很多题目,但是还是挺喜欢\(OI\)的. 在退役之后可能不会经常上博客园了,估计也 ...