Vue ---- vue的基本使用文本/事件/屬性指令補充: js面向對象 js函數

時間 2019-12-19

標籤 vue 基本使用文本事件屬性指令補充面向對象函數欄目 JavaScript 简体版

原文原文鏈接

目錄javascript

日考題(知識點)🏠

1.http 與 https

http 與 tcp : 一個是應用層, 傳輸層, http 協議傳輸層採用的是tcpcss

http的特色: 無狀態無鏈接先客戶端發送請求, 服務端必定作出響應html

https : 在http協議之上增長ssl安全認證前端

2.前端佈局

流式佈局vue

響應式佈局java

盒子模型佈局: margin padding border contentpython

浮動佈局: float ------ clearfix 清除浮動防止父標籤塌陷react

定位佈局:默認static relative absolute fiexdios

3.orm

對象關係映射css3

表 --- 類記錄 --- 對象字段 --- 對象.屬性

大概的大綱🏠

"""
vue: 
    基礎:指令, 實例成員, 組件(組件間傳參)
    項目: 基於組件開發, 插件(vue-router, store, vuex, axios, vue-cookies, jq+bs ,element-ui)
    
drf
    全稱: django restframework :完成後臺 分離式django項目 
    知識點: 
        請求,響應,渲染,解析,異常
        序列化組件,三大認證(drf永遠不用csrf_token),視圖家族(cbv)
        分頁器,過濾,篩選,搜索,排序
小商城項目:
    知識點:git,多方式登陸,第三方短信認證(面向對象二次封裝),支付寶,項目上線
    目的: 瞭解先後臺分離項目, 前端後端徹底獨立,瞭解公司開發項目的模式
"""

vue框架🏠

開發版本：vue.js
生產版本：vue.min.js

前臺主流框架: angular, react,vue

vue 有前兩大框架優勢, 擯棄缺點, 沒有前兩個框架健全 數據驅動

ECMA Script ec5/6 type Script

vue優勢:官網中文api, 單頁面應用,基於組件開發, 數據雙向綁定,虛擬DOM, 數據啓動思想(相比DOM驅動),

1.建立vue實例

# vue的導入
<script src="vue.js"></script> <!--vue的導入 能夠取消console的打印大約在9000行-->

# vue實例
console.log(Vue);

# 建立vue實例
let app = new Vue({})
// 不一樣於jq 能夠建立多個實例 每個實例均可以控制一個標籤

2.掛載點

<div id='d1'>{{ }}</div>
<div class='d2'>{{ }}</div>
<div class='d2'>{{ }}</div>

let app = new Vue({
    el:'#id', // 掛載點 vue實例與頁面標籤創建關聯
    el:'.d2', // 掛載點採用的是css3選擇器語法, 可是隻能匹配第一次搜索到的結果
})

// 1.一般使用id爲掛在點
// 2.可是 html 和 body 不能成爲掛載點!!

<div id="d1">
        {{ }} <!--雙大括號是vue的語法 使用el:id 能夠與頁面創建聯繫-->
 </div>

3.data 變量

data:{
        msg:'message',
        info:'info', // 掛載點出現的變量由data提供
        pStyle:{
            color:'red' // 樣式操做
        }
    },

<div id="d1">
        {{ info }} <!--數據由data提供-->
        {{ msg }}
        <!--屬性 用 bind-->
        <p v-bind:style="pStyle">{{info}}</p>
 </div>

4.methods 方法

methods:{
    pClick:function () {
        // 如何拿到vue實例?
        // app.pStyle.color = 'yellow'
        // 可使用this來獲取
        console.log(this.info);

        // 切換案例
        if (app.pStyle.color !== 'yellow'){
            app.pStyle.color = 'yellow'
        }else{
            app.pStyle.color = 'red'
            }
        }
    }
})

// 聲明的實例是否用一個變量來接收
 // 1.在實例內部不須要,用this就表明當前vue實例自己
 // 2.在實例外部或其餘實例內部須要使用能夠用變量接收

<body>
    <div id="d1">
        <!--事件 用 on-->
        <p v-on:click="pClick">{{ info }}</p>  <!--點擊事件由methods提供-->  
        <!--屬性 用 bind-->
        <p v-bind:style="pStyle">{{info}}</p>
    </div>
</body>

5.插值表達式

完成運算和一些方法的調用

<p>{{ msg }}</p>
<p>{{ num }}</p>
<!--插值表達式 運算 -->
<p>{{ num + 1 }}</p> <!--num 的運算-->
<p>{{ num * 10}}</p>
<p>{{ msg[1] }}</p> <!--取msg的第一個字符-->
<p>{{ msg.split('') }}</p> <!--按空格拆分-->
<p>{{ msg.split('')[0] }}</p> <!--按空格拆分 取 0-->

new Vue({
    el:'xxx',
    data:{
        msg:'msg',
        num:10,
    }
})

6.文本指令

{{ }} <!--插值表達式-->
v-text <!--不能解析html語法文本,會原樣輸出-->
v-html <!--能解析html語法文本-->
v-once <!--處理的標籤的內容只能被解析一次 渲染一次就不能改了-->

<p v-html='info'></p>  點擊
<p v-text='info'></p>  '<a>點擊</a>'

new Vue({
    el:'xxx',
    data:{
        info:'<a>點擊</a>'
    }
})

7.事件指令

<!--事件指令語法: v-on:事件名='方法變量'-->
<!--支持簡寫: @事件名='方法變量'-->
<p v-on:click='f1'>{{ msg }}</p> <!--點擊事件-->

<!--mouseover mouserenter  |  mouseout mouseleave-->
<p v-on:mouseover='f1'>{{ msg }}</p> <!--鼠標懸浮事件-->
<p v-on:mouseout='f1'>{{ msg }}</p> <!--鼠標離開事件-->
<p v-on:mousedown='f1'>{{ msg }}</p> <!--鼠標按下事件-->
<p v-on:mouseup='f1'>{{ msg }}</p> <!--鼠標擡起事件-->
<p v-on:mousemove='f1'>{{ msg }}</p> <!--鼠標移動事件-->
<p v-on:contextmenu='f1'>{{ msg }}</p> <!--右鍵事件-->

<!--vue事件傳參數-->
<!--事件變量 不加() 默認會傳事件對象:$event --> 
<p @click='f2'>{{ msg }}</p> 
<!--事件變量 添加() 表明要自定義傳參 系統再也不傳入對象 可是能夠手動傳入 事件 對象 -->
<p @click='f2($event, 1 )'></p>

new Vue({
    data:{msg:'沒點擊了'},
    methods:{
        f1(){
            this.msg = '點擊了'
        },
        f2(env){
            pass
        }
    }
})

8.屬性指令

<div class='d1' name='n1' title='懸浮提示' style='color:red'></div>
<!--裏面的都叫屬性 style 裏面的叫樣式-->

<!--屬性指令:v-bind:屬性名='變量名'-->
<!--簡寫: :屬性名='變量名'  ***-->
<p v-bind:title='pTitle' :abc='def' :style='pStyle'>簡單使用</p>

<!--class 屬性綁定 特色 能夠賦值一個 也能夠多個-->
<p v-bind:class='C1'>簡單使用</p>
<p v-bind:class='[C1,C2]'>設置多個</p>
<p v-bind:class='["d1",C1,C2]'>設置死值</p>

<!--true爲起做用 false 不起做用 x1是變量-->
<!--邏輯能夠直接在click裏面寫 x1 = x1取反-->
<p :class='{x1: true}' @click='x1 = !=x1'>布爾類型屬性</p>

new Vue({
    el:'#app1',
    data:{
        pTitle:'懸浮信息',
        def:'自定義屬性',
        pStyle:{
            color:'red',
            backgroundColor:'red', // 駝峯命名 對應的就是 - 鏈接
        },
        C1:'d1 d1', // 賦值方式一
        C2:'d1',
        C3:'d2',
    }
})

.d1{background-color:'green';}
.d2{width:100%;}

9.補充:面向對象js

// 數據類型
// undefined , null, string, number, object(Array), function, 
// var , let, const , 不寫

// 面向過程
function f1() {console.log('123')};
f1()
// 面向對象 稱爲構造函數 == 類
function F1(name) {
    // 屬性
    this.name = name
    // 方法
    this.eat = function(food){
        console.log(this.name + '在吃' + food)
    } 
};

// 實例化
let f2 = new F2('Tom');
console.log(f2);  // >>> 'Tom'
f2.eat('嫂子');   // >>> 'Tom在吃嫂子'

// 面向對象2
let obj = {
    name:'dragon',
    // 方法1
    eat:function(food){console.log(this.name + '在吃' + food)}
    // 方法簡寫2
    eat(food){ console.log(this.name + '在吃' + food)}
}

10.補充:js函數

// 變量的4種定義方式
function f1(){
    var a = 10; 
    let a = 20;  // let const 定義的變量不能重複定義, 且具有塊級做用域
    const c = 30; // 常量 不能修改
    d = 40; // 不加聲明詞 全局變量 外部能夠調用
}

// 函數的定義方式
function f1(){};
f1();

let f2 = function(){};
f2();

// 箭頭函數
let f3 = () => {};
f3();

// 若是箭頭函數沒有函數體,只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);

// 若是箭頭函數參數列表只有一個 能夠省略()
let f5 = num => num*10
res = f5(10);

function和 箭頭函數的區別

// 重點: function,箭頭函數,方法,都有本質區別
// 在箭頭函數中是沒有this的 裏面的this指向的是window的 
// 應用場景
new Vue({
    data:{res:''},
    methods:{
        fn(){
            this.$axios({
                url:'',
                mehtod:'get',
                data:{}
            }).then(function(response){
                this.res = response // 這樣式不行的 由於這裏的this指代的是axios 
              .then(response => {
                this.res = response // 這樣的話就不會產生this 會去找父級的this
                })
            })
        }
    }
})