# vue可以干哪些事
# 將數據渲染到指定區域（數據可以是后台獲取，也可以由前台自己產生）
# 可以與頁面完成基於數據的交互方式
三大主流框架之一：Angular React Vue
先進的前端設計模式：MVVM
可以完全脫離服務器端，以前端代碼復用的方式渲染整個頁面：組件化開發
# 1.整合了Angular React框架的優點（第一手API文檔是中文的）
# 2.單頁面應用（得益於vue的組件化開發 => 前台代碼的復用）
# 3.虛擬DOM（提高操作DOM的效應）
# 4.數據的雙向綁定
special -- 特點
單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOM
<div id="app">
{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
-
-
生產版本：
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>
生命周期鈎子
-
-
鈎子函數: 滿足特點條件被回調的方法
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>
-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