vue 简介 vue 项目
生活随笔
收集整理的這篇文章主要介紹了
vue 简介 vue 项目
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 概念
Vue (讀音 /vju?/，類似于?view) 是一套用于構建用戶界面的漸進式框架。能夠為復雜的單頁應用提供驅動。
2. 用法
2.1?聲明式渲染
2.1.1 改變文本? ? ?{{ message }} ? ? ? ?打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 app.message 的值，你將看到上例相應地更新。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app">{{ message }}</div><script src="vue.js"></script><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}})</script> </body></html> View Code擴展：
模板渲染方式：
生成的dom 替換了容器內容? ? ? ?#app? 又稱為掛載點
<div id="app"></div> el:'#app', template:'<h1>hello {{mes}}</h1>', data:{ mes:'world' }?
2.1.2?綁定元素特性（屬性）??v-bind:title="message"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-2"><span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span></div><script src="vue.js"></script><script>var app2 = new Vue({el: '#app-2',data: {message: '頁面加載于 ' + new Date().toLocaleString()}})</script> </body></html> View Code2.2??條件與循環
2.2.1 條件? ? ? ?v-if="seen" ? ? ? ?Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-3"><p v-if="seen">現在你看到我了</p></div><script src="vue.js"></script><script>var app3 = new Vue({el: '#app-3',data: {seen: true}})</script> </body></html> View Code2.2.2 循環? ? ??v-for="todo in todos"? ? ?{{ todo.text }}
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-4"><ol><li v-for="todo in todos">{{ todo.text }}</li></ol></div><script src="vue.js"></script><script>var app4 = new Vue({el: '#app-4',data: {todos: [{text: '學習 JavaScript'},{text: '學習 Vue'},{text: '整個牛項目'}]}})</script> </body></html> View Code2.3 處理用戶輸入
2.3.1 處理組件內部數據? ? ??v-on:click="reverseMessage"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-5"><p>{{ message }}</p><button v-on:click="reverseMessage">逆轉消息</button></div><script src="vue.js"></script><script>var app5 = new Vue({el: '#app-5',data: {message: 'Hello Vue.js!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}})</script> </body></html> View Code2.3.2 雙向綁定? ? ??v-model="message"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-6"><p>{{ message }}</p><input v-model="message"></div><script src="vue.js"></script><script>var app6 = new Vue({el: '#app-6',data: {message: 'Hello Vue!'}})</script> </body></html> View Code2.4 組件
2.4.1 靜態數據? ? ??Vue.component('todo-item', {? ? ? template: '<li>這是個待辦項</li>'? ? })? ? ? ? ? ??<todo-item></todo-item>
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-7"><ol><todo-item></todo-item></ol></div><script src="vue.js"></script><script>Vue.component('todo-item', {template: '<li>這是個待辦項</li>'})var app7 = new Vue({el: '#app-7'})</script> </body></html> View Code2.4.2? 動態數據? ?從父作用域將數據傳到子組件? ??prop???
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div id="app-7"><ol><!--現在我們為每個 todo-item 提供 todo 對象todo 對象是變量，即其內容可以是動態的。我們也需要為每個組件提供一個“key”，稍后再作詳細解釋。--><todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item></ol></div><script src="vue.js"></script><script>Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({el: '#app-7',data: {groceryList: [{id: 0,text: '蔬菜'},{id: 1,text: '奶酪'},{id: 2,text: '隨便其它什么人吃的東西'}]}})</script> </body></html> View Code2.4.2.1 實際應用 組件呈現形態
<div id="app"><app-nav></app-nav><app-view><app-sidebar></app-sidebar><app-content></app-content></app-view> </div> View Code?
?
3. 相關文章
Vue.js
MVVM
mvvm? 廖雪峰
vue 項目代碼
?
轉載于:https://www.cnblogs.com/justSmile2/p/10833017.html
總結
以上是生活随笔為你收集整理的vue 简介 vue 项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Shell脚本基本命令3
- 下一篇： Vue踩坑之旅（四）—— 自定义指令实现