虽然之前在vue官网学习过,但是发现才半年不用,就有点生疏了,所以现在打算记录一下已备不时之需。
1.el挂载点
<body>
<div id="app1" class="app1">
{{ message + '!'}} {{name}} {{age}}岁
<h2 v-text="message+'!'"></h2> //<v-text>替换指定部分
</div>
<script type="text/javascript">
var stu = {
"message": 'Hello Vue!',
"name" : "猪猪侠",
"age" : "10",
}
var myfristapp = new Vue({
el: '#app1', //el挂载id用#号,class用.号 *vue不能挂载到body和html标签上
data: stu, //data只生效于挂载后的标签的作用域
});
myfristapp.age = 7;
myfristapp.$watch('age',function(oval,nval){ //添加观察
console.log(oval,nval);
})
myfristapp.age = 20;
</script>
</body>
2.vue指令:
2.1
v-text
v-html
v-bind :设置元素的属性
<body>
<div id="app">
{{msg}}
<p>Using mustaches: {{ rawHtml }}</p>
<p v-html="rawHtml"></p>
<div v-bind:class="color">test...</div>
<p>{{ number + 1 }}</p> //number需要在data中声明
<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p> //js代码
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
rawHtml : '<span style="color:red">this is should be red</span>',
color:'blue',
number : 10,
ok : 1,
message : "vue"
}
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>
</body>
运行结果:
2.2
事件绑定 v-on == @ ,
如 v-on:mousedown=“func1” 相当于 @ mousedown==“fun1”
也可以通过键盘事件@keyup.enter=“fun1” 访问,其中enter表示回车键,当然还可以换成其他键
VUE有一个类似于jetpack的databinding的特点,底层数据变化会自动改变被挂载的标签中的响应的数据,如下面的猪,每点击一次click me,底层数据猪+1,同时视图中的猪也+1.
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<div @click.stop="click2">
click me:
{{food}}
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : false,
food : "猪",
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click2 : function () {
this.food += "猪";
}
}
});
</script>
</body>
效果:
2.3
v-show 根据表达式的真假判断元素是否隐藏和出现 (应用广泛:广告、遮罩等等)
<body>
<div id="app">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="./img/xxx.gif" alt="">
<img v-show="age>=18" src="./img/xxx.gif" alt="">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
age:17
},
methods: {
changeIsShow:function(){
this.isShow = !this.isShow;
},
addAge:function(){
this.age++;
}
},
})
</script>
</body>
2.4
v-if 、v-else-if
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
type : "B",
ok : false
}
});
</script>
</body>
2.5
v-for
循环数组使用:
data:{
arr:[1,2,3,4,5]
}
v-for=“item in arr” 其中arr是要遍历的数组名,in是关键字,item是你自己定义的,类似于java的foreach方法
v-for=“item,index in arr” index是数组的下标,也是自己定义的。
下面给一个稍微复杂一点的数组来处理一下
<body>
<div id="app">
<ul>
<li v-for="orderitem, key in orderlist">
{{key}} :
<br/>{{ orderitem.orderid }}
<br/>{{ orderitem.userid }}
<br/>{{ orderitem.userName }}
<br/>{{ orderitem.userAddress }}
<br/>{{ orderitem.userPhone }}
<ul>
<li v-for="goods in orderitem.goodsInfo">
{{ goods.goodsimg }}
{{ goods.goodscolor}}<br/>
{{ goods.goodsprice}}<br/>
{{ goods.goodsid}}<br/>
{{ goods.goodssum}}<br/>
</li>
</ul>
<br/>{{ orderitem.orderPrice }}
<br/>{{ orderitem.orderStatus }}
</li>
</ul>
<ul>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
orderlist : [
{
"orderid": "t001_2019-12-31-08-46-11",
"userid": "t001",
"userName": "殷x伟",
"userAddress": "xxxxx市",
"userPhone": "172xxxx3658",
"goodsInfo": [{
"goodsimg": "images/goodsImg/x002.jpg",
"goodscolor": "蓝色",
"goodsprice": "399",
"goodsid": "x002",
"goodssum": "1596",
"goodsname": "宴会高跟鞋",
"goodssize": "S",
"goodsnum": "4"
}],
"orderPrice": "1596",
"orderStatus": "未支付"
}, {
"orderid": "t001_2019-12-31-08-45-24",
"userid": "t001",
"userName": "殷x伟",
"userAddress": "xxxxx市",
"userPhone": "172xxxx3658",
"goodsInfo": [{
"goodsimg": "images/goodsImg/b006.jpg",
"goodscolor": "蓝色",
"goodsprice": "499",
"goodsid": "b006",
"goodssum": "8483",
"goodsname": "超迷你链条单肩包",
"goodssize": "S",
"goodsnum": "17"
}, {
"goodsimg": "images/goodsImg/x005.jpg",
"goodscolor": "红色",
"goodsprice": "1099",
"goodsid": "x005",
"goodssum": "4396",
"goodsname": "高跟鞋",
"goodssize": "M",
"goodsnum": "4"
}, {
"goodsimg": "images/goodsImg/y006.jpg",
"goodscolor": "黑色",
"goodsprice": "13999",
"goodsid": "y006",
"goodssum": "41997",
"goodsname": "时尚女子大衣",
"goodssize": "XL",
"goodsnum": "3"
}],
"orderPrice": "54876",
"orderStatus": "已收货"
}
],
}
});
</script>
</body>
结果:
同理v-for可以在对数组进行修改的时候同步对视图进行修改(响应式的)
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{{ index+1 }}校区:{{ it }}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西蓝花"}
]
},
methods: {
add:function(){
this.vegetables.push({ name:"花菜炒蛋" }); //向数组添加数据
},
remove:function(){
this.vegetables.shift(); //移出数组数据
}
},
})
</script>
</body>
结果:
2.7
v-model数据双向绑定,即视图数据的改变会引起vue底层数据的改变,底层数据的改变也会引起视图数据的改变,这是前后端分离的重要表现,即前端和后端看做两个互不相干扰的程序,只是需要交互时,才进行交互。
<body>
<div id="app">
<input type="button" value="修改message" @click="setM">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{ message }}</h2>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"输入试试"
},
methods: {
getM:function(){
alert(this.message);
},
setM:function(){
this.message ="小笨猪";
}
},
})
</script>
</body>
结果:
小节到这里vue的本地应用复习的查不多了:
看一个综合实现,实现一个多功能记事本,用VUE的话很简单
https://www.bilibili.com/video/BV12J411m7MG?p=18
3.0 网络应用
3.1 axios 网络请求库(内部封装ajax)
用于结合网络数据开发应用,如接受外部api开发应用等。
先看一下格式:
第一句是引入axios,
第二句是使用get方式获取数据,括号中的是get参数,then中的第一个function是成功通信的回调函数,第二个function是通信失败时的回调函数
第三句是使用post方式获取数据,传递参数使用的数对象的形式,其他的都与get一样
(是不是感觉和jquery的ajax很像…,get方式的参数真的是够言简意赅了…)
例:
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6") //?num=6是参数,代表请求的效果数
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
//{username:"小笨猪"}是参数,代表要接入的用户 *post方法传递的参数必须是对象形式
axios.post("https://autumnfish.cn/api/user/reg",{username:"小笨猪"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
结果:
3.1
在vue中使用axios
首先需要注意几点:
代码:
<body>
<div id="app">
<input type="button" value="获取笑话" @click="getJoke">
<p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/*
接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话
*/
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods: {
getJoke:function(){
// console.log(this.joke);
//将外部this占存为that
var that = this;
axios.get("https://autumnfish.cn/api/joke").then(function(response){
// console.log(response)
console.log(response.data);
// console.log(this.joke);
that.joke = response.data;
},function (err) { })
}
},
})
</script>
</body>
结果:
好了,vue复习到这里就可以了,基本能解决90%的问题了,毕竟vue是个轻量级前端框架,更多的逻辑操作还是要交给后端或者node.js来处理