javascript
php
# vue能夠幹哪些事
# 將數據渲染到指定區域(數據能夠是後臺獲取,也能夠由前臺本身產生)
# 能夠與頁面完成基於數據的交互方式css
三大主流框架之一:Angular React Vue
先進的前端設計模式:MVVM
能夠徹底脫離服務器端,之前端代碼複用的方式渲染整個頁面:組件化開發html
# 1.整合了Angular React框架的優勢(第一手API文檔是中文的)
# 2.單頁面應用(得益於vue的組件化開發 => 前臺代碼的複用)
# 3.虛擬DOM(提升操做DOM的效應)
# 4.數據的雙向綁定前端
special -- 特色vue
單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOMjava
<div id="app"> {{ }} </div> <script src="js/vue.min.js"></script> <script> new Vue({ el: '#app' }) </script>
node
生產版本:python
new Vue({ el: '#app' }) // 實例與頁面掛載點一一對應 // 一個頁面中能夠出現多個實例對應多個掛載點 // 實例只操做掛載點內部內容
<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>
<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爲事件提供實現體-->
<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>
<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>
<div id='app'> ${ msg } </div> <script> new Vue({ el: '#app', data: { msg: 'message' }, delimiters: ['${', '}'] }) </script>
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已更新"); } // 拿到需求 => 肯定鉤子函數 => 解決需求的邏輯代碼塊 })
<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>
-裝上node.js
-裝vue腳手架
-vue create 項目名
-ide:前端開發,webstorm,pychram,idea,goland,php
-用pycharm跑vue的項目
-
-建立一個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>
-安裝 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" >
https://www.cnblogs.com/hskw/p/9294860.html