VUE框架笔记
1、vue基本使用：
创建一个vue步骤：
1.引入vue.js
2.创建vue对象： var xx=new Vue({ })
el: 指定根element（选择器）
data: 初始化数据（页面可以访问）
3.双向数据绑定： v-model
4.显示数据：{{ xxxxx }}
<body>
<div id="app">
<h1>{{message}}</h1>
<input type="text" v-model=" message" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app", //el是element:选择器
data:{ //数据 (model)
message:document.querySelector("input").value
}
})
</script>
</body>
v-show
1568172701333.png
v-style绑定
1568182989074.png
监听 v-on
1568185653002.png
v-for
<body>
<div id="app">
<ul>
<li v-for="(p,index) in arr">
{{index}} {{p.name}}
<button @click="delete(index)">删除</button>
<button @click="updata(index)">更新</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
//测试 v-for 遍历数组
new Vue({
el:"#app",
data:{
arr:[
{name:"张三",eag:"19"},
{name:"李四",eag:"10"},
{name:"王五",eag:"16"},
{name:"赵六",eag:"17"}
]
},
methods:{
delete(index ){
this.arr.splice(index,1)
}
}
})
</script>
</body>
注意事项：在vm实例当中，如果要获取data上的数据，或者想要调用methods中的方法，必须通过 this . 数据属性名或 this .方法名来进行访问，这里的this就表示我们new出来的vm实例对象。
computed
1568286938299.png
forEach 遍历
特点：一直从第一个遍历到最后一个
forEach((item,index)=>{ //item,index可以直接写个字母或者其他的变量
})
键盘事件
keyup: 键盘抬起事件
keydow:
watch监视
1571296942742.png
ES6模块两种方式：
一、
//传出
export function add(a,b){
return a+b
}
二、
//传出
function add(a,b){
return a+b
}
export default{
add
}
导入 、
import dom from './calc.js'
function reverse(str){
console.log(dom.add('1','2'))
}
promise
1571105283386.png
async/awite
1、
父子通信
路由重定向
重定向：是给域名改成斜杠
1568960193104.png
问题：
1569288993646.png
注意：端口已启动，需要关掉再启动。
修改标题
1570761694160.png
环境变量
1571360697449.png
mixin混入
1571363792360.png
get请求在mixin里面封装
1571367349022.png
1571367445802.png
网友评论