Vue起步
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="#">移动客户端 <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="#">微博 <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="#">博客 <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="#">邮箱 <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推荐开发环境: Node.js: ...
- 初识vue——起步
一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...
- vue起步和模板語法
vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...
- vue 起步
vue 官网 目前最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”.授予了这么高的评价的vue ...
- vue 起步_code
<template> <div class="hello"> <h1>{{ msg }}</h1> <div>{{dat ...
- 【Vue起步-Windows】N01：环境安装
本文基于“vue.js安装过程(npm安装)”文章内容及个人出现的问题整合而成. 1.安装npm环境 在Node官网中下载最新的windows版msi安装包,并默认所有安装选择. 2.查看npm安装版 ...
- webpack+vue起步
本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...
- vue 起步（一）
准备 安装nodejs(下载),Windows 安装包(.msi) npm相关 打开cmd查看npm版本, npm -v,如果没有安装npm,执行npm install npm -g进行安装 查询当前 ...
- 第二章、 Vue 起步
2-2.编写hello world 首先创建vue实例,然后实例接收一些配置项,el表示实例负责管理的区域,data表示区域内的数据 两秒后内容变为bye world 其中app表示实例对象,$dat ...
随机推荐
- 3.11 - 3.12 A day with Google
补了一番游记. 找了一个本科学弟一起去上海游玩.本来老板还要我周一过去讨论寒假阅读的论文,总算是把讨论时间挪到周六了. 兴冲冲地买好车票后就开始期待上海Google office的神秘之旅. upda ...
- Pentaho的Mondrian对Hive的支持
需求描述 考虑直接在Hive或者Impala等Big Data方案,能够支持MDX查询,现调研一下Mondrian对hive的支持情况. 环境准备 hive环境,采用hive-0.10-cdh4.2. ...
- 20135319zl软件破解报告
编写一个简单的C程序.要求只有输入a,才能通过. 现在,使用objdump –d po反汇编这个程序 找到main函数,可以发现movb $0x61,0x1f(%esp)这句语句中是将字符a(对应0x ...
- 单点登录(十五)-----实战-----cas4.2.x登录mongodb验证方式实现自定义加密
我们在前一篇文章中实现了cas4.2.x登录使用mongodb验证方式. 单点登录(十三)-----实战-----cas4.2.X登录启用mongodb验证方式完整流程 也学习参考了cas5.0.x版 ...
- SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛 D. 白色相簿
从某一点开始,以层次遍历的方式建树若三点a.b.c互相连接,首先必先经过其中一点a,然后a可以拓展b.c两点,b.c两点的高度是相同的,若b(c)拓展时找到高度与之相同的点,则存在三点互相连接 //等 ...
- Service Fabric —— Stateful Service 概念
作者:潘罡 (Van Pan) @ Microsoft 上节中我们谈到了Service Fabric最底层的两个概念,一个是针对硬件层面而言的Node Type和Node.另一个是Applicatio ...
- iis配置访问错误
最近换工作,忙着熟悉新的环境,新的框架技术(银行用的EBF),各种碰坑. 总结一下iis配置过程当中遇到的一个坑------ 按照环境搭配手册一步一步的配置,在我机器上访问一直报500的错,但是同样的 ...
- 脑洞 博弈 E. Competitive Seagulls 2017 ACM Arabella Collegiate Programming Contest
题目链接:http://codeforces.com/gym/101350/problem/E 题目大意:给你一个长度为n的方格,方格上面都被染色成了白色.每次染色都是选择白色的,假设目前选择的这块白 ...
- 不用 Twitter Bootstrap 的5个理由
在以前我们的博客文章中,我们讨论了在web设计和开发项目中使用Twitter Bootstrap的好处.Twitter Bootstrap也有很多的缺点.让我们看看这些主要的问题: 1,它不遵循最佳实 ...
- 悲催的IE6 七宗罪大吐槽（带解决方法）第三部分
五:文字溢出bug(注释bug) 1.在以下情况下将会引起文字溢出bug 一个容器包含2两个具有“float”样式的子容器. 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于 ...