Vue入门第一天

最新推荐文章于 2020-07-30 22:44:53 发布

BeBornAgain

最新推荐文章于 2020-07-30 22:44:53 发布

阅读量281

点赞数

分类专栏： Vue.js的学习

本文链接：https://blog.csdn.net/qq_25236381/article/details/79449780

版权

Vue.js的学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

参考：https://hiscc.gitbooks.io/vue-js-2-0/content/chapter-1/GoingShoppingwithVue.js.html

Vue可以做什么？

Vue.js 允许你简单绑定你的数据模型给呈现层。它也允许你在整个方程式内简单地重用组件。

事例：

一.用 jQuery 实现一个购物清单

这个方程式允许我们增加删除选项并展示我们的购物列表

HTML 代码里包含一个无序列表，每个项目都有一个复选框和一点文本，一个给用户输入的输入框和 Add! 按钮。每次点击 Add! 后，输入的文本将转换到列表中。点击项目的复选框时，项目的状态被切换为已买到。

1)结构

2)实现

你的代码可能就像下面的：

<div class="container">

			<h2>My Shopping List</h2>
			<div class="input-group">
				<input placehodlder="add shopping list item"
					 type="text" class="js-new-item form-control">
				<span class="input-group-btn">
					<button class="js-add btn btn-default"
						 type="button">Add!</button>
				</span> 
			</div>
			<ul>
				<li>
					<div class="checkbox">
						<label>
							<input class="js-item" name="list"
								 type="checkbox"/> Carrot
						</label>						
					</div>
				</li>
				<li>
					<div class="checkbox">
						<label>
							<input class="js-item" name="list"
								 type="checkbox"/> Book
						</label>
					</div>
				</li>
				<li class="removed">
					<div class="checkbox">
						<label>
							<input class="js-item" name="list"
								type="checkbox" checked/>
						</label>Gift for aunt's birthday
					</div>
				</li>
			</ul>
			<div class="footer">
			<hr />
			<em>Change the title of your shopping list here</em>
			<input class="js-chage-title" type="text"
				value="My Shopping List"/>
		</div>
		</div>

然后是 CSS 代码：

.container{
	width: 40%;
	margin: 20px auto 0px auto;
}			
.removed{
	color: gray;
}
.removed label{
	text-decoration: line-through;
}
ul li{
	list-style-type: none;
}

最后是 JavaScript/jQuery 代码：

$(document).ready(function(){//在所以js渲染前生效的方法
	/**
	 * Add button click handler
	 * 添加按钮单击处理程序
	 */
	function onAdd(){
		var $ul,li,$li,$label,$div,value;
		value = $('.js-new-item').val();
		//validate against empty values
		//对空值进行验证
		if (value == ''){
			return;
		}
		
		$ul = $('ul');
		$li = $('<li>').appendTo($ul);
		$div = $('<div>')
			  .addClass('checkbox') //给div追加class样式
			  .appendTo($li);//给li元素追加div元素
		$label = $('<label>').appendTo($div);
		
		$('<input>')
		 .attr('type','checkbox')//给input设置属性 
		 .addClass('item')
		 .attr('name','list')
		 .click(toggleRemoved)//给input绑定名称为toggleRemoved的click方法
		 .appendTo($label);
		 
		 $label.append(value);
		 $('.js-new-item').val();
	}
	
	/**
	 * 按钮的Click处理程序
	 * checkbox click handler
	 * 切换class时，去掉对应的父li元素
	 * @param {Object} ev
	 */
	function toggleRemoved(ev) {
		var $el;
		$el = $(ev.currentTarget);//获取当前的标签
		$el.closest('li').toggleClass('removed');//找到第一个父li,点击后切换removed样式
	}
	
	$('.js-add').click(onAdd);
	$('.js-item').click(toggleRemoved)
	
	function onChangeTitle(){
		$('h2').text($('.js-chage-title').val());//设值
	}
	$('.js-chage-title').keyup(onChangeTitle);//绑定名称为onChangeTitle的keyup方法
})

用 Vue.js 完成购物清单

1)结构

2)实现

创建 HTML：

	<div id="app" class="container">
			<h2>{{title}}</h2>
			<div class="input-group">
				<!--
                	作者：offline
                	时间：2018-03-05
                	描述：v-on:keyup.enter 给回车键绑定addItem方法
                		 v-model="newItem" 值绑定
                -->
				<input v-model="newItem" v-on:keyup.enter="addItem" 
					placeholder="add shooping list item" type="text" class="form-control">
					<span class="input-group-btn">
						<button v-on:click="addItem" class="btn btn-default" type="button">Add!</button>
					</span>
			</div>
			<ul>
				<!--
                	作者：offline
                	时间：2018-03-05
                	描述：普通方式
                -->				
				<!-- 
				<li>{{items[0]}}</li>
				<li>{{items[1]}}</li>
				-->
				<!--
                	作者：offline
                	时间：2018-03-05
                	描述：v-for 遍历指令
                -->
				<!--<li v-for="item in items">{{item}}</li>-->
				<!--
                	作者：offline
                	时间：2018-03-05
                	描述：v-bind:class="{'removed':item.checked}"> 动态地切换 class 
                -->
				<li v-for="item in items" v-bind:class="{'removed':item.checked}">
					<div class="checkbox">
						<label>
							<input type="checkbox" v-model="item.checked">{{item}}
						</label>
					</div>
				</li>
			</ul>

<!--
                	作者：offline
                	时间：2018-03-05
                	描述：简写 @ -->v-on: :-->v-bind:
                -->
				<!--<div class="input-group">
				<input v-model="newItem" @keyup.enter="addItem"
				placeholder="add shopping list item" type="text"
				class="form-control"/>
				<span class="input-group-btn">
					<button @click="addItem" class="btn btn-default"
						type="button">Add!</button>
				</span>
				</div>
				<li v-for="item in items" :class="{'removed':item.checked}">
					<div class="checkbox">
						<label>
							<input type="checkbox" v-model="item.checked"/>{{item}}
						</label>
					</div>
				</li>-->

然后是 CSS 代码：

.container{
	width: 40%;
	margin: 20px auto 0px auto;
}			
.removed{
	color: gray;
}
.removed label{
	text-decoration: line-through;
}
ul li{
	list-style-type: none;
}

最后是 JavaScript/jQuery 代码：

//data数据容器(类似Struts的值栈)
var data = {
	items:[{text:'Bananas',checked:true},
		  	{text:'Apples',checked:true}],
	title:'My Shopping List',
	newItem:''
};

new Vue({
	el:'#app',//通过app id 绑定Vue 
	data:data,
	methods: {//方法
		addItem:function () {
			var text;
			text = this.newItem.trim();// data 属性都可以在 methods 内通过 this 关键字访问到
			if(text) {
				this.items.push({//添加一个item
					text:text,
					checked:false
				})
			}
			this.newItem = '';
		}
		
	}
});

我们来管理时间

我们将引入两个 Vue data 变量， minute， second，显示到我们的页面上。秒数持续递减直到递减为零时，分数递减；当秒数和分数都为零时，方程式切换工作时间与休息时间：

1)结构

2)实现

创建 HTML：

<div  id="app" class="container">
			<!--
            	作者：offline
            	时间：2018-03-07
            	描述：
            		重点：Vue有作用域的范围 通过 el:'#app'把Vue绑定到id为app的div中
            		new Vue({
						el:'#app',
						data:{...},
						...,
						methods: {..}
					});
					
            		 v-show="work">显示隐藏的指令 从Vue的data域中获取work的值
                    		 根据work值的变化改变div的显示隐藏状态
            -->
			<div v-show="work">
				<div>
				<h2>
					<span>Pomedoro</span>
					<!--
                    	作者：offline
                    	时间：2018-03-07
                    	描述：@click="start()"  点击指令
                    		 :disabled="state == 'started'" 不可点击的指令 从Vue的data域中获取state的值
                    		 根据state值的变化改变按钮的状态
                    -->
                    <!--
                    	作者：offline
                    	时间：2018-03-07
                    	描述：glyphicon glyphicon-play bootstrap的按钮矢量图
                    -->
					<button @click="start()" :disabled="state == 'started'">
						<i class="glyphicon glyphicon-play"></i>
					</button>
					<button @click="pause()" :disabled="state != 'started'">
						<i class="glyphicon glyphicon-pause"></i>
					</button>
					<button @click="stop()" :disabled="state != 'started' && state != 'pause'">
						<i class="glyphicon glyphicon-stop"></i>
					</button>
				</h2>
				<!--
                	作者：offline
                	时间：2018-03-07
                	描述：{{title}} 取值方式 从Vue的data域中取值
                -->
				<h3>{{title}}</h3>
				<div class="well">
					<div class="pomodoro-timer">
						<span>{{min}}</span>:<span>{{sec}}</span>
					</div>
				</div>
			</div>
			<div v-show="rest">
				<img src="img/jenga_tower.jpg"/>
			</div>
		</div>

然后是 CSS 代码：

.container{
	width: 40%;
	margin: 20px auto 0px auto;
}			
.removed{
	color: gray;
}
.removed label{
	text-decoration: line-through;
}
ul li{
	list-style-type: none;
}

最后是 JavaScript/jQuery/Vue 代码：

//声明常量
const POMODORO_STATES = {
	WORK:'work',
	REST:'rest'
};
const STATES = {
	SATRTED: 'started',
	STOPPED: 'stopped',
	PAUSED: 'paused'
};
const WORKING_TIME_LENGTH_IN_MINITES = 1;
const RESTING_TIME_LENGTH_IN_MINITES = 1;

new Vue({
	el:'#app',
	data:{//初始化Vue的data域的变量值
		state:STATES.SATRTED,
		minute: WORKING_TIME_LENGTH_IN_MINITES,
		second: 0,
		pomodoroState: POMODORO_STATES.WORK,
		timestamp: 0,
		work:true,
		rest:false
	},
	computed: {//使用计算属性计算左边距
		title:function(){
			return this.pomodoroState == POMODORO_STATES.WORK ?
			'Work!':'Rest!'
		},
		min:function(){//
			if(this.minute < 10){
				return '0'+this.minute;
			}
			return this.minute;
		},
		sec:function(){
			if(this.second < 10){
				return '0' + this.second;
			}
			return this.second;
		}
	},
	methods: {
		start: function () {//时钟开始计时的状态
			this.state = STATES.SATRTED;
			this._tick();
			this.interval = setInterval(this._tick,1000);//定时器
		},
		
		pause: function(){//时钟暂停计时的状态
			this.state = STATES.PAUSED;
			clearInterval(this.interval);
		},
		stop: function(){//时钟开始计时的状态
			this.state = STATES.STOPPED;
			clearInterval(this.interval);
			this.minute = WORKING_TIME_LENGTH_IN_MINITES;
			this.second = 0;
			this.pomodoroState = POMODORO_STATES.WORK;
		},
		_tick: function () {
			//如果第二个不是0，只是递减秒。 
			//if second is not 0,just decrement second
			if (this.second !== 0) {//先减秒
				this.second--;
				return;
			}
			//如果第二是0，分钟不是0， 
			//if second is 0 adn minute is not 0
			//递减分钟，设置第二到59 
			//decrement minute and set second to 59
			if(this.minute !== 0) {//后减分钟	
				this.minute--;
				this.second = 2;
				return;
			}
			//如果第二是0，分钟是0
			//if second is 0 and minute is 0
			//切换工作/休息时间间隔
			//toggle working/resting Intervals
			this.pomodoroState = this.pomodoroState
			=== POMODORO_STATES.WORK ? POMODORO_STATES.REST:
			POMODORO_STATES.WORK;//倒计时结束，改变状态
			if(this.pomodoroState == POMODORO_STATES.WORK){
				this.minute = WORKING_TIME_LENGTH_IN_MINITES;
				this.work=!this.work;
				this.rest=!this.rest;
			}else {
				this.minute = RESTING_TIME_LENGTH_IN_MINITES;
				this.work=!this.work;
				this.rest=!this.rest;
			}
		}
	}
});

BeBornAgain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门第一天

参考：https://hiscc.gitbooks.io/vue-js-2-0/content/chapter-1/GoingShoppingwithVue.js.htmlVue可以做什么？Vue.js 允许你简单绑定你的数据模型给呈现层。它也允许你在整个方程式内简单地重用组件。事例：一.用 jQuery 实现一个购物清单这个方程式允许我们增加删除选项并展示我们的购物列表HTML 代码里包含一个...
复制链接

扫一扫