vue基礎總結
Vue總結css
vue引入與導出html
引入一個js文件,若是js文件中有 export default xxx 的內容 就這樣引入: import 名稱 from '路徑' 若是js文件中沒有 export default xxx 內容 須要這樣引入: import '路徑' (此時window增長一個全局變量 initGeetest) 只有在index.html和main.js引入纔是全局引入
vue第一天前端
vuevue
Vue是一個優秀的前端框架 開發者按照Vue的規範進行開發 Vue能作什麼? 1. 和DOM解耦 與DOM關係很少 2. 適應當前SPA的項目開發 single page application 單一頁面應用 3.掌握Vue的開發語法 至關於掌握了新的開發模式,能夠適應目前絕大多數的技術環境 特色: 1. 數據驅動視圖 可讓咱們只關注數據 2. MVVM 雙向綁定 3. 經過指令加強了html功能 新特性 4. 組件化 複用代碼
實例選項-elnode
- 做用:當前Vue實例所管理的html視圖 - 值:一般是id選擇器(或者是一個 HTMLElement 實例) - 不要讓el所管理的視圖是html或者body!
實例選項-dataios
- Vue 實例的數據對象，是響應式數據(數據驅動視圖) 數據變化 => 視圖變化 - 能夠經過 vm.$data 訪問原始數據對象 - Vue 實例也代理了 data 對象上全部的屬性，所以訪問 vm.a 等於 vm.$data.a - 視圖中綁定的數據必須顯式的初始化到 data 中 ,顯示到視圖中的數據在data中必須定義 - 數據對象的更新方式 直接 採用 實例.屬性 = 值 vm.name = "張三"
實例選項-methodsvue-router
- methods是一個對象 - 能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。 - 方法中的 this 自動綁定爲 Vue 實例。 - methods中全部的方法 一樣也被代理到了 Vue實例對象上,均可經過this訪問, vm.fn() - 注意，不該該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.a 將是 undefined
插值表達式(重要)express
做用:會將綁定的數據實時的顯示出來:npm
形式: 經過 {{ 插值表達式 }}包裹的形式編程
經過任何方式修改所綁定的數據,所顯示的數據都會被實時替換(響應式數據)
a , a = 10 , a == 10 , a > 10, a + b + c
"1" + "2" + "3", a.length.split(''), a > 0 ? "成功" : "失敗"
注意:不能寫 var a = 10; 分支語句 循環語句,不能夠帶有JS關鍵字
例:
<p>{{ count === 1 }}</p> #返回Boolean類型
<!-- count 爲data中的數據 -->
<p>{{ count === 1 ? "成立" : "不成立" }}</p>
<p>{{ fn() }}</p> #調用方法
指令(重要)
- 指令 (Directives) 是帶有 v- 前綴的特殊特性。
- 指令特性的值預期是單個 JavaScript 表達式(v-for 是例外狀況，稍後咱們再討論)。
- 指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。
指令位置: 起始標籤
插值表達式: 更新標籤中局部的內容
v-text 更新整個標籤中的內容
v-html 更新標籤中的內容/標籤,能夠渲染內容中的HTML標籤(少用,容易形成危險)
v-if 和 v-show v-show本質是經過修改標籤的display值
v-if="isShow" isShow: false
場景: 須要根據條件決定 元素是否顯示 使用以上指令
使用: v-if 和 v-show 後面的表達式返回的布爾值 來決定 該元素顯示隱藏
注意 : v-if 是直接決定元素 的 添加 或者刪除 而 v-show 只是根據樣式來決定 顯示隱藏v-on綁定事件:
<input type="text" @change="fn()"> #fn()默認參數爲$event,methods內的函數默認第一個參數也是event
v-on:事件名.修飾符="方法名" ,v-on:能夠用@代替
注意 方法名 中 能夠採用$event的方式傳形參 也能夠直接寫事件名 默認第一個參數爲event事件參數
傳遞$event的時候,$必須加,若是不寫,methods中的函數默認第一個參數爲event事件參數
例:fn(count,$event)
修飾符(可不寫)
.once - 只觸發一次回調。
.prevent - 調用 event.preventDefault()。獲取當前input中輸入的值:
#event事件中target指的是觸發該事件的元素 是DOM對象
console.log(event.target.value);
@change:鼠標失去焦點輸出
@input:value值變化就輸出
遍歷數組和對象v-for
注意 v-for寫的位置 應該是重複的標籤上 不是其父級元素上 須要注意
item in items // item爲當前遍歷屬性數組項的值
(item,[index]) in items //item爲當前遍歷屬性數組項的值 index爲數組的索引
v-for 指令須要使用 item in items 或者 item of items 形式的特殊語法，in/of 同樣
items 是源數據數組 /對象 <p v-for="item in list">{{item}}</p>
對象:
item in items // item爲當前遍歷屬性對象的值
(item,[ key], [index]) in items //item爲當前遍歷屬性對象的值 key爲當前屬性名的值 index爲當前索引的值
vue次日
v-for-key
- 場景:列表數據變更會致使 視圖列表從新更新 爲了 提高性能 方便更新 須要提供 一個屬性 key
- 使用: 一般是給列表數據中的惟一值 也能夠用索引值
語法:
<li v-for="(item,index) in list" :key="index">
v-if和v-for優先級
<p v-if="index>1" v-for="(item,index) in list"></p>
v-for 的優先級大於v-if ,全部v-if才能使用v-for的index變量
若是遇到 v-if判斷數組變量 須要在循環體外再創建一個判斷 v-if
<div v-if="list.length >4">
<li v-if="index>2" v-for="(item,index) in list" :key="index">
{{ item }}
</li>
</div>
v-bind
- 做用:綁定標籤上的任何屬性 - 場景: 當標籤上的屬性是變量/動態/須要改變的 <p v-bind:id="ID"></p> // ID爲數據對象中的變量值 <p :id="ID"></p> // 簡寫
v-bind-綁定class-對象語法
綁定class對象語法 :class="{ class名稱: 布爾值 }"
<p :class="{left:showClass}">內容</p>
showClass:true
若是showClass的值爲true,則加上left類,若爲false,則不加
<p v-bind:class="name"></p>
name: "test" 加上test類
綁定class和原生class會進行合併
v-bind-綁定class-數組語法
綁定class數組語法 :class="[class變量1,class變量2..]" #綁定class和原生class會進行合併 <p :class="[activeClass,selectClass]" class="default">內容</p>
v-bind-綁定style-對象語法
<p :style="{fontSize:fontSize,color:color,fontWeight:fontWeight}">Hello world</p>
複合標籤必須採用小駝峯命名
當屬性名和 值的變量名一致是 能夠簡寫 爲 color:color => color
<p :style="{fontSize,color,fontWeight}">Hello world</p>
data: {fontSize: "48px", color: "red",fontWeight: "bold"} #data數據以下
v-bind-綁定style-數組語法
語法: :style="[對象1,對象2...]"
對象能夠是多個屬性的 集合 一樣裏面的css屬性須要聽從小駝峯命名的規則
例:
<p v-bind:style="[obj1,obj2]" style="color:blue">Hello world</p>
data: {
obj1: {fontSize: "48px",color: "red", backgroundColor: "black"},
obj2: { backgroundColor: "yellow" }
}
原有內聯CSS會先執行,後加CSS若有重複會覆蓋內聯樣式
v-model-基礎用法
做用: 表單元素的綁定
特色: 雙向數據綁定
數據發生變化能夠更新到界面
經過界面能夠更改數據
v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值而老是將 Vue 實例的數據做爲數據來源。應該在 data選項中聲明初始值。
<input type="text" v-model="name" />
<p v-text="name"></p>
語法糖原理
<input type="text" @input="changeInput" :value="name" />
changeInput(){this.name = event.target.value;}
經過v-on指令和 v-bind指令 組合實現v-model效果
利用input事件,獲取value實時變化的值,用v-bind綁定value的初始值與data數據一致
v-model綁定其它表單
當表單type屬性爲Checkbox的時候,獲取的是當前表單value值 當表單type屬性爲Checkbox的時候,未選中默認爲false,選中爲true
v-cloak
解決頁面初次渲染時 頁面模板閃屏現象
<div v-cloak id="app"> #能夠一次性 將v-cloak引用在實例視圖上 避免屢次寫入標籤
[v-cloak] { display: none; }
v-once
- 做用: 使得所在元素只渲染一次
- 場景:靜態化數據
<p>{{ name }}</p>
<p v-once>{{ name }}</p> #數據再也不變化
<input type="text" v-model="name" />
全局過濾器
1. 在建立 Vue 實例以前定義全局過濾器Vue.filter()
2. Vue.filter('該過濾器的名字',(要過濾的數據)=>{return 對數據的處理結果});
3. 在視圖中經過{{數據 | 過濾器的名字}}或者v-bind使用過濾器
<p>{{ name | toUpper }}</p> #應用過濾器
1 註冊過濾器
Vue.filter("toUpper", function(value) {
// 2 實現過濾邏輯
return value.charAt(0).toUpperCase() + value.substr(1);
});
局部過濾器
filters: {
// 和全局過濾器區別只是註冊位置不一樣 應用範圍不一樣
toUpper(value) {
return value.charAt(0).toUpperCase() + value.substr(1);
} }
filters比全局多了個s,寫在Vue實例中,只有當前實例能夠調用 ,和全局過濾器區別只是註冊位置不一樣 應用範圍不一樣
第一個參數永遠是value,第二個參數能夠是索引
過濾器可定義多個,也可一塊兒使用
<p>{{ text | toUpper(2) | reverse }}</p> // 語法 多個過濾器用 | 分割
使用過濾器完成日期 格式處理
1 . 引入 第三方格式化日期插件 moment.min.js
2 . 定義格式化日期過濾器
3 . 實現其格式化功能
4 . 使用過濾
format(value, format) {
return moment(value).format(format);
} // 過濾器代碼
<td>{{item.date|format("YYYY-MM-DD hh:mm:ss")}}</td>
vue第三天
ref 操做 DOM
- 做用: 經過ref特性能夠獲取元素的dom對象
- 使用: 給元素定義 ref屬性, 而後經過$refs.名稱 來獲取dom對象
<input type="text" ref="myInput" /> // 定義ref
focus() {
this.$refs.myInput.focus();
} // 獲取dom對象 聚焦 methods中定義方法
自定義指令-全局自定義指令
- 使用場景:須要對普通 DOM 元素進行操做，這時候就會用到自定義指令
- 分類:全局註冊和局部註冊
1. 在建立 Vue 實例以前定義全局自定義指令Vue.directive()
2. Vue.directive('指令的名稱',{ inserted: (使用指令的DOM對象) => { 具體的DOM操做 } } );
3. 在視圖中經過"v-自定義指令名"去使用指令 v-focus
// 定義指令
// 自定義指令是不須要加v-前綴的
// 第二個參數爲一個對象 對象中要實現 inserted的方法
// inserted中的參數爲當前指令所在元素的dom對象
Vue.directive("focus", {
inserted(dom) {
dom.focus();
}
});
局部自定義命令寫在vm實例中
computed
- 場景:當表達式過於複雜的狀況下 能夠採用計算屬性 對於任何複雜邏輯均可以採用計算屬性
- 使用: 在Vue實例選項中 定義 computed:{ 計算屬性名: 帶返回值的函數 }
- 說明: 計算屬性的值 依賴 數據對象中的值 數據對象發生改變 => 計算屬性發生改變=> 視圖改變
- methods 和 計算屬性的區別
- methods 每次都會執行
- 計算屬性 會每次比較更新先後的值 若是先後一致 則不會引發視圖變化
- methods每次都會執行 性能較計算屬性較差
計算屬性中必定是同步操做,若是有異步操做,則該業務邏輯就會失敗
{{newList}} //調用計算屬性computed: {
newList(){
var arr= this.list.filter(function(value,index){
return value>5;
})
return arr;
}} // 定義計算屬性
axios
- 本地引入axios文件
在npm 中引入axios文件
axios.get(url).then((res) => {
// 請求成功 會來到這 res響應體
}).catch((err) => {
// 請求失敗 會來到這 處理err對象
})
表格案例
獲取數據:
mounted() {
// 渲染完成事件
axios.get("http://localhost:3000/brands").then(result => {
this.list = result.data;});}
刪除數據:
delItem(id) {
if (confirm("肯定刪除此條記錄")) {
axios
.delete("http://localhost:3000/brands/" + id)
.then(result => {
this.getList(); // 從新調用拉取數據}); } }
添加數據:
addItem() { // 添加商品
axios.post("http://localhost:3000/brands", {
name: this.name,
date: new Date()
})
.then(result => {
if (result.status == 201) {
this.getList(); // 請求數據
this.name = ""; // 清楚文本框內容}});
watch(監聽屬性)
watch:{ //watch也是vm實例的一個對象
city:function(oldName,newName){
var arr = this.list.map(function(i){
i.name = newName;
return i;
});
this.list = arr;} }
vue第四天
組件
組件特色: 組件是一個特殊的 Vue實例
和實例類似之處: data/methods/computed/watch 等包羅萬象
注意:data和Vue實例的區別爲 組件中data爲一個函數 沒有el選項
data選項是一個函數的時候，每一個實例能夠維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的。
template 表明其頁面結構 (有且只要一個根元素)
每一個組件都是獨立的 運行做用域 數據 邏輯沒有任何關聯
<content-a></content-a> / //使用組件
Vue.component("content-a", { // // 組件名稱 abc abcD adc-d 推薦 abc-d的模式 並且全小寫
template: `<div>
{{count}}
</div>`,
data() {
return {
count: 1
};
}});
// 組件可以實現數據獨立 由於在data中return 了一個新的對象
// 組件中 data必須是一個函數 並且必須返回一個對象(重點)
// 這是組件和Vue實例的最大區別
局部組件
局部組件寫在vm實例對象內部,components:{},須要加個s
components:{ "content-a": { template: ``}}
使用組件中的實例不要忘記加this
component嵌套
var comA = {template: `<div>我是子組件</div>`}; //先定義子組件
var parentA = { //再定義父組件
template: `<div>
我是父組件
<com-a></com-a> //調用子組件
</div>`,
components: {'com-a': comA } //組件一樣擁有註冊局部組件選項
};
components: { 'parent-a":parentA} //根組件再調用父組件
組件傳值
父組件→子組件
- props做用: 接收父組件傳遞的數據
- props就是父組件給子組件標籤上定義的屬性
- props是組件的選項 定義接收屬性
props的值能夠是字符串數組 props:["綁定的屬性"] , 來源於外部的(組件的外部)
父組件傳遞給子組件的數據是隻讀的,即只能夠用,不能夠改
1.<child :title="name" :age="age"> //調用子組件時,給子組件標籤用v-bind綁定屬性
data() {return { name: "張三",age: 18};- props: ["title", "age"] // 父組件傳遞後,子組件要用props接收傳遞屬性
3.{{ title }}{{age}}
//子組件接收完屬性就能夠進行調用屬性,不是屬性值
- props: ["title", "age"] // 父組件傳遞後,子組件要用props接收傳遞屬性
子組件→父組件
經過在子組件中觸發$emit事件,而後在父組件中監視此事件 進行追蹤
methods: {
selectCity() {
// this當前實例 this.屬性名直接能夠獲取props屬性值 因此props不能和data屬性重名 也不能和方法重名
//console.log(this.city);
// $emit是當前實例的方法 (自定義事件名稱(可隨意定義),params...)
this.$emit("changecity", this.city); //拋出一個事件
}
子組件經過拋出事件,父組件定義事件接收 @changecity="change",事件名與$emit中一致,change(city)能夠拿到實參
SPA
- 傳統模式 每一個頁面及其內容都須要從服務器一次次請求 若是網絡差, 體驗則會感受很慢
- spa模式, 第一次加載 會將全部的資源都請求到頁面 模塊之間切換不會再請求服務器
優勢:
用戶體驗好,由於前段操做幾乎感覺不到網絡的延遲
徹底組件化開發 ,因爲只有一個頁面,因此原來屬於一個個頁面的工做被歸類爲一個個組件.
缺點
- 首屏加載慢->按需加載 不刷新頁面 之請求js模塊
- 不利於SEO->服務端渲染(node->本身寫路由->express-art-template+res.render())
- 開發難度高(框架) 相對於傳統模式,有一些學習成本和應用成本
- vue適合開發SPA , SPA不利於SEO
SPA-實現原理
前端自由切換模塊
刷新頁面模塊依然還在當前視圖- 能夠經過頁面地址的錨連接來實現
- hash(錨連接)位於連接地址 #以後
- hash值的改變不會觸發頁面刷新
- hash值是url地址的一部分,會存儲在頁面地址上 咱們能夠獲取到
- 能夠經過事件監聽hash值得改變
- 拿到了hash值,就能夠根據不一樣的hash值進行不一樣的模塊切換
location 能夠拿到hash
路由
體驗:
<!-- router-link 最終會被渲染成a標籤，to指定路由的跳轉地址 -->
<router-link to='/bj'>北京</router-link> //設置導航內容
<!-- 路由匹配到的組件將渲染在這裏 -->
<!-- 設置容器 -->
<router-view></router-view> // 設置容器
<script src="./vue-router.js"></script> ///引入vue-router.js
var router = new VueRouter({ //實例化一個vue-router
routes:[{ //編寫頁面路由 配置路由表
path:'/bj',
component:{
template: `<div>北京</div>`
}}]
router:router //將router掛載到Vue實例上
點擊link標籤,跳轉到相應路徑路由,將對應模板 顯示到view上,其它模板被銷燬
vue第五天
vue-router-動態路由
- 點擊列表頁 跳轉到詳情頁時,跳轉的連接須要攜帶參數,會致使頁面path不一樣
當頁面path不一樣卻須要對應同一個組件時,須要用到動態路由這一律念,能夠經過路由傳參來實現
this.$route 獲取當前路由對象 並經過params獲取定義的參數id
path:"/team/:teamname", //定義動態路由
component:{
template:<div>我是{{$route.params.teamname}}隊粉絲</div>}
//{{$route.params.teamname}}{{$route.params.postname}} ,兩個參數須要拿兩次
勇士 //傳入實參路由規則 匹配路徑 $route.params
/user/:username /user/evan { username: 'evan' }
/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }
vue-router-to屬性賦值
<!-- <router-link to="/sport">體育</router-link> -->
<!-- 變量 -->
<!-- <router-link :to="path">體育</router-link> -->
<!-- 根據對象name跳轉 -->
<!-- <router-link :to="{name:'abcdefg'}">體育</router-link> -->
<!-- 根據對象path跳轉 -->
<!-- <router-link :to="{path:'/sport'}">體育</router-link> -->
<!-- 帶參數的跳轉 -->
<router-link :to="{name:'abcdefg',params:{a:1}}">體育</router-link>
注意：若是提供了 path，params 會被忽略，上述例子中的name並不屬於這種情，你能夠提供路由的 name 並手寫完整的參數params：**
vue-router-重定向
當但願某個頁面被強制中轉時 可採用redirect 進行路由重定向設置
path: "/sport", redirect: "/news", // 強制跳轉新聞頁
vue-router-編程式導航
- 跳轉不一樣的組件 不只僅能夠用router-link 還能夠採用代碼行爲
- (Vue實例)this.$router 能夠拿到當前路由對象的實例
- 注意 前面小節獲取數據用到的是 $route,這裏用到的是$router
- 路由對象的實例方法 有 push replace, go()
- push 方法 至關於往歷史記錄裏推了一條記錄 若是點擊返回 會回到上一次的地址
- replace方法 想至關於替換了當前的記錄 歷史記錄並無多 可是地址會變
- go(數字) 表明但願是前進仍是回退,當數字大於0 時 就是前進 n(數字)次,小於0時,就是後退n(數字)次
能夠經過vue實例 獲取當前的路由實例 $router
goPage() {
// 跳轉到新聞頁面
this.$router.push({
path: "/news"});}
vue-router-routerlink-tag-激活樣式
當前路由在導航中是擁有激活class樣式的,設置激活class樣式便可 <a href="#/news" class="router-link-exact-active router-link-active">新聞</a>
vue-router-嵌套路由
- 若是存在組件嵌套,就須要提供多個視圖容器
- 同時,router-link和router-view 均可以添加類名、設定樣式
注意，以 / 開頭的嵌套路徑會被看成根路徑。 這讓你充分的使用嵌套組件而無須設置嵌套的路徑。
{
path:'/music',
children:{
path:'/pop' }} //此時該條路由 就是 /pop
// 若是想使用 /music/pop 能夠這樣
{
path:'/music',
children:{
path:'/music/pop' }} //此時該條路由 就是 /music/pop
// 或者
{
path:'/music',
children:{
path:'pop' }} //此時該條路由 就是 /music/pop
二級路由須要寫在一級路由的組件中,包括視圖
{
path:"/hx",
//二級路由要寫在組件中
component:{
template:<div> 我是化學 <router-link to="/hx/h2">語文</router-link> <router-link to="/hx/o2">數學</router-link> <router-link to="/hx/h2o">外語</router-link> <router-view></router-view> </div>
},
children:[{
path:"/hx/h2",
component:{
template:
<div>語文</div>
}},
{
path:"/hx/o2",
component:{
template:
<div>數學</div>
}},
{
path:"/hx/h2o",
component:{
template:
<div>外語</div>
}
}]
},
CSS 過渡和動畫 中自動應用 class
- 基本用法就是給咱們須要動畫的標籤外面嵌套transition標籤 ,而且設置name屬性(就是class)
Vue 提供了 transition 的封裝組件，在下列元素更新,移除，新增 情形中，能夠給任何元素和組件添加進入/離開過渡
<button @click="show=!show">顯示/隱藏
- 1. vue基礎-基礎總結
- 2. 關於vue基礎總結
- 3. vue基礎學習總結
- 4. Vue基礎學習總結
- 5. vue基礎知識總結
- 6. Vue基礎知識總結
- 7. VUE基礎API總結
- 8. Vue基礎總結2
- 9. Vue- 基礎學習總結
- 10. VUE基礎部分學習總結
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • 算法總結-雙指針
- • 算法總結-回溯法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
- 1. vue基礎-基礎總結
- 2. 關於vue基礎總結
- 3. vue基礎學習總結
- 4. Vue基礎學習總結
- 5. vue基礎知識總結
- 6. Vue基礎知識總結
- 7. VUE基礎API總結
- 8. Vue基礎總結2
- 9. Vue- 基礎學習總結
- 10. VUE基礎部分學習總結