Web前端-Vue.js必備框架（三）
摘要：
Web前端-Vue.js必備框架（三）
Web前端-Vue.js必備框架（三）
vue 是一款漸進式 javascript 框架，由 evan you 開發。 vue 成為前端開發的必備之一。
vue 的好處輕量級，漸進式框架，響應式更...
Web前端-Vue.js必備框架（三）
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>
結言
好了，歡迎在留言區留言，與大家分享你的經驗和心得。
感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
作者簡介
達叔，理工男，簡書作者&全棧工程師，感性理性兼備的寫作者，個人獨立開發者，我相信你也可以！閱讀他的文章，會上癮！，幫你成為更好的自己。長按下方二維碼可關注，歡迎分享，置頂尤佳。
努力努力再努力Jeskson