vue.js引入:
1.文本
<div id="box">
<h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{
msg:'hello'
},
});
</script>
2.事件
<div id="box">
<h1>{{msg+"改变后"+msg.split('').reverse().join('')}}</h1>
<button @click='change'>改变</button>
<div v-if='show'>为真显示</div>
<div v-else>为假显示</div>
//事件设置方式1 v-on:事件名="函数"
<div v-on:click="click1">点击事件1</div>
//事件设置方式2 @事件名="函数"
<div @click="click2">点击事件2</div>
//默认事件取消 .prevent 默认事件取消冒泡 .stop
<a href="www.baidu.com" @click.prevent="click3">a标签点击事件</a>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{
msg:'hello',
show:false
},
methods:{
//函数定义
change(){
this.msg='OK'
},
click1(){
alert('点击事件1')
},
click2(){
alert('点击事件2')
},click3(){
alert('a标签点击事件')
}
}
});
</script>
3.v-model使用
<input v-model="info" placeholder="edit me">
<p>Message is: {{ info}}</p>
此处需要在data中加入info这个字段
data:{
msg:'hello',
show:false,
info:''
},
4.改变标签颜色的两种情况:
(1)只能存在一种不同的颜色状况时:
如导航栏:
代码如下:
<script src="../vue.js"></script>
<style>
li{ float: left; list-style: none;text-align: center;width:80px}
.color1{
background-color: red;
}
.color2{
background-color: green;
}
</style>
<div id="app">
<div>
<div>
<ul>
//三目运算:这里判断元素i的下标是否与当前被选中的元素下标相同,相同时设置其class为color1 否者为color2
<li v-for="(item,i) in title" :class="index==i?'color1':'color2'" @click="change(i)" v-text="item"></li>
</ul>
</div>
<div>
你选择了<span class="color2" v-text="name"></span>
</div>
</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{
title:["HTML","CSS
","JavaScript","Vue.js"],
name:'HTML',
index:0 //当前元素,默认选中第一个
},
methods:{
change(i){
//动态改变被选中元素索引
this.index=i;
this.name=this.title[i]
}
}
})
</script>
(2)当需要多个时:
要求:原本都是绿色 你点击一次后变为黄色,再点一次变为绿色。
底部的total为所有黄色数值之和
以下代码仅实现了功能,而没有添加样式:
<div id="app">
<ul>
<li v-for="(item,index) in course" :class="item.active?'color1':'color2'" @click="change(index)">
<span v-text="item.name"></span>
<span v-text="item.price"></span>
</li>
</ul>
<span v-text="total"></span>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
course:[{
name:"前端开发",
price:3000,
active:false
},
{
name:"python",
price:"1000",
active:false
},
{
name:"Java开发",
price:2000,
active:false
},{
name:"GO语言",
price:2200,
active:false
}],
total:0
},
methods: {
change(i){
this.course[i].active=!this.course[i].active,
this.total=this.course[i].active?(this.total+=parseFloat(this.course[i].price)):(this.total-=parseFloat(this.course[i].price))
}
}
})
</script>
效果:
5.vue中通过axios发送请求对数据初始化:
需要引入axios
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script src="../axios.min.js"></script>
</head>
<body>
<div id="app">
<div></div>
<button @click="get">提交</button>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods: {
get(){
var that = this;
axios.get('http://localhost/user')
.then(function(response){
//then是事件处理后的数据回调
that.data = response
console.log(response)
}).catch(function(error){
//catch是错误捕获处理
console.log(error)
})}
},
})
</script>
</body>
</html>
6.前端样式居中的问题:
(1).首先body设置text-align:center
(2)对需要居中的div盒子设置css样式margin:0 auto
效果:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script src="../axios.min.js"></script>
<style>
body {
background-color:#eee7e1;
font-size:12px;
line-height:12px;
text-align:center;
}
.goods{
height:230px;
width: 190px;
background-color:aliceblue;
margin:0 auto
}
.top{
background-color: crimson;
height: 20px;
width: 190px;
margin:0 auto
}
</style>
</head>
<body>
<div id="app" class="app">
<div class="top"></div>
<div class="goods" v-for="item in infos">
<p>
<span v-text="item.num"></span>
<span v-text="item.name"></span>
</p>
<p><img :src="item.imgUrl"/></p>
<p v-text="item.desc"></p>
<div style="background-color:aqua;height: 10px;width: 190px;"></div>
</div>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
infos:[]
},
methods:{
},mounted(){
var that = this;
axios.get("../data.json")
.then(function(respnose) {
var string = JSON.stringify(respnose.data).trim();
console.log(respnose.data)
that.infos=eval(respnose.data);
})
.catch(function(error){
console.log(error)
})
}
})
</script>
</body>
</html>
注意 :这里有一个踩坑点:
原来的数据中num、name、imgUrl、desc是没有引号的,而且其文件为.txt文件,在通过上面的get请求时,得到的数据中有很多的/r/n导致页面无法正常显示,后来我就把它改成了标准的json格式数据就可以了:如下
[{
"num": 1,
"name": "Za姬芮新能真皙美白隔离霜 35g",
"imgUrl": "../image/icon-1.jpg",
"desc":"¥59.90 最近13403人购买"
}, {
"num": 2,
"name": "美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml",
"imgUrl": "../image/icon-2.jpg",
"desc":"¥89.00 最近13610人购买"
}, {
"num": 3,
"name": "菲奥娜水漾CC霜40g",
"imgUrl": "../image/icon-3.jpg",
"desc":"¥59.90 最近13403人购买"
}, {
"num": 4,
"name": "HC 蝶翠诗橄榄卸妆油 200ml",
"imgUrl": "../image/icon-4.jpg",
"desc":"¥169.00 最近16757人购买"
}]
7.模糊搜索功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
<script src="../axios.min.js"></script>
</head>
<body>
<div id="app">
<div>
<input v-model="searchQuery"/>
<table>
<thead>
<tr>
<td v-for="col in columns">{{col | toUpper}}</td>
</tr>
</thead>
<tbody>
<tr v-for="r in result">
<td v-for="col in columns">{{r[col]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
columns: ['name', 'gender', 'age'],
infos:[],
searchQuery:""
},
methods: {
},
mounted() {
var that = this;
axios.get("../name.json").then(function (response) {
console.log(response.data)
that.infos = response.data
})
},
filters: {
toUpper(value){
return value.charAt(0).toUpperCase()+value.slice(1)
}
},
computed: {
result(){
var that = this;
return this.infos.filter(function (param) {
return param.name.toLowerCase().indexOf(that.searchQuery.toLowerCase())!==-1;
})
}
},
})
</script>
</body>
</html>
8.Vue全局组件,在多个vue实例之间都能使用
注意:当你在组件中对多行组件值渲染时,需要用一个容器进行包裹:
<template id="t">
//需要进行包裹
<div>
<span v-text="info"></span>
<span>{{code}}</span>
</div>
</template>
完整代码:
<div id="content">
//调用组件
<test></test>
</div>
<template id="t">
<div>
//这里的info取到的是组件中的info而非vue实例中的
<span v-text="info"></span>
<span>{{code}}</span>
</div>
</template>
<script>
Vue.component('test',{
template:"#t",
data:function () {
return {
info:"ok",
code:200
}
}
})
var vm = new Vue({
el:'#content',
data:{
info:"OK",
code:"200"
}
})
</script>
9.局部组件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<template id="t">
<div>
<span>{{msg}}</span>
</div>
</template>
<template id="t2">
<div>
<span>{{msg}}</span>
</div>
</template>
<div id="app">
<test1></test1>
</div>
<div id="app2">
<test2></test2>
</div>
<script>
//第一个vue实例
var vm = new Vue({
el:'#app',
data:{
},
components:{
//此组件只能在id为app的容器中使用
"test1":{
//引用id为t的模板内容
template:"#t",
data:function(){
return {
msg:"test1"
}
}
}
}
});
//第二个vue实例
var vm2 = new Vue({
el:"#app2",
data:{
},
components:{
//此组件只能在id为app2的容器中使用
"test2":{
//引用id为t2的内容
template:"#t2",
data:function(){
return{
msg:"test2"
}
}
}
}
})
</script>
</body>
</html>
10.父子组件
一个组件包含了另一个组件,就叫父子组件:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<template id="t1">
<div>
<h1>这是父组件</h1>
<child></child>
<div>
<child></child>
</div>
</div>
</template>
<template id="t2">
<div>这是子组件</div>
</template>
<div id="app">
<parent></parent>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{},
components:{
"parent":{
template:"#t1",
components: {
"child":{
template:"#t2"
}
}
}
}
})
</script>
</body>
</html>
11.传值问题:
1.props传值:
<template id="t1">
<div :class="color">
<span>{{title}}</span>
</div>
</template>
<div id="app">
//这里的color与script文件中组件1的color对应,color是自定义的属性,建议传值时不要命名为class等属性,容易混淆导致报错
<test color="red"></test>
//这里的color和title与script文件中组件2的color和title对应
<test2 color="red" title="t1"></test2>
</div>
<script>
//组件1
Vue.component('test',{
props:['color'],
//这里的color是组件中你定义的
template:'<div :class="color">组件</div>'
});
//组件2
Vue.component('test2',{
props:['color','title'],
template:"#t1"
})
var vm = new Vue({
el:'#app',
data:{}
})
</script>
2.$emit传值