Web前端-Vue.js必備架構（三）
vue
是一款漸進式
javascript
架構，由
evan you
開發。
vue
成為前端開發的必備之一。
vue
的好處輕量級，漸進式架構，響應式更新機制。
開發環境，浏覽器使用
chrome
，ide：
vs code
或者
webstorm
，
node.js8.9+
npm
等
uni-app
直接使用
<script>
引入
vue.js
vue
會被注冊為一個全局變量，開發環境不要使用壓縮版本，一：開發版本有完整的警告和調式模式，二：生産版本删除了警告。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
生産環境：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
開發：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<ol>
<todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/[email protected]/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li class="text"> {{ todo.text }} </li>'
})
var app = new Vue({
el: '#app',
data: {
message: 'hello',
arrList: [{
id: 0,
text: 'da'
},{
id: 1,
text: 'shu'
}]
}
})
</script>
</body>
</html> <body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'hello',
}
})
</script>
</body> vue CLI
npm install -g @vue/cli
vue create hello
cd hello
npm run serve 屬性：自定義屬性，原生屬性，特殊屬性。
元件中
props
中聲明屬性。
vue元件=vue執行個體=new Vue(options) 
每一個
vue
元件都是一個
vue
執行個體，
vue
執行個體通過
new vue
函數建立的。
事件：普通事件，修飾符事件。
@click @input @change 普通事件
@input.trim @click.stop @submit.prevent 修飾符事件 <template>
<div>
name: {{ name || "--" }}
<br/>
<input :value="name" @change="handleChange"/>
<br/>
<div @click="handleDivClick">
<buttom @click="handleClick">成功</button>
<button @click.stop="handleClick">失敗</button>
</div>
</div>
</template>
<script>
export default {
name: "EventDemo",
props: {
neme: String
},
methods: {
handleChange(e) {
this.$emit("change", e.targer.value);
},
handleDivClick() {
this.$emit("change", "");
},
handleClick(e) {
//e.stopPropagation();
}
}
};
</script> 插槽：普通插槽和作用域插槽。
<template slot="#"></template>
<template v-slot:#></template>
<template slot="#" slot-scope="props"></template>
<template v-slot:#="props'></template>
<a-tab-pane key="event" tab="事件">
<Event :name="name" @change="handleEventChange"/>
</a-tab-pane>
<a-tab-pane key="slot" tab="插槽">
<h2>新文法</h2>
<$lotDemo>
<p></p>
<template v-slot:title>
<p>title</p>
<p>tiltle</p>
</template>
<template v-slot:item="props">
<p>item {{ props }} </p>
</template>
<$lotDemo>
<br/>
</a-tab-pane>
<template>
<div>
<slot/>
<slot name="title"/>
<slot name="item" v-bind="{ value: 'vue' }"/>
</div>
</template>
<script>
export default {
name: "SlotDemo"
};
</script> 小結：
屬性，自定義屬性：
props
，原生屬性：
attrs
，特殊屬性：
class
style
。
插槽：普通插槽，作用域插槽。
雙向綁定：
model
資料的更新會導緻
view
視圖的更新，
view
視圖的更新會導緻
model
資料的更新。但
vue
是單向資料流，
Object.defineProperty
響應式更新。
// 文法糖
<Personalnfo
v-model="phoneInfo"
:zip-code.sync="zipCode"
/>
<PersonalInfo
:phone-info="phoneInfo"
@change="val => (phoneInfo = val)"
:zip-code="zipCode"
@update:zipCode="val => (zipCode=val)"
/> 狀态
data
和屬性
props
狀态是元件自身的資料，屬性來自父元件的資料。
狀态和屬性的改變都未必會觸發更新。
好了！下面開講：
開發環境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生産環境版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
新手不建議用
vue-cli
哦！
資料渲染：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動态綁定的提示資訊！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面加載于 ' + new Date().toLocaleString()
}
})
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '學習 1' },
{ text: '學習 2' },
]
}
})
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello dashucoding!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'dashucoding!'
}
}) 元件化：
<div id="app-7">
<ol>
<!--
現在我們為每個 todo-item 提供 todo 對象
todo 對象是變量，即其内容可以是動态的。
我們也需要為每個元件提供一個“key”，稍後再
作詳細解釋。
-->
<todo-item
v-for="item in gList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
gList: [
{ id: 0, text: '123' },
{ id: 1, text: '456' }
]
}
})
建立一個 Vue 執行個體
var vm = new Vue({
// 選項
}) $
用于區分與使用者定義的屬性。
v-once
執行一次性插值，資料改變後，不會再改變。
v-bind:
修飾符：
<form v-on:submit.prevent="onSubmit">...</form>
v-bind
和
v-on
<!-- 完整文法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
<!-- 完整文法 -->
<a v-on:click="do"></a>
<!-- 縮寫 -->
<a @click="do"></a> 結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的内容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。