二手車網(wǎng)站模版售價美國站外推廣網(wǎng)站
1.創(chuàng)建Vue實例，初始化渲染的核心
- 準備容器
- 引包
- 創(chuàng)建Vue實例new Vue()
- el用來指定控制的盒子
- data提供數(shù)據(jù)
2.插值表達式
作用利用表達式插值，將數(shù)據(jù)渲染到頁面中
格式{{表達式}}
注意點
- 表達式的數(shù)據(jù)要在data中存在
- 表達式是可計算結果的語句
- 插值表達式不能寫在標簽里面
3.Vue的相關指令
3.1 v-前綴的標簽屬性
- v-html="表達式"設置當前標簽元素的innerhtml
- v-show="表達式"表達式的值為true時顯示，false隱藏
原理是display:none適用于頻繁切換隱藏場景 - v-if="表達式"表達式的值為true時顯示為false時隱藏
原理是創(chuàng)建或者移除元素節(jié)點適用于不頻繁切換的場景 - v-else=" “和v-else-if=” "輔助v-if進行判斷渲染，需要緊挨著v-if一起使用
- v-on可以簡化為 @
- v-on:事件名=“內(nèi)聯(lián)語句”
- v-on:事件名="method中的函數(shù)名"
methods里面的函數(shù)形式 fn(){}
如果不用傳參直接寫函數(shù)名就可以，如果要傳參就括號然后里面寫參數(shù)
- v-bind可以簡化為 ：
- :屬性名=“表達式”
- **操作class屬性 **
- ：class=“{a:true
或者fasle或者判斷trueorfalse的語句}” 適用于一個類名來回切換比如tab導航欄 - class=“[類名1,類名2,類名2]”適用于批量刪除或者添加類
- ：class=“{a:true
<div id="app"><ul><li v-for="(item,index) in list" :key="item.id" @click="activeindex=index"><a :class={active:index==activeindex} herf="#">{{item.name}}</a></li></ul></div>
- v-for=“(item,index) in 數(shù)組"適用于數(shù)據(jù)循環(huán)，多次渲染整個元素，主要針對數(shù)組，對象，數(shù)字
如果不用index可以 ”item in 數(shù)組”
<ul>
<li v-for="(item,index) in list">{{item}}-{{index}}
</li>
</ul>
案例- 列表渲染和刪除功能
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for="(item,index) in alist" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button v-on:click="del(item.id)">刪除</button></li></ul></div><script>const app=new Vue({el:'#app',data:{alist:[{id:1,name:'《紅》',author:'曹'},{id:2,name:'《綠》',author:'吳'},{id:3,name:'《藍》',author:'施'},]},methods:{del(id){this.alist=this.alist.filter(item =>item.id !== id)}}})<!--methods寫錯了而且后面多加了逗號一直報錯-->Vue.config.productionTip=false</script>
</body>
</html>
v-for里面key的作用：作為唯一標識
注意key的值只能是字符串或者數(shù)字類型，推薦使用id，因為需要具有唯一性
- v-model重要，雙向數(shù)據(jù)綁定既可以獲取表單內(nèi)容也可以設置表單元素的內(nèi)容
- v-model=“表達式” 表達式和data里面的變量**雙向聯(lián)動 **
如果有l(wèi)ogin和reset直接調(diào)用this.變量=''這樣就可以reset了- 如果是表單輸入框的話獲取的就是輸入的內(nèi)容一般為字符，但是可以配合.trim和.number使用
- 單選框 獲取的是true or false
- 多選按鈕 獲取的是選擇項的value值
一般會有value和name屬性name用來同組相斥 - 復選框 寫在selection里獲取的是option的value值
option一般有value值 - 文本域 獲取的是文本值
- v-model=“表達式” 表達式和data里面的變量**雙向聯(lián)動 **
案例- 列表的添加刪除統(tǒng)計清空
<section id="app"><!-- 輸入框 --><header class="header"><h1>小黑記事本</h1><input placeholder="請輸入任務" class="new-todo" v-model="todoname"/><button class="add" @click="add">添加任務</button></header><!-- 列表區(qū)域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label><button @click="del(item.id)" class="destroy"></button></div></li></ul></section><!-- 統(tǒng)計和清空 --><footer class="footer" v-show="list.length>0"><!-- 統(tǒng)計 --><span class="todo-count">合 計:<strong> {{list.length}}</strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任務</button></footer> </section><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {todoname:'',list: [{ id: 1, name: '跑步一公里' },{ id: 3, name: '游泳100米' }]},methods: {del (id) {// console.log(id) => filter 保留所有不等于該 id 的項this.list = this.list.filter(item => item.id !== id)},add(){if(this.todoname.trim()==''){alert("請輸入值")return}this.list.unshift({id:+new Date(),name:this.todoname,})},clear(){this.list=[]}}})</script>
總結
一次添加多個內(nèi)容-屬性添加法
{
屬性名：屬性值，
屬性名：屬性值<!--最后一個可以不加逗號-->
<!--new Vue({})這里也是這么個意思-->
}
數(shù)組的方法積累
.filter(item=>item.id!=id) <!--這樣完了之后一定要賦值原數(shù)組回去-->
.unshift()<!--如果里面有多個屬性就是{}這個-->
.reduce((sum,index)=>>sum+item.score,0)<!--數(shù)組里某一項求值-->
字符串的方法積累
.trim()
<!--應用：1.可以用來去除前后的空格后判斷是不是空字符串-->
時間戳的應用
+new Date()
我的錯誤和思維漏洞
- 在data里面相互引用的時候不加this
- 清空操作字符串就賦值’'數(shù)組就就賦值[ ]
- 如果想實時動態(tài)改變值：就用@事件=“數(shù)值改變的表達式或者函數(shù)調(diào)用”
- 表達式可計算的特性很重要，插值表達式不放在標簽里面，其他就不用考慮了
- params：里面的默認寫法是屬性名：屬性值（后端規(guī)定）但是如果穿的是多個屬性組成的對象，直接params：對象 就可以
3.2 指令修飾符
- @keyup.enter=""鍵盤事件監(jiān)聽綁定回車鍵
- v-model.trim=""雙向互動綁定去除首尾空格
- v-model.number=""雙向互動綁定字轉數(shù)字
- @事件名.stop=""阻止冒泡
- @事件名.prevent=“”*阻止默認行為 *
例如a標簽的跳轉
4.Vue里面的各種屬性
methods里面的函數(shù)形式 fn(){}
用途：發(fā)請求，事件觸發(fā)
- 在v-on=“”如果不用傳參直接寫函數(shù)名就可以，如果要傳參就括號然后里面寫參數(shù)
- 如果在vue的其他地方和插值表達式 里面要用的話還是要加括號
computed里面的屬性形式 f’n(){}
- 和用data里面的其他值一樣用這個f’n也就是當為屬性在用,所以不管是vue的其他地方還是插值表達式都是f’n
- 緩存特性以提升性能
- 計算屬性得出來的值是默認不能修改的，在任何地方修改都會報錯，只有加上set方法之后才可以修改
computed:{
計算屬性名字：{get(){return },set(修改的值value）{}//當在外部有修改計算屬性的行為的時候，就會觸發(fā)這個set方法，并把修改的值賦值給value,然后可以對value進行相關的操作。
}
但是注意要用computed里面的某個屬性里的修改的話就應該是 屬性=‘修改值’(vue里面其他地方用還是要加this哦)
watch監(jiān)視器
如果你寫了某個數(shù)據(jù)的監(jiān)視器，只要數(shù)據(jù)變化了，就會觸發(fā)這個對應監(jiān)視器
作用：可以根據(jù)數(shù)據(jù)的實時變化，來發(fā)送請求
little tips：用clearTimeout(a) const a=setTimeout()來實現(xiàn)防抖延遲執(zhí)行 .
非整個對象的寫法
整個對象的監(jiān)聽寫法
deep是深度監(jiān)視就是對對象里面每一個屬性都監(jiān)視，immmediate是一進頁面就翻譯一次。
5.生命周期
konwlegde
生命周期鉤子：在vue的生命周期里自動運行的函數(shù)，可以在這些函數(shù)里面運行自己的代碼。
created：發(fā)初始化請求
mounted：dom操作
destroy是在關閉頁面后執(zhí)行的，可以用app.$destroy()將數(shù)據(jù)變成死數(shù)據(jù)
example-自動獲取焦點
6.工程化開發(fā)
- index.html提供vue所管理的容器
- App.vue是根目錄
- components是子組件
- main.js導入vue,App.vue,用render方法將App.vue動態(tài)渲染到 index.html
