vue.js入門（13）實戰demo

阿新 • • 發佈：2019-02-08

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
	<div id="vue-app">
		<div v-bind:class="{bottle:!flag,change:flag}"></div>
		<!--	是冒號冒號冒號！！！！不是等於號！！！！-->		
		<div id="bor">
			<div v-bind:style="{ width : length +'%'}"></div>
		</div>
		
		<div id="but">
			<button v-on:click="hit" v-show="!flag">hit</button>
			<button v-on:click="res">restart</button>
		</div>
	</div>
	<script src="app.js"></script>
</body>
</html>

//style.css

.bottle
{
background-image:url(1.png);
background-repeat:no-repeat;
margin:0 auto;
width:200px;
height:500px;
}

.change
{
background-image:url(2.png);
background-repeat:no-repeat;
margin:0 auto;
width:200px;
height:500px;
}

#bor
{
	border:solid 1px black;
	width:180px;
	margin:20px auto;
}
#bor div
{
height:20px;
background-color:red;
}


#but
{
width:100px;
margin:0 auto;
}

//app.js

new Vue({
	el:"#vue-app",
	data:
	{	
		length:100,
		flag:false
		
	},
	methods:
	{
		res:function()
		{
			this.length=100;
			this.flag=false;
		},
		hit:function()
		{
			this.length-=10;
			if(this.length<=0)this.flag=true;
		}
		
	}
	  
});

1.css中div的內嵌表達

2.兩個圖片的樣式轉化，這個在第十節提到過了，！！！記得是冒號，不是等於號{{屬性：值（真/假）}}

這個是樣式，如果是值，還是等於號

3.兩個button執行的函式不同，在js檔案中，data裡面的屬性用在methods的函式裡面時，都要加this.

4.進度條的變化，和它的顏色框進行繫結一下，並且賦予其百分比，然後每次減10%，width : length +'%'注意這裡也是冒號，不是等於號。另外button添加了v-show，是為了可以讓進度條為0時，不再顯示hit這個按鈕。

PS：由於瀏覽器不相容問題，並沒有採用教程的程式碼

vue.js入門（13）實戰demo

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

vue.js入門（22）事件傳值（子向父傳值）

上一節講的是父向子傳值首先我們在Header.vue檔案先加入一個方法來改變title值，首先註冊一個事件methods:{ changetitle:function() { this.$emit("titlechange","子向父傳值");//

vue,js入門（14）例項化多個vue物件

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link

vue.js入門（3-4）（methods，屬性繫結）

//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri

vue-cli入門（二）——人員管理例項小demo

前言在開始開發例項前，應首先了解一下vue-cli的專案結構。接著我們一起來實現一個小demo——人員管理，功能簡單，通過這個例項讓大家熟悉使用vue-cli開發專案的一些操作，加深對vue-cli專案結構的印象。例項功能簡述人員管理專案，有兩個頁面，首頁和管理

vue-cli入門（二）——項目結構

常用作用寫到 www. 簡單的端口 server 標簽 emp 前言在上一篇項目搭建文章中，我們已經下載安裝了node環境以及vue-cli，並且已經成功構建了一個vue-cli項目，那麽接下來，我們來梳理一下vue-cli項目的結構。總體框架一個vue-c

Vue.js 學習（二）

blank -o 找到 type con 不能 tex ogg 分享計算屬性和監聽屬性 <div id="root"> <label>姓：</label><input v-model="firstName" type="

vue.js筆記（二）

ceo fad cli ani -s animate nbsp tran rip animate.css動畫 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

Vue.js 筆記（二）模板語法

指令 1. 以 v- 開頭常見有：v-bind(資料單向輸出),v-html(顯示html),v-model(資料雙向繫結),v-if(條件，是否插入元素)，v-on(事件) 2. 引數，指令後加冒號，如：v-bind:class='class1' 將

Vue.js 筆記（一）起步

快速入門 <!DOCTYPE html> <html lang="zh" dir="ltr"> <head> <meta charset="utf-8"> <title>vue test </titl

大資料入門（13）zookeeper的安裝配置

1、上傳zookeeper-3.4.6.tar.gz 2、解壓檔案到指定目錄(目錄：admin/app) tar -zxvf zookeeper-3.4.6.tar.gz -C /app 3、配置（一臺節點上） 3.1新

vue.js總結---（2）指令

vue指令 1、插值表示式：{{}} 注意：不能在屬性節點中使用，只能在內容節點中使用 2、v-cloak 解決插值表示式閃爍問題 {{msg}} style裡需要設定：display：none；應用場景：網路比較卡時候可以在最外層的元素新增v-cloak，防止客戶看到插值表示式 3、

vue快速入門（一）

vue是什麼？是一個漸進式框架，什麼是漸進式？漸進式框架，入手簡單，引入js，很快上手達到效果，使用元件，甚至整個框架都可以慢慢用元件來搭建。由小到大，專注於每個小元件，拼拼和和成一個大的模組。 MVVM: M: V VM

SpringBoot入門（13）- SpringBoot 中使用Servlet API

1、靜態檔案預設路徑及配置 autoconfig下的web下的ResourceProperties中 private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-IN

Vue.js學習（一）

1.vue輸出文字：通過{{...}}進行資料繫結改變data中的值從而進行改變程式碼如下： <body> <div id="app">

Vue.js教程（一）：基本使用

vue.js是一套漸進式Javascript框架。是一個小巧好用的框架。簡介 Vue既然是一個js框架，那麼基本上js能做的事情它都能做。Vue跟大多數js框架類似，都是優化js對DOM的操作。什麼是DOM操作呢？看下面： <div id="app"

Vue.js教程（二）：v-bind動態屬性

上一節我們學習了Vue的基本語法，裡面有個佔位變數{{message}}。這種{{message}}形式的vue變數只適合給標籤中的文字複製（開始標籤和結束標籤中間的文字）。v-bind是給屬性設定變數的。簡介 v-bind是給屬性設定變數的。屬性和文字的

Vue.js教程（三）：v-if條件判斷

v-if是繼v-bind之後的又一個v-xxx系列前言 v-if這是我們學習Vue中的的第二個v-xxx系列。學到這裡，不得不提一下的是，所有v-bind或者v-if所關聯的都是Vue的動態變數，

Vue.js教程（四）：v-for迴圈操作

前言本篇主要是Vue的迴圈操作，需要遍歷陣列。所以本篇嚴格來說有兩個知識點： 1、v-for迴圈使用 2、vue中陣列的定義 v-for基本使用 1、定義陣列 <script type="text/javascript"> var app4

前端JS框架——Vue.js筆記（一）

基本的Vue程式碼結構：插值表示式： v-text: 使用v-cloak解決v-text閃爍問題：使用v-html對html格式文字進行渲染使用v-bind進行資料繫結：它的縮寫是: 使用v-on進行事件監聽繫結：它的縮寫是@符號事件修飾符：

vue.js入門（13）實戰demo

相關推薦