Python-WEB -VUE初識 + webstorm

走進Vue_漸進式 JavaScript 框架

經過對框架的瞭解與運用程度,來決定其在整個項目中的應用範圍,最終能夠獨立以框架方式完成整個web前端項目javascript

what -- 什麼是Vue

能夠獨立完成先後端分離式web項目的JavaScript框架php

# vue能夠幹哪些事
# 將數據渲染到指定區域(數據能夠是後臺獲取,也能夠由前臺本身產生)
# 能夠與頁面完成基於數據的交互方式css

 

why -- 爲何要學習Vue

三大主流框架之一:Angular React Vue
先進的前端設計模式:MVVM
能夠徹底脫離服務器端,之前端代碼複用的方式渲染整個頁面:組件化開發html

# 1.整合了Angular React框架的優勢(第一手API文檔是中文的)
# 2.單頁面應用(得益於vue的組件化開發 => 前臺代碼的複用)
# 3.虛擬DOM(提升操做DOM的效應)
# 4.數據的雙向綁定前端

special -- 特色vue

單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOMjava

how -- 如何使用Vue

<div id="app">
	{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
	new Vue({
		el: '#app'
	})
</script>

Vue實例(vue的掛載點)

el:實例

new Vue({
    el: '#app'
})
// 實例與頁面掛載點一一對應
// 一個頁面中能夠出現多個實例對應多個掛載點
// 實例只操做掛載點內部內容

data:數據

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	data: {
    		msg: '數據',
    	}
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data爲插件表達式中的變量提供數據 -->
<!-- data中的數據能夠經過Vue實例直接或間接訪問-->
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // Vue實例會根據數據產生虛擬DOM,最終替換掉掛載點的真實DOM(不要掛在到body上)
    var app = new Vue({
        el: '#app',
        data: {
            msg: "今晚嘿嘿"
        }
    });

    // 若是須要使用vue對象(實例), 那麼久能夠接受Vue建立的結果, 反之就不須要接收
    console.log(app);
    console.log(app.$attrs); // vue實例的變量都是以$開頭
    console.log(app.$el);
    console.log(app.$data.msg);
    console.log(app.msg);
    // app對象 = new Vue()實例 = 標籤div#app組件

</script>

  

 

  

methods:方法

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">測試</p>
	<p class="box" v-on:mouseover="pOver">測試</p>
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	methods: {
            pClick () {
                // 點擊測試
            },
            pOver () {
                // 懸浮測試
            }
    	}
    })
</script>
<!-- 瞭解v-on:爲事件綁定的指令 -->
<!-- methods爲事件提供實現體-->

computed:計算

<div id="app">
 	<input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>

<script>
	// 一個變量依賴於多個變量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this表明該vue實例
                return this.a + this.b;
            }
        }
    })
</script>

  

watch:監聽

<div id="app">
 	<input type="text" v-model="ab">
    <div>
        {{ a }}
        {{ b }}
    </div>
</div>

<script>
	// 多個變量依賴於一個變量
    new Vue({
        el: "#app",
        data: {
            ab: "",
            a: "",
            b: "",
        },
        watch: {
            ab: function() {
                // 邏輯根據需求而定
                this.a = this.ab[0];
                this.b = this.ab[1];
            }
        }
    })
</script>

  

delimiters:分隔符

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
    	el: '#app',
    	data: {
    		msg: 'message'
    	},
        delimiters: ['${', '}']
    })
</script>

生命週期鉤子

  • 表示一個vue實例從建立到銷燬的這個過程,將這個過程的一些時間節點賦予了對應的鉤子函數linux

  • 鉤子函數: 知足特色條件被回調的方法

    new Vue({
        el: "#app",
        data: {
            msg: "message"
        },
        beforeCreate () {
            console.log("實例剛剛建立");
            console.log(this.msg);
        },
        created () {
            console.log("實例建立成功, data, methods已擁有");
            console.log(this.msg);
        },
        mounted () {
            console.log("頁面已被vue實例渲染, data, methods已更新");
        }
        // 拿到需求 => 肯定鉤子函數 => 解決需求的邏輯代碼塊
    })
    

      

Vue指令

文本相關指令

<div id="app">
    <!-- 插值表達式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本會被msg替換 -->
    <p v-text='msg'>原文本</p>
    <!-- 能夠解析帶html標籤的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的標籤只能被賦值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
	// 指令: 出如今html標籤中能夠被vue解析處理的全局屬性
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
<body>
    <div id="app">
        <p>{{ info }}</p>
        <!-- v-text 爲vue的文本指令 ="info" , info爲vue實例data中的一個變量 -->
        <p v-text="info"></p>
        <p v-text="msg"></p>
        <p v-html="res"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            info: "插值表達式",
            msg: "文本指令",
            res: "<b>加粗的文本</b>"
        }
    })
</script>

 

屬性指令

<body>
    <div id="app">
        <!-- v-bind:屬性 = "變量" -->
        <!-- 若是abc自定義屬性被v-bind:指令綁定了,後面的值也會成爲vue變量, 若是就想是普通字符串, 再用''包裹 -->
        <!-- : 就是 v-bind: 的簡寫方式 (1.經常使用 2.必定且只操做屬性)-->
        <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>

        <!--最經常使用的兩個屬性 class | style-->

        <!--class-->
        <p :class="a"></p> <!-- 單類名 --> 
        <p :class="[a, b]"></p> <!-- 多類名 -->
        <p :class="{c: d}"></p> <!-- 瞭解: c爲類名,是否起做用取決於d值爲true|false 開關類名 -->
        <!--style-->
        <p :style="s1"></p> <!-- s1爲一套樣式 --> 
        <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 瞭解: s1,s2均爲一套樣式, ta是一個變量,專門賦值給textAlign("text-align") --> 

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            h_info: "懸浮提示",
            hehe: "呵呵",
            a: 'active',
            b: 'rule',
            d: false,
            s1: { // 樣式1: 值1, ..., 樣式n: 值n
                width: '200px',
                height: '200px',
                background: 'red'
            },
            s2: {
                borderRadius: '50%'
            },
            ta: 'center'
        }
    })
</script>

  

 

事件指令

<body>
    <div id="app">
        <!-- v-on:事件 = "變量 簡寫 @ -->
        <!-- 事件綁定的變量能夠在data中賦值,但建議在methods中賦值 -->
        <p v-on:click="fn1">11111111111111</p>
        <p @click="fn2">22222222222222</p>
        <!--vue事件的綁定能夠傳自定義參數-->
        <p @click="fn3(333)">3333333333333333</p>
        <!--vue事件的綁定不傳自定義參數, 默認將事件對象傳過去了-->
        <p @click="fn4">4444444444444444</p>
        <!--vue事件的綁定傳自定義參數, 還要將事件對象傳過去了, 要明確傳$event-->
        <p @click="fn5(555, $event)">5555555555555555</p>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            // 事件在data中提供一個函數地址,能夠實現事件
            fn1: function () {
                console.log("11111111111111")
            }
        },
        // 事件儘可能(要求)都放在vue實例的methods中
        methods: {
            fn2: function () {
                console.log("22222222222222")
            },
            fn3 (arg) {  // ES6語法
                console.log(arg)
            },
            fn4: function (ev) {
                console.log(ev)
            },
            fn5: function (arg, ev) {
                console.log(arg)
                console.log(ev)
            },
        }
    })
</script>

 

 

 

表單指令

<body>
    <div id="app">
        <!-- v-model = "變量" 本質操做的就是表單元素的value -->
        <!--v-model就是完成數據的雙向綁定-->
        <form action="">
            <input type="text" v-model="info"> <!-- info變量就是表明輸入框的value -->
            <input type="text" v-model="info">

        </form>
        <p> {{ info }} </p>
        <!--v-once只會被賦值一次,就再也不改變,而且要結合插值表達式使用-->
        <p v-once="info">{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
//            info: "初始value",
            info: ""
        },
    })
</script>

  

 

 

-vue項目建立


-裝上node.js
-裝vue腳手架
-vue create 項目名
-ide:前端開發,webstorm,pychram,idea,goland,php
-用pycharm跑vue的項目
-


-目錄介紹


 


-每一個組件一般有三部分:template:html相關,style:樣式 ,script:js代碼

-建立組件

 


-建立一個course.vue
-配置路由:route.js中
import Course from './views/Course.vue'
{
path: '/course',
name: 'course',
component:Course
}
-<router-link to="/course">免費課程</router-link> 實現路由跳轉

-顯示數據

 


-在script中:
data:function () {
return{
courses:['python','linux','java'],
}
}
-在template中就可使用retrun的變量
-{{courses}}
-用v-for顯示數據
<ul>
<li v-for="course in courses">{{course}}</li>
</ul>


-與後臺交互

 


-element-ui

-安裝 npm i element-ui -S
-使用:
1 在main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2 從官網上copy代碼,粘貼,修改
-圖片綁定
//item是js中的一個變量
<img :src="item" >

Webstorm安裝、破解、使用

https://www.cnblogs.com/hskw/p/9294860.html

相關文章
相關標籤/搜索