vue的初體驗

時間 2019-11-30

標籤 vue 體驗简体版

原文原文鏈接

vue是什麼

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。javascript

1.建立項目：

vue.js 文件自行下載便可，目前這些目錄都是空的。html

聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：
編寫index.html:vue

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo</title>
</head>
<body>
<div id="app">
	{{ message }}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript"> //構造一個vue實例，Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統： var app = new Vue({ // vue指向的目的地 el: '#app', // vue的數據部分 data:{ message:'hello vue!' } }) </script>
</body>
</html>

頁面顯示：
咱們已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字符串模板很是相似，可是 Vue 在背後作了大量工做。如今數據和 DOM 已經被創建了關聯，全部東西都是響應式的。咱們要怎麼確認呢？打開你的瀏覽器的 JavaScript 控制檯 (就在這個頁面打開)，並修改 app.message 的值，

你將看到頁面上也將相應地更新；java

指令系統

指令帶有前綴v-,以表示它們是vue提供的特殊性。它們會在渲染的DOM上應用特殊的響應式行爲。python

v-bind 指令

繼續在index.html中添加代碼：web

<div id="app2" v-bind:title="message">
	鼠標懸停幾秒在這查看綁定的動態信息！
</div>
<script type="text/javascript"> // 使用一個指令 var app2 = new Vue({ el: '#app2', data: { message: '頁面加載於' + new Date().toLocaleString() } }) </script>

效果如圖：

這個指令的的意思是：將這個元素節點的title特性的vue是來的message屬性保持一致。若是打開瀏覽器的 JavaScript 控制檯，輸入 app2.message = ‘新消息’，就會再一次看到這個綁定了 title 特性的 HTML 已經進行了更新。瀏覽器

v-if 條件

代碼：app

<div id="app4">
	<ol>
		<li v-for="data in datas">
			{{ data.test }}
		</li>
	</ol>
</div>
<script type="text/javascript"> //v-if指令 var app3 = new Vue({ el: "#app3", data:{ seen: true } }) </script>

效果如圖：
繼續在控制檯輸入app3.seen = false, 顯示的Can you see me?已經消失了。這個例子演示了咱們不只能夠把數據綁定到 DOM 文本或特性，還能夠綁定到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，能夠在 Vue 插入/更新/移除元素時自動應用過渡效果。框架

v-for指令

<div id="app4">
	<ol>
		<li v-for="data in datas">
			{{ data.test }}
		</li>
	</ol>
</div>
<script type="text/javascript"> // v-for 指令 var app4 = new Vue({ el: '#app4', data:{ datas: [ {test: 'python很棒！'}, { test:'vue 初體驗' }, { test: 'v-for指令' }, ] } }) </script>

效果：
在控制檯裏，輸入 app4.todos.push({ text: ‘新項目’ })，你會發現列表最後添加了一個新項目。svg

v-on 指令

爲了讓用戶和你的應用進行交互，咱們能夠用 v-on 指令添加一個事件監聽器，經過它調用在 Vue 實例中定義的方法

代碼：

<div id="app5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">反轉消息</button>
</div>
<script type="text/javascript"> // v-on指令 var app5 = new Vue({ el: '#app5', data:{ message:'good vue.js' }, methods:{ reverseMessage:function(){ this.message = this.message.split('').reverse().join('') } } }) </script>

效果圖：
點擊前
點擊後
注意在 reverseMessage 方法中，咱們更新了應用的狀態，但沒有觸碰 DOM——全部的 DOM 操做都由 Vue 來處理，你編寫的代碼只須要關注邏輯層面便可。

v-model 指令

<div id="app6">
	<p>{{ message }}</p>
	<input v-model="message" type="" name="">
</div>
<script type="text/javascript"> //v-model 指令 var app6 = new Vue({ el: '#app6', data: { message: '輸入到input框中' } }) </script>

效果圖：
v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。