vue学习笔记及知识点文件
https://download.csdn.net/download/weixin_42530002/13139077
vetur插件
检查sass语法
创建后渲染一次 :key='data.id'
scoped 子component css作用域 只影响局部
npm run lint 检查修复ES规范
渲染周期解决 通过:key length || v-if 更改创建时间来及时渲染
element UI后台管理系统UI
nuxt.js 服务端渲染
路由更改需重启服务器
一、vue基础 知识点文件
1、vue基础一 初始化vue
2、vue基础二
(1)、模板语法
(2)、list操作
(3)、点击变色
(4)、class和style动态绑定
(5)、条件渲染
(6)、filter和map
(7)、list操作
(8)、列表渲染
(9)、过滤应用 类似搜索框 搜索列表中所包含字串 模糊查询
(10)、事件处理 click key.up
(11)、表单绑定 v-model
(12)、表单绑定 购物车结算总价
(13)、表单绑定 修饰符
(14)、点击变色
3、基础三
(1)、axios和fetch
(2)、计算属性 computed
(3)、watch
(4)、计算属性 模糊查询
(5)、计算属性 购物车 选择计算总价
(6)、mixins
(7)、组件
(8)、组件父传子 props
(9)、组件子传父 $emit
(10)、组件refs
(11)、非父子通信 bus总线
(12)、动态组件 keep-alive
4、基础四
(1)、slot
(2)、slot-example
(3)、过度
(4)、初始元素过滤
(5)、多个元素过渡
(6)、多个组件的过渡
(7)、多个列表的过渡
(8)、可复用过渡 组件
(9)、生命周期
(10)、swiper 静态轮播图
(11)、swiper 动态轮播图(滑动)
(12)、vue-swiper 组件轮播图
(13)、指令
(14)、指令函数简写
(15)、轮播 swiper nextTick
(16)、指令轮播
(17)、过滤器
5、CLI 知识点文件
二、vue进阶与项目 知识点文件
(1)、vue-router
a、iconfont图标
b、vue-router 知识点文件
(2)、project 知识点文件 Better-scroll
(3)、vuex 知识点文件
(4)、组件库 知识点文件
(5)、移动事件以及布局 知识点文件
四、Vue服务端渲染
(1)、vue ssr
(2)、nuxt
一、vue基础 知识点文件
1、初始化vue
1、vue官网下载vue.js https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI
2、引入vue.js
<script type="text/javascript" src="lib/vue.js"></script>
3、编写代码
<div id="box">
{{ 10+20 }}
<p>{{ myname }}</p>
</div>
<div>
{{ 10+20 }}
</div>
<script>
var vm = new Vue({
el:"#box", // vue 渲染开始的地方
data:{
myname:"kerwin"
} // 状态
})
</script>
2、vue基础二
(1)、模板语法
(2)、list操作
{{mytext}}
<button @click=“handleAddClick”>add
<ul>
<li v-for="(data,index) in datalist">
{{data}}---{{index}}
<button @click="handleDelClick(index)">del</button>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
datalist:[],
mytext:"111111"
},
methods:{
handleAddClick(){
this.datalist.push(this.mytext)
},
handleDelClick(index){
console.log("delete",index);
//splice
this.datalist.splice(index,1)
}
}
})
// 新老虚拟dom对比的 时候 会 使用 diff 算法。
</script>
(3)、点击变色
<li v-for="(data,index) in datalist" :class=“currentIndex===index?‘active’:’’”
@click=“handleClick(index)”
>
{{data}}
<script type="text/javascript">
// viewmodel
var vm = new Vue({
el:"#box",
data:{
datalist:["111","222","333","5555","6666"],
currentIndex:0
},
methods:{
handleClick(index){
// console.log(index)
this.currentIndex = index;
}
}
})
</script>
</body>
(4)、class和style动态绑定
(5)、条件渲染
<button @click=“handleClick()”>click
111111
<div v-else-if="which===2">
222222
</div>
<div v-else>
333333
</div>
(6)、filter和map
var arr= [1,2,3];
//filter
var arr3 = arr.filter(item=>item>2); //3
//map
var arrmap = arr.map(item=>item*item); //1 4 9
var arrli = arr.map(item=>`<li>${item}</li>`);
(7)、list操作
<input type="text" v-model="text"/>
<button @click="handleAdd()">add</button>
<ul>
<li :class="data.isMarked?'active':''" v-for="data,index in list" @click="handleClick(index)">
{{data.value}}
<button @click="handleDelClick(index)">del</button>
<button @click="handleMarkClick(index)">mark</button>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
list:[],
text:'',
current:0
},
methods:{
handleClick(index){
console.log(index);
this.current= index;
},
handleAdd(){
this.list.push({
value:this.text,
isMarked:false
});
},
handleDelClick(index){
this.list.splice(index,1)
},
handleMarkClick(index){
this.list[index].isMarked = !this.list[index].isMarked
}
}
})
</script>
(8)、列表渲染
数组和对象的for展开都是先data再 索引|键值
<ul>
<li v-for="(data,index) of datalist">
{{data}}--{{index}}
</li>
</ul>
<ul>
<li v-for="(data,key) in obj">
{{data}}--{{key}}
</li>
</ul>
(9)、过滤应用 类似搜索框 搜索列表中所包含字串 模糊查询
<input type=“text” @input=“handleInput()” v-model=“mytext”/>
<ul>
<li v-for="data in datalist">
{{data}}
</li>
</ul>
</div>
<script type="text/javascript">
//["aaa","bbb","ccc","ddd","add","cee","eee"]
var vm = new Vue({
el:"#box",
data:{
mytext:'',
datalist:["aaa","bbb","ccc","ddd","add","cee","eee"],
list:["aaa","bbb","ccc","ddd","add","cee","eee"]
},
methods:{
handleInput(){
console.log(this.mytext)
// console.log("只要value改变，就会触发")
//利用输入框的字符， 过滤出包含字段的元素
//filter 过滤
var newlist= this.list.filter(item=>item.indexOf(this.mytext)>-1)
// console.log(newlist,this.datalist)
this.datalist = newlist;
// 计算属性
}
}
})
var arr = [1,2,3,4,5]
var newlist =arr.filter(item=>item>=3)
console.log(newlist)
</script>
(10)、事件处理 click key.up
@click.self 只触发本身 不触发子节点
@click.stop 抬起时触发
@click.once 只触发一次
@click.prevent 阻止默认事件 跳转
@keyup.enter.ctrl 同时按enter和ctrl触发
@keyup.13.ctrl 同时也可以用keycode代替
<ul @click.self="handleULClick()">
<li @click.stop="handleLiClick($event)">11111</li>
<li @click="handleLiClick()">2222</li>
<li @click.once="handleLiClick()">3333</li>
</ul>
<a href="http://www.baidu.com" @click.prevent="handleChangePage()">changepage</a>
<input type="text" @keyup.enter.ctrl="handleKeyup($event)"/>
(11)、表单绑定 v-model
v-model 绑定节点文本内容、选项值
<div id="box">
<input type="text" v-model="mytext"/>
{{mytext}}
<textarea v-model="mytext"></textarea>
<br/>
<input type="checkbox" v-model="isChecked"/>记录用户名
<br/>
<p>你喜欢的运动？
<input type="checkbox" v-model="checkgroup" value="游泳"/>游泳
<input type="checkbox" v-model="checkgroup" value="滑冰"/>滑冰
<input type="checkbox" v-model="checkgroup" value="长跑"/>长跑
</p>
{{checkgroup}}
<p>你最喜欢的开发语言？
<input type="radio" v-model="picked" value="php"/>php
<input type="radio" v-model="picked" value="js"/>js
<input type="radio" v-model="picked" value="java"/>java
</p>
{{picked}}
</div>
<!-- <div v-model=""></div> -->
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
mytext:"",
isChecked:true,
checkgroup:[],
picked:"js"
}
})
</script>
(12)、表单绑定 购物车结算总价
<input type=“checkbox” @change=“handleChange” v-model=“isAllChecked”/>
<input type=“checkbox” v-model=“checkgroup” :value=“data” @change=“handleLiChange”/>
{{data}}
<button @click=“handleDelClick(data)”>del
{{data.number}}
<button @click=“data.number++”>add
{{checkgroup}}
总金额计算:{{ getSum() }}
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
checkgroup:[],
isAllChecked:false,
datalist:[
{
name:"商品1",
price:10,
number:1,
id:"1",
},
{
name:"商品2",
price:20,
number:2,
id:"2",
},
{
name:"商品3",
price:30,
number:3,
id:"3",
}
]
},
methods:{
getSum(){
// 函数计算中的状态改变后， 函数会自动执行一遍
var sum = 0;
for(var i in this.checkgroup){
sum+= this.checkgroup[i].number*this.checkgroup[i].price
}
return sum
},
handleChange(){
console.log("改变了",this.isAllChecked)
if(this.isAllChecked){
this.checkgroup = this.datalist
}else{
this.checkgroup = []
}
},
handleLiChange(){
console.log("handleLiChange-判断是不是都勾选")
if(this.checkgroup.length === this.datalist.length){
this.isAllChecked = true
}else{
this.isAllChecked = false
}
},
handleDelClick(data){
// console.log(data)
data.number--;
if(data.number === 0){
data.number = 1;
}
}
}
})
/*
[
{
name:"商品1",
price:10,
number:1,
id:"1",
},
{
name:"商品2",
price:20,
number:2,
id:"2",
},
{
name:"商品3",
price:30,
number:3,
id:"3",
}
]
*/
</script>
(13)、表单绑定 修饰符
type="number" 为确保输入为数字
v-model.lazy 取消双向数据绑定 只有当表单失去焦点时才会导入数据
v-model.number 将输出内容转化为数字 如删除数字前0
v-model.trim 去掉两边空格
<div id="box">
<input type="text" v-model.lazy="mytext"/>
{{mytext}}
<input type="number" v-model.number="mynumber"/>
{{mynumber}}
<input type="text" v-model.trim="myusername"/>
|{{myusername}}|
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
mytext:"",
mynumber:0,
myusername:""
}
})
</script>
(14)、点击变色
<li v-for=“data,index in list” :class=“current==index?‘active’:’’” @click=“handleClick(index)”>
{{data}}
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
list:["1111","222","333"],
current:0
},
methods:{
handleClick(index){
console.log("click",index);
this.current = index;
}
}
})
</script>
3、基础三
(1)、axios和fetch
须在服务端启动才能访问本地文件 否则会产生跨域问题
axios.get("") promise对象
axios.post("") promise对象
axios.put("")
axios.delete("")
及url headers对象方式
fetch为url headers
fetch 两个then 第一个then需json解析 then(res=>res.json()).then(res=>{console.log(res)}) res.data
axios 一个then 会自动在数据上封装一个data then(res=>{ console.log(res.data); }) res.data.data
详见任务书
A、axios
引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在热映</button>
<ul>
<li v-for="data in datalist">
<h3>{{data.name}}</h3>
<img :src="data.poster"/>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
axios.get("./json/test.json").then(res=>{
console.log(res.data.data.films) // axios 自动包装data属性 res.data
this.datalist = res.data.data.films
}).catch(err=>{
console.log(err);
})
}
}
})
</script>
</body>
B、fetch
<div id="box">
<button @click="handleClick()">获取影片信息</button>
<ul>
<li v-for="data in datalist">
<h3>{{data.name}}</h3>
<img :src="data.poster"/>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
fetch("./json/test.json").then(res=>res.json()).then(res=>{
console.log(res.data.films)
this.datalist = res.data.films
})
}
}
})
/*
// post-1
fetch("**",{
method:'post',
headers: {
"Content‐Type": "application/x‐www‐form‐urlencoded"
},
body: "name=kerwin&age=100",
credentials:"include"
}).then(res=>res.json()).then(res=>{console.log(res)});
// post-2
fetch("**",{
method:'post',
headers: {
"Content‐Type": "application/json"
},
body: JSON.stringify({
myname:"kerwin",
myage:100
})
}).then(res=>res.json()).then(res=>{console.log(res)});
*/
</script>
(2)、计算属性 computed
方法会重新计算一遍
计算属性会缓存 定义为函数形式 调用为变量形式
<div id="box">
{{myname.substring(0,1).toUpperCase() + myname.substring(1)}}
<p>计算属性:{{getMyName}}</p>
<p>普通方法:{{getMyNameMethod()}}</p>
<div>
也需要计算结果
<p>计算属性:{{getMyName}}</p>
<p>普通方法:{{getMyNameMethod()}}</p>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
myname:"xiaoming"
},
methods:{
getMyNameMethod(){
console.log("getMyNameMethod-方法调用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
},
computed:{
getMyName(){
console.log("getMyName-计算属性调用")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
} //1. 依赖的状态改变了 ，计算属性 会重新计算一遍 2. 计算属性会缓存
}
})
</script>
(3)、watch
<p>单价：<input type="text" v-model="price" /></p>
<p>数量：<input type="text" v-model="number"/></p>
<p>金额计算方法：{{mysum()}}</p>
<p>金额计算属性：{{mycomptedsum}}</p>
<p>watch方法：{{sum }}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
price:100,
number:1,
sum:0
},
watch:{
price(){
console.log("price状态改变了")
if(this.number*this.price>=1000){
this.sum = this.number*this.price
}else{
this.sum = this.number*this.price+100
}
} ,
number(){
console.log("number状态改变了")
if(this.number*this.price>=1000){
this.sum = this.number*this.price
}else{
this.sum = this.number*this.price+100
}
}
},
methods:{
mysum(){
var sum =this.price*this.number
if(sum>=1000){
return sum;
}else{
return sum+100
}
}
},
computed:{
mycomptedsum(){
var sum =this.price*this.number
if(sum>=1000){
return sum;
}else{
return sum+100
}
}
}
})
</script>
(4)、计算属性 模糊查询
<ul>
<li v-for="data in getMyDatalist">
{{data}}
</li>
</ul>
</div>
<script type="text/javascript">
//["aaa","bbb","ccc","ddd","add","cee","eee"]
var vm = new Vue({
el:"#box",
data:{
mytext:'',
datalist:["aaa","bbb","ccc","ddd","add","cee","eee"]
},
computed: {
getMyDatalist(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
},
})
var arr = [1,2,3,4,5]
var newlist =arr.filter(item=>item>=3)
console.log(newlist)
</script>
(5)、计算属性 购物车 选择计算总价
<input type=“checkbox” @change=“handleChange” v-model=“isAllChecked”/>
<input type=“checkbox” v-model=“checkgroup” :value=“data” @change=“handleItemChange”/>
{{data}}
<button @click=“handleDelClick(data)”>del
<button @click=“data.number++”>add
{{checkgroup}}
<p>总金额计算 {{getSum()}}</p>
<p>总金额计算-计算属性- {{getComputedSum}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
checkgroup:[],
isAllChecked:false,
datalist:[
{
name:"商品1",
price:10,
number:1,
id:"1",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品2",
price:20,
number:2,
id:"2",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
},
{
name:"商品3",
price:30,
number:3,
id:"3",
// url:"https://www.baidu.com/img/bd_logo1.png?qua=high"
}
]
},
computed: {
getComputedSum(){
// return "11111111";
// 购物车勾选的数据累加
var sum = 0;
for(var i in this.checkgroup){
sum+=this.checkgroup[i].number*this.checkgroup[i].price;
}
return sum;
}
},
methods:{
handleChange(){
console.log("handleChange",this.isAllChecked)
if(this.isAllChecked){
this.checkgroup=this.datalist
}else{
this.checkgroup = [];
}
},
handleItemChange(){
console.log("handleItemChange")
if(this.checkgroup.length===this.datalist.length){
this.isAllChecked = true;
}else{
this.isAllChecked = false;
}
},
getSum(){
// return "11111111";
// 购物车勾选的数据累加
var sum = 0;
for(var i in this.checkgroup){
sum+=this.checkgroup[i].number*this.checkgroup[i].price;
}
return sum;
},
handleDelClick(data){
data.number--
if(data.number===0){
data.number=1
}
}
}
})
</script>
(6)、mixins
/*
vnode vdom
虚拟dom virtual dom virtual node
虚拟节点
用js对象 模拟的真实dom节点
*/
<script type="text/javascript">
function mymethod(){
console.log("复杂计算")
}
var myobj = {
methods:{
methodA:mymethod
}
}
new Vue({
el:"#box",
data:{
},
mixins:[myobj]
})
</script>
(7)、组件
(8)、组件父传子 props
<script type="text/javascript">
Vue.component("navbar",{
template:`<div>
<button>返回</button>
navbar -- {{myname}}
<button v-show="myshow">首页</button>
</div>`,
// props:["myname","myshow"] // 接受父组件传来的属性
props:{
myname:String,
myshow:Boolean
}
})
new Vue({
el:"#box",
data:{
parentname:"父组件的状态"
}
})
</script>
(9)、组件子传父
e
m
i
t
<
d
i
v
i
d
=
"
b
o
x
"
>
父
组
件
<
c
h
i
l
d
@
m
y
e
v
e
n
t
2
=
"
h
a
n
d
l
e
E
v
e
n
t
(
emit <div id="box"> 父组件 <child @myevent2="handleEvent(
emit<divid="box">父组件<child@myevent2="handleEvent(event)">
<script type="text/javascript">
//子组件
Vue.component("child",{
template:`<div>
child组件
<button @click="payMoney()">click</button>
</div>`,
data(){
return {
childname:"子组件的状态"
}
},
methods:{
payMoney(){
this.$emit("myevent2",this.childname)// 分发 事件
}
}
})
new Vue({
el:"#box",
methods:{
handleEvent(ev){
console.log("父组件收到钱了",ev)
}
}
})
</script>
(10)、组件refs
/*
1. ref放在标签上， 拿到的是原生节点
2. ref放在组件上， 拿到的是组件对象
ref可拿到子节点的状态与方法
ref refs定义使用只存在同级 子节点ref refs无法使用
*/
<div id="box">
<input type="text" ref="mytext">
<button @click="handleAdd">add</button>
<child ref="mychild"></child>
</div>
<script type="text/javascript">
//子组件
Vue.component("child",{
template:`<div>
child
</div>`,
data(){
return {
childname:"子组件的状态"
}
},
methods:{
add(data){
console.log("子组件的方法",data)
}
}
})
var vm = new Vue({
el:"#box",
data:{
},
methods: {
handleAdd(){
console.log("1111",this.$refs.mychild.childname)
this.$refs.mychild.add("孩子听话");
console.log(this.$refs.mytext.value)
}
},
})
</script>
(11)、非父子通信 bus总线
<weixinuser></weixinuser>
</div>
<script type="text/javascript">
var bus = new Vue();//空vue实例 就是中央事件总线
Vue.component("weixinauthor",{
template:`<div style="background:blue">
我是一个微信公众号作者
<input type="text" ref="mytext"/>
<button @click="handleClick()">发布</button>
</div>`,
methods:{
handleClick(){
bus.$emit("weixinmessage",this.$refs.mytext.value)
}
}
})
Vue.component("weixinuser",{
// 合适的位置先 订阅好 bus.$on
template:`<div style="background:yellow">
我是一个微信用户
</div>`,
mounted(){
bus.$on("weixinmessage",(data)=>{
console.log("收到推送了",data)
})
console.log("生命周期函数-当前组件的dom 创建完成之后 就会调用")
}
})
new Vue({
el:"#box"
})
</script>
(12)、动态组件 keep-alive
<component> 元素，动态地绑定多个组件到它的 is 属性
保留状态，避免重新渲染
<div id="box">
<keep-alive>
<component :is="who"></component>
</keep-alive>
<footer>
<ul>
<li><a @click="who='home'">首页</a></li>
<li><a @click="who='list'">列表页</a></li>
<li><a @click="who='shopcar'">购物车页面</a></li>
</ul>
</footer>
</div>
<script type="text/javascript">
//babel-loader ES6=>ES5
var vm = new Vue({
el:"#box",
data:{
who:'home'
},
components:{
home:{
template:`<div>home<input type="text"/></div>`
},
list:{
template:`<div>list</div>`
},
shopcar:{
template:`<div>shopcar</div>`
}
}
})
</script>
4、基础四
(1)、slot
aaaaaaaaaaaa
bbbbbbbbbbbb
<swiper>
<li v-for="data in datalist">
{{data}}
</li>
</swiper>
</div>
<script type="text/javascript">
Vue.component("child",{
template:`<div>
<slot name="a"></slot>
child
<slot name="b"></slot>
</div>`
})
Vue.component("swiper",{
template:`<div>
<ul>
<slot></slot>
</ul>
</div>`
})
new Vue({
el:"#box",
data:{
datalist:["11111","22222","333333"]
}
})
</script>
(2)、slot-example
<button @click=“isShow=!isShow”>navbar-button
</div>
<script type="text/javascript">
//子组件
Vue.component("navbar",{
template:`<div>
navbar
<slot></slot>
</div>`,
})
Vue.component("sidebar",{
template:`<div style="background:yellow;width:200px;">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>`
})
new Vue({
el:"#box",
data:{
isShow:false
}
})
</script>
(3)、过度
1、引入css
2、定义css样式
3、使用css样式 name来代替class引用样式
<!-- <h1 class="animated hinge infinite">1111111111111</h1> -->
<div id="box">
<button @click="isShow=!isShow">click</button>
<transition name="kerwinfade">
<div v-if="isShow">1111111111111</div>
</transition>
<transition name="kerwinbounce">
<div v-if="isShow">222222222</div>
</transition>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
isShow:false
}
})
</script>
(4)、初始元素过滤
引入css
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0%{
transform: translateX(100px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
(5)、多个元素过渡
引用css
使用css 连个及以上子节点需要设置唯一key 《transition-group> children must be keyed
<!-- <div class="animated hinge infinite">1111111111111</div> -->
<div id="box">
<button @click="isShow= !isShow">click</button>
<transition name="bounce" mode="out-in">
<p v-if="isShow" key="1">11111111111</p>
<p v-else key="2">222222222</p>
</transition>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
isShow:true
}
})
</script>
(6)、多个组件的过渡
<script type="text/javascript">
//babel-loader ES6=>ES5
var vm = new Vue({
el:"#box",
data:{
who:'home'
},
components:{
"home":{
template:`<div>home<input type="text"/></div>`
},
"list":{
template:`<div>list</div>`
},
"shopcar":{
template:`<div>shopcar</div>`
}
}
})
</script>
(7)、多个列表的过渡
通过设置唯一key值删除对应li节点
<div id="box">
<input type="text" v-model="mytext"/> {{mytext}}
<button @click="handleAddClick">add</button>
<transition-group tag="ul" name="bounce">
<li v-for="(data,index) in datalist" :key="data">
{{data}}---{{index}}
<button @click="handleDelClick(index)">del</button>
</li>
</transition-group>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
datalist:[],
mytext:"111111"
},
methods:{
handleAddClick(){
this.datalist.push(this.mytext)
},
handleDelClick(index){
console.log("delete",index);
//splice
this.datalist.splice(index,1)
}
}
})
// 新老虚拟dom对比的 时候 会 使用 diff 算法。
</script>
(8)、可复用过渡 组件
<navbar @myevent= “handleEvent”>
<transition name="bounce">
<sidebar v-show="isShow"></sidebar>
</transition>
</div>
<script type="text/javascript">
//子组件
Vue.component("navbar",{
template:`<div>
navbar
<button @click="handleClick">navbar-button</button>
</div>`,
methods:{
handleClick(){
this.$emit("myevent")
}
}
})
Vue.component("sidebar",{
template:`<div style="background:yellow;width:200px;">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>`
})
new Vue({
el:"#box",
data:{
isShow:false
},
methods: {
handleEvent(){
this.isShow = !this.isShow
}
},
})
</script>
(9)、生命周期
// vm.$mount("#box")
// 详见知识点pdf
beforeCreate(){
console.log("beforeCreate")
},
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
},
mounted(){
console.log("mounted","访问dom,setInterval,window.onscroll, 监听事件 ajax")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated","更新之后可以访问dom")
},
beforeDestroy(){
console.log("beforeDestroy-clearInterval ,window.onscroll=null,$off");
},
destroyed(){
console.log("destroyed--clearInterval ,window.onscroll=null,$off")
}
(10)、swiper 静态轮播图
引入css js
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<div class="swiper-container a">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script type="text/javascript">
new Swiper ('.a',{
// direction: 'vertical'
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
(11)、swiper 动态轮播图(滑动)
引入css js
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<div class="swiper-container a">
<div class="swiper-wrapper">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
<script type="text/javascript">
//swiper初始化过早。
setTimeout(function(){
var datalist = ["1111","22222","33333"]
var newlist =datalist.map(item=>`<div class="swiper-slide">${item}</div>`)
// console.log(newlist)
document.querySelector(".swiper-wrapper").innerHTML = newlist.join('')
new Swiper ('.a',{
// direction: 'vertical'
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
},2000)
</script>
(12)、vue-swiper 组件轮播图
引入vue swiper
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide img{
width: 100%;
}
</style>
<div id="box">
<swiper :key="datalist.length">
<div class="swiper-slide" v-for="data in datalist">
{{data}}
</div>
</swiper>
</div>
<script type="text/javascript">
Vue.component("swiper",{
template:` <div :class="'swiper-container ' + which">
<div class="swiper-wrapper">
<slot></slot>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>`,
data(){
return {
which:"a"
}
},
mounted(){
console.log("swiper-mounted")
new Swiper ('.a',{
// direction: 'vertical'
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
}
})
new Vue({
el:"#box",
data:{
datalist:[],
// which:"a"
},
mounted() {
console.log("root-mounted")
setTimeout(()=>{
this.datalist= ["1111","22222","33333"]
},2000)
},
})
// obox.className = "swiper-contrian "+which
</script>
(13)、指令
通过指令操作底层dom
v-hello 自定义
指令-生命周期-创建
<div id="box">
<div v-hello="'red'">111111</div>
<div v-hello="'yellow'">2222222</div>
<div v-hello="mycolor">3333333</div>
</div>
<script type="text/javascript">
// v-if="isShow" v-for v-model v....
// v-kerwin v-swipe 操作底层dom
Vue.directive("hello",{
inserted(el,bind){
// 指令-生命周期-创建
//插入
// console.log("当前节点插入到父节点了")
// console.log(bind.value);
el.style.background=bind.value
},
update(el,bind){
// 指令-生命周期-更新
el.style.background=bind.value
}
})
var vm = new Vue({
el:"#box",
data:{
mycolor:"red"
}
})
</script>
(14)、指令函数简写
111111
2222222
3333333
<script type="text/javascript">
// v-if="isShow" v-for v-model v....
// v-kerwin v-swipe 操作底层dom
Vue.directive("hello",function(el,bind){
el.style.background=bind.value
})
var vm = new Vue({
el:"#box",
data:{
mycolor:"red"
}
})
</script>
(15)、轮播 swiper nextTick
引入css js
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<div id="box">
<div class="swiper-container a">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(data,index) in list">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
list:[]
},
mounted(){
setTimeout(() => {
this.list = ["111","2222","3333"];
console.log("节点创建完了？？？？","没有，异步渲染")
this.$nextTick(()=>{
console.log("我比updated都晚")
new Swiper ('.a',{
// direction: 'vertical'
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
})
}, 2000)
},
updated(){
console.log("updated---初始化swiper")
}
})
</script>
(16)、指令轮播
引入css js
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<div id="box">
<div class="swiper-container a">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(data,index) in list" v-swipe="{
index:index,
length:list.length
}">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<script type="text/javascript">
Vue.directive("swipe",{
inserted(el,bind){
console.log(bind.value)
if(bind.value.index === bind.value.length-1){
new Swiper ('.a',{
// direction: 'vertical'
loop:true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
}
}
})
new Vue({
el:"#box",
data:{
list:[]
},
mounted() {
setTimeout(()=>{
this.list= ["1111","2222","3333"]
},2000)
},
})
</script>
(17)、过滤器
服务器启动 通过管道 | 过滤
引入js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="lib/vue.js"></script>
<div id="box">
<ul>
<li v-for="data in datalist" :key="data.id">
<h3>{{data.nm}}</h3>
<!-- <img :src="changepath(data.img)"/> -->
<img :src="data.img | kerwinpath"/>
</li>
</ul>
</div>
<script>
Vue.filter("kerwinpath",function(data){
return data.replace('w.h','128.180')
})
new Vue({
el:"#box",
data:{
datalist:[]
},
mounted() {
axios.get("test.json").then(res=>{
console.log(res.data);
this.datalist = res.data.movieList
})
},
methods:{
changepath(path){
return path.replace('w.h','128.180')
}
}
})
//"http://p0.meituan.net/w.h/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg"
//https://p0.meituan.net/128.180/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg
</script>
5、CLI
详见任务书及项目
二、vue进阶与项目 知识点文件
(1)、vue-router
a、iconfont图标
b、vue-router 知识点文件
(2)、project 知识点文件 Better-scroll
(3)、vuex 知识点文件
(4)、组件库 知识点文件
(5)、移动事件以及布局 知识点文件
四、Vue服务端渲染
(1)、vue ssr
(2)、nuxt
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
