Vue快速學習_第一節

　　以前寫CRM都是Django先後端一塊兒寫的,在大部分項目中實際上先後端是分離的,所以咱們須要學習一個前端框架來進行前端頁面的編寫,這裏選擇了Vue進行學習,好了開始學習吧.
　　
　　1.ES6部分知識點學習
　　
　　let： 與var不一樣,var存在變量提高問題
　　
　　特色：
　　
　　1.局部做用域
　　
　　2.不會存在變量提高
　　
　　3.變量不能重複聲明
　　
　　const: 常量聲明
　　
　　特色：
　　
　　1.局部做用域
　　
　　2.不會存在變量提高
　　
　　3.不能重複聲明，只聲明常量 不可變的量
　　
　　模板字符串
　　
　　// 經過反引號 ${變量名}來插值
　　
　　let name = 'liu';
　　
　　let res = `我是${name}`;
　　
　　console.log(res);    ---> 我是liu
　　
　　箭頭函數
　　
　　複製代碼
　　
　　// 箭頭函數等同於add1 = function(x, y){return x+y;}
　　
　　let add1 = (x, y) => {
　　
　　return x+y;
　　
　　};
　　
　　// 更簡單的使用
　　
　　let add2 = (x, y) => x+y;
　　
　　console.log(add1(3,2));         ---> 5
　　
　　console.log(add2(3,2));         ---> 5
　　
　　複製代碼
　　
　　對象的單體模式(通常都用這種)
　　
　　複製代碼
　　
　　// 這是對象中使用箭頭函數,此時的this指向的是person的父級對象(上下文,window)
　　
　　var person1 = {
　　
　　name: 'liu',
　　
　　age: '20',
　　
　　fav: () => {
　　
　　console.log(this);
　　
　　}
　　
　　};
　　
　　person1.fav();        --->  Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …}
　　
　　// 爲了解決箭頭函數this指向的問題 推出來一種寫法 對象的單體模式, 此時的this指向的是person對象
　　
　　var person2 = {
　　
　　name: 'liu',
　　
　　age: '20',
　　
　　fav(){
　　
　　console.log(this);
　　
　　}
　　
　　};
　　
　　person2.fav();    --->  {name: "liu", age: "20", fav: ?}
　　
　　複製代碼
　　
　　面向對象(ES6的類)
　　
　　複製代碼
　　
　　// 基於原型的模式建立對象(prototype,繼承當前父類)
　　
　　function Person1(name,age){
　　
　　this.name = name;
　　
　　this.age = age;
　　
　　}
　　
　　Person1.prototype.showName = function(){
　　
　　console.log(this.name);
　　
　　};
　　
　　var p1 = new Person1('liu', 18);
　　
　　p1.showName();
　　
　　class Person2{
　　
　　// 構造器  當你建立實例的時候 constructor()方法會馬上調用 一般這個方法初始化對象的屬性,相似py的__init__方法
　　
　　constructor(name,age){
　　
　　this.name = name;
　　
　　this.age = age;
　　
　　}
　　
　　showName(){
　　
　　console.log(this.name);
　　
　　}
　　
　　}
　　
　　var p2 = new Person2('liu', 18);
　　
　　p2.showName();
　　
　　複製代碼
　　
　　2.Vue的基礎使用
　　
　　vue下載及引包(剛開始學習建議先這樣)
　　
　　<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
　　
　　// 在html中引入:
　　
　　<script src='./vue.js'></script>
　　
　　簡單Vue實例化及模板語法
　　
　　複製代碼
　　
　　// 模板語法, 能夠插入任何你想插入的內容，除了if-else if-else用三元運算符代替
　　
　　<div id="box">
　　
　　<!--模板語法(內部不能寫if else if-else用三元運算符代替)-->
　　
　　<!--去data中找到msg的值展現在頁面-->
　　
　　<h3>{{ msg }}</h3>
　　
　　<!--直接運算獲得結果展現在頁面上-->
　　
　　<h3>{{ 1+2+3 }}</h3>
　　
　　<!--字符,對象都能直接被渲染到頁面-->
　　
　　<h3>{{ {name: 'xiaohua'} }}</h3>
　　
　　<!--取出person對象的屬性name值-->
　　
　　<h3>{{ person.name }}</h3>
　　
　　<!--三元運算符計算-->
　　
　　<h3>{{ 1>2?'對':'錯' }}</h3>
　　
　　<!--翻轉字符串,獲得nohtyp evol,證實{{}}中可使用js語法-->
　　
　　<h3>{{ str1.split('').reverse().join('') }}</h3>
　　
　　</div>
　　
　　複製代碼
　　
　　複製代碼
　　
　　// 實例化Vue
　　
　　new Vue({
　　
　　el: '#box',  // 綁定id爲box的標籤,固定寫法el
　　
　　data:{
　　
　　msg: '測試',
　　
　　str1: 'love python',
　　
　　person:{
　　
　　name: 'liu',
　　
　　age: 18
　　
　　}
　　
　　}
　　
　　})
　　
　　複製代碼
　　
　　Vue的指令系統之v-text和v-html
　　
　　v-text至關於innerText
　　
　　v-html至關於innerHTML
　　
　　<!--直接將msg當成字符串讀取展現-->
　　
　　<div v-text="msg"></div>
　　
　　<!--讀取後解析成標籤展現,這個比較經常使用-->
　　
　　<div v-html="msg"></div>
　　
　　複製代碼
　　
　　new Vue({
　　
　　el: '#box',
　　
　　data(){
　　
　　// data中是一個函數,函數返回一個對象,能夠爲空,但必須返回
　　
　　return {
　　
　　msg: "<h4>你好</h4>"
　　
　　}
　　
　　}
　　
　　})
　　
　　複製代碼
　　
　　Vue的指令系統之v-if和v-show,還有個v-else
　　
　　複製代碼
　　
　　<div id="box">
　　
　　<!--執行add方法並將值展現在頁面-->
　　
　　{{ add(1, 2) }}
　　
　　<!--給button按鈕綁定click事件,方法是changeShow-->
　　
　　<button v-on:click = 'changeShow'>點擊顯示隱藏</button>
　　
　　<!--isShow爲true就顯示,爲false就隱藏-->
　　
　　<div class="t1" v-show="isShow"></div>
　　
　　<!--官網例子,若是隨機數大於0.5就顯示Now you see me, 不然就顯示Now you don't-->
　　
　　<div v-if="Math.random() > 0.5">
　　
　　Now you see me
　　
　　</div>
　　
　　<div v-else>
　　
　　Now you don't
　　
　　</div>
　　
　　</div>
　　
　　複製代碼
　　
　　複製代碼
　　
　　// 數據驅動視圖
　　
　　new Vue({
　　
　　el: '#box',
　　
　　data(){
　　
　　return{
　　
　　isShow: true
　　
　　}
　　
　　},
　　
　　// 方法都在這裏面定義
　　
　　methods: {
　　
　　add(x, y){
　　
　　return x+y
　　
　　},
　　
　　changeShow(){
　　
　　// 點擊按鈕就取反而後賦值,因此點擊就是一直顯示隱藏
　　
　　this.isShow = !this.isShow
　　
　　}
　　
　　}
　　
　　})
　　
　　複製代碼
　　
　　v-if和v-show 等於 true都是表示顯示,false表示隱藏,那區別是啥呢?
　　
　　複製代碼
　　
　　v-if vs v-show
　　
　　v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
　　
　　v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。
　　
　　相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。
　　
　　通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，
　　
　　則使用 v-show 較好(也能夠經過增長class或刪除class實現)；若是在運行時條件不多改變，則使用 v-if 較好。
　　
　　複製代碼
　　
　　上面是官網說法,實際上簡單來說就是v-show就是改變display屬性,而v-if則是對dom的建立和刪除.
　　
　　Vue的指令系統之v-bind和v-on
　　
　　v-bind能夠綁定標籤中任何屬性 好比:img標籤的src,a標籤的href,id,class,name等
　　
　　v-on 能夠監聽 js中全部事件
　　
　　簡寫：
　　
　　v-bind:src  等價於   :src
　　
　　v-on:click 等價於 @click
　　
　　複製代碼
　　
　　<!DOCTYPE html>
　　
　　<html lang="en">
　　
　　<head>
　　
　　<meta charset="UTF-8">
　　
　　<title>Title</title>
　　
　　<style>
　　
　　.t1{
　　
　　width: 200px;
　　
　　height: 200px;
　　
　　background-color: #ff0000;
　　
　　}
　　
　　.active{
　　
　　background-color: #0f0;
　　
　　}
　　
　　</style>
　　
　　</head>
　　
　　<body>
　　
　　<div id="box">
　　
　　<!--第一種寫法-->
　　
　　<!--<button v-on:mouseenter="changeGreen" v-on:mouseLeave="changeRed">改變顏色</button>-->
　　
　　<!--綁定src和alt屬性,使用從服務器返回的動態數據-->
　　
　　<!--<img v-bind:src="imgSrc" v-bind:alt="imgAlt">-->
　　
　　<!--若是isActive爲true就把active加到class裏面,爲false就不加-->
　　
　　<!--<div class="t1" v-bind:class="{active:isActive}"></div>-->
　　
　　<!--第二種簡寫,之後都用簡寫-->
　　
　　<button @mouseenter="changeGreen" @mouseLeave="changeRed">改變顏色</button>
　　
　　<!--綁定src和alt屬性,使用從服務器返回的動態數據-->
　　
　　<img :src="imgSrc" :alt="imgAlt">
　　
　　<!--若是isActive爲true就把active加到class裏面,爲false就不加-->
　　
　　<div class="t1" :class="{active:isActive}"></div>
　　
　　</div>
　　
　　</body>
　　
　　<script src="vue.js"></script>
　　
　　<script>
　　
　　//數據驅動視圖  設計模式 MVVM  Model(數據)  View(前端展現)  ViewModel(相似v-bind方法)
　　
　　new Vue({
　　
　　el: '#box',
　　
　　data(){
　　
　　// img相關的動態數據
　　
　　return {
　　
　　imgSrc: "timg.jpg",
　　
　　imgAlt: '圖片',
　　
　　isActive: true,
　　
　　}
　　
　　},
　　
　　methods: {
　　
　　// 鼠標進入離開的執行方法
　　
　　changeGreen(){
　　
　　this.isActive = false;
　　
　　},
　　
　　changeRed(){
　　
　　this.isActive = true;
　　
　　}
　　
　　}
　　
　　})
　　
　　</script>
　　
　　</html>