Vue
一個javascript庫，框架，是漸進式的（需要什么加什么，React也是漸進式）
作用：構(gòu)建前端頁面（主要強調(diào)頁面View），可以引入插件
三大框架時間：angular---React（大型公司）---Vue（中小型）
MVVM模式
model:模型，數(shù)據(jù)對象（data）
view：視圖，模板頁面
viewModel：視圖模型（Vue實例）：DOM監(jiān)聽+數(shù)據(jù)綁定
Vue擴展插件
vue-cli：腳手架；vue-resource（axios）：ajax：請求；vue-router：路由；vuex：狀態(tài)管理；vue-lazyload：圖片懶加載；vue-scroller：頁面滑動相關；mint-ui：基于vue的UI組件庫（移動端）；element-ui：基于vue的UI組件庫（PC端）
安裝Vue-devTools
入門的HelloWorld
html文件：
<!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">
? ? ?? <input type="text" v-model="username">
? ? ?? <p>輸入的內(nèi)容是：{{username}}</p>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創(chuàng)建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? username: 'HelloWorld'
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
計算屬性（緩存）和監(jiān)視
<!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">
? ? ?? 姓：<input type="text" placeholder="firstName" v-model="firstName">
? ? ?? <br>
? ? ?? 名：<input type="text" placeholder="lastName" v-model="lastName">
? ? ?? <br>
? ? ?? 姓名：<input type="text" placeholder="fullName單向" v-model="fullName">
? ? ?? <br>
? ? ?? 姓名：<input type="text" placeholder="fullName雙向" v-model="fullName1">
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創(chuàng)建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? firstName: 'wu',
? ? ? ? ? ? ?? lastName: 'yongmei',
? ? ? ? ? ? ?? // fullName:'wuyongmei',
? ? ? ? ?? },
? ? ? ? ?? // 計算屬性
? ? ? ? ?? computed: {
? ? ? ? ? ? ?? fullName() {
? ? ? ? ? ? ? ? ?? return this.firstName + " " + this.lastName;
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? fullName1: {
? ? ? ? ? ? ? ? ?? get() {
? ? ? ? ? ? ? ? ? ? ?? return this.firstName + " " + this.lastName;
? ? ? ? ? ? ? ? ?? },
? ? ? ? ? ? ? ? ?? set(value) {
? ? ? ? ? ? ? ? ? ? ?? const temp = value.split(' ');
? ? ? ? ? ? ? ? ? ? ?? this.firstName = temp[0];
? ? ? ? ? ? ? ? ? ? ?? this.lastName = temp[1];
? ? ? ? ? ? ? ? ?? }
? ? ? ? ? ? ?? }
? ? ? ? ?? },
?
? ? ? ? ?? // 監(jiān)視
? ? ? ? ?? watch: {
? ? ? ? ? ? ?? firstName: function (value) {
? ? ? ? ? ? ? ? ?? this.fullName = value + " " + this.lastName;
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
class與style綁定
<!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>
?? <style>
? ? ?? .aClass{
? ? ? ? ?? color: blueviolet;
? ? ?? }
? ? ?? .bClass{
? ? ? ? ?? color: blue;
? ? ?? }
? ? ?? .cClass{
? ? ? ? ?? font-size: 30px;
? ? ?? }
?? </style>
</head>
?
<body>
?? <div id="app">
? ? ?? <p :class="a" class="cClass">字體</p>
? ? ?? <p :class="{aClass:true,cClass:false}">字體</p>
? ? ?? <p :class="{bClass:isA,cClass:isB}">字體</p>
? ? ?? <p :class="['aClass','cClass']">字體</p>
? ? ?? <button @click="update">update</button>
?
? ? ?? <p :style="{color:actionColor}">wym</p>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創(chuàng)建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? username: 'HelloWorld',
? ? ? ? ? ? ?? a:'aClass',
? ? ? ? ? ? ?? isA:true,
? ? ? ? ? ? ?? isB:false,
? ? ? ? ? ? ?? actionColor:'red',
? ? ? ? ?? },
? ? ? ? ?? methods:{
? ? ? ? ? ? ?? update(){
? ? ? ? ? ? ? ? ?? this.a='bClass'
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
條件
<!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">
? ? ?? <!-- 清除元素 -->
? ? ?? <p v-if="ok">success</p>
? ? ?? <p v-else>false</p>
? ? ?? <button @click="ok=!ok">click</button>
? ? ?? <!-- 隱藏元素 -->
? ? ?? <p v-show="ok">成功</p>
? ? ?? <p v-show="!ok">失敗</p>
? ? ?? <button @click="ok=!ok">click</button>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創(chuàng)建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? username: 'HelloWorld',
? ? ? ? ? ? ?? ok: false,
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
列表渲染
<!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">
? ? ?? <ul>
? ? ? ? ?? <li v-for="(p,index) in persons" :key="index">{{index}}---{{p.name}}---{{p.age}}
? ? ? ? ? ? ?? ---<button @click="deletP(index)">刪除</button>
? ? ? ? ? ? ?? ---<button @click="update(index)">更新</button>
? ? ? ? ?? </li>
? ? ?? </ul>
?? </div>
?
?? <script src="../vue.js"></script>
?? <script>
? ? ?? //創(chuàng)建實例
? ? ?? const vm = new Vue({
? ? ? ? ?? el: '#app',
? ? ? ? ?? data: {
? ? ? ? ? ? ?? username: 'HelloWorld',
? ? ? ? ? ? ?? persons:[
? ? ? ? ? ? ? ? ?? {name:'wu',age:18},
? ? ? ? ? ? ? ? ?? {name:'lin',age:19}
? ? ? ? ? ? ?? ]
? ? ? ? ?? },
? ? ? ? ?? methods:{
? ? ? ? ? ? ?? deletP(index){
? ? ? ? ? ? ? ? ?? this.persons.splice(index,1)
? ? ? ? ? ? ?? },
? ? ? ? ? ? ?? update(index){
? ? ? ? ? ? ? ? ?? this.persons[index].name="shi"
? ? ? ? ? ? ?? }
? ? ? ? ?? }
? ? ?? })
?? </script>
</body>
?
</html>
