一.Vue入门
1.概述
1.什么是Vue?
Vue是构建用户界面的渐进式框架,只关注视图层(View)
2.Vue的两个核心点
双向绑定:当数据发生改变,自动更新视图;当视图发生改变,数据也要改变
组件视图:划分组件为可重用.可维护.可调试
3.Vue简单了解
a.每一个使用都必须根据Vue这个构造函数创建根实例获得对象 new Vue();
b.
new Vue({
el:"#box",
data:{
数据1,
数据2,
..
},
methods:方法
});
注:el表示挂载元素选择器,data表示代理数据,methods表示方法,这些键的名字是固定的,不能改变
data中的数据以键值对形式写出,可以自定义
4.声明式渲染
声明式:只关注在哪里. 做什么,不关心如何实现
命令式:以代码关注具体的实现过程以及在哪里和做了什么
Vue中的声明式渲染:初始化根实例,Vue自动将数据绑定在DOM模板上
2.Vue入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入vue.js库文件 1.本地引入 2.CDN引入-->
<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 定义一个根标签,作为vue控制的区域 -->
<div id="box">
<!-- 这里获得的就是msg中的内容 -->
<h1>{{msg}}</h1>
</div>
</body>
</html>
<script type="text/javascript">
//1.创建vue实例,注意键是规定好的,不能改变
new Vue({
//选择器
el:"#box",
data:{
//这里面的键可以随便定义
msg:"hello vue"
}
});
</script>
3.插值表达式
插值表达式是vue提供的语法,{{..}} 插值表达式可以做一些简单的计算,但是不建议在里面做运算,只是在里面展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值表达式</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 可以在括号里做一些简单的运算,但是不建议在里面计算,只是用来展示 -->
<div id="box">
{{msg}}
{{"aaa"}}
{{20+30}}
{{a=30}}
{{b=30}}
{{a}}
{{b}}
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
msg:"hello world"
}
});
</script>
二.Vue指令
1.什么是指令
指令是一种特殊的自定义行间属性
指令的职责就是当其表达式的值改变时相应的将某些行为映射到DOM上
在Vue中,指令以v-开头
2.属性绑定
v-bind:将vue实例对象中的data中的某个属性数据,绑定到根元素内某个元素的属性上,要在属性名前面加上v-bind:。不然,无法绑定实际的数据。其中,v-bind可以省略,简写形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定v-bind</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<!-- <a v-bind:href="url" id="a1">百度一下</a><br> -->
<!-- 简写形式,省略v-bind -->
<a :href="url" id="a1">百度一下</a><br>
<input type="text" id="in" v-bind:value="name" />
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#a1",
data: {
'url': "http://www.baidu.com"
}
});
new Vue({
el: "#in",
data: {
'name': "张三",
'password':"123456"
}
})
</script>
3.事件绑定
事件绑定采用v-on,例如:
<button type="button" v-on:click="huanTu()">点击切换图片</button>
简写形式 省略v-on: 用@符号表示
<button type="button" @click="huanTu()">切换图片</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 与data中的数据想绑定 -->
<img v-bind:src="srcUrl" >
<button type="button" v-on:click="huanTu()">点击切换图片</button>
<!-- 简写形式 @ -->
<button type="button" @click="huanTu()">切换图片</button>
</div>
</body>
</html>
<script type="text/javascript">
const vue=new Vue({
el:"#box",
data:{
'srcUrl':'https://cn.vuejs.org/images/logo.png'
},
methods:{
huanTu:function(){
//this表示Vue对象
this.srcUrl='https://cn.vuejs.org/images/vehikl.png'
}
}
});
</script>
4.绑定表单数据
表单数据绑定采用v-model
案例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 这里使用v-model放的是默认值,删除msg的时候,可以看到h1中的内容也在被删除 -->
姓:<input type="text" class="1" id="" value="" v-model="msg" /><br>
<h1>{{msg}}</h1>
名:<input type="text" class="1" id="" value="" /><br>
全名:<input type="text" class="1" id="" value="" />
</div>
</body>
</html>
<script type="text/javascript">
const vue = new Vue({
el: "#box",
data: {
'msg': "芜湖起飞"
}
})
</script>
案例二: 实现输入姓和名时,能自动填入全名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例二: 实现输入姓和名时,能自动填入全名</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
名:<input type="text" class="1" id="" value="" v-model="ming"/><br>
<!-- 全名:<input type="text" class="1" id="" value="" v-model="fullName"/><br> -->
全名:<input type="text" class="1" id="" value="" v-model="xing.concat(' '+ming)"/><br>
</div>
</body>
</html>
<script type="text/javascript">
const vue=new Vue({
el:"#box",
data:{
xing:"",
ming:"",
//fullName:this.xing.concat(" "+this.ming)
}
});
</script>
5.计算属性
采用第2种方式,实现输入姓和名时,能自动填入全名
计算属性:
1.第一次初始化会调用一次。
2.当这个函数中使用的属性的值,一发生变化,这个函数就会调用。
计算属性的细化:
(1).get方法 当这个函数中使用的属性的值,一发生变化,这个get函数就会调用。
(2).set方法 当fullName属性值一变化,就会执行set方法,会拿到fullName变化之后的值
浏览器一般会自带get方法,set方法需要自己手动去设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
名:<input type="text" class="1" id="" value="" v-model="ming"/><br>
名:<input type="text" class="1" id="" value="" v-model="fullName"/><br>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
'xing':"",
'ming':""
},
//计算属性:
/* 1.第一次初始化会调用一次。
2.当这个函数中使用的属性的值,一发生变化,这个函数就会调用。 */
computed:{
fullName:function(){
console.log("第一次初始化的时候,就会调用一次。");
console.log("当这个函数中使用的属性的值,一发生变化,这个函数就会调用。");
var name=this.xing.concat(" "+this.ming);
return name;
}
}
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
名:<input type="text" class="1" id="" value="" v-model="ming" /><br>
全名:<input type="text" class="1" id="" value="" v-model="fullName" /><br>
</div>
</body>
</html>
<script type="text/javascript">
const vue = new Vue({
el: "#box",
data: {
'xing': "",
'ming': ""
},
//计算属性
computed: {
//1.第一次初始化会调用一次。
//2.当这个函数中使用的属性的值,一发生变化,这个函数就会调用。
fullName:{
get:function(){
console.log("get 方法:当这个函数中使用的属性的值,一发生变化,这个get函数就会调用。");
var name=this.xing.concat(" "+this.ming);
return name;
},
//set 方法 可以监听fullName 属性值变化,即更改fullName会引起上面两项的变化
set:function(newValue){
//newValue 就是fullName变化之后的值
console.log("set 方法:当fullName属性值一变化,就会执行set方法,会拿到fullName变化之后的值"+newValue);
var arr=newValue.split(" ");
this.xing=arr[0];
this.ming=arr[1];
}
}
}
});
</script>
6.属性值变化的监听
watch 可以监听属性值的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
姓:<input type="text" class="1" id="" value="" v-model="xing" /><br>
名:<input type="text" class="1" id="" value="" v-model="ming" /><br>
全名:<input type="text" class="1" id="" value="" v-model="fullName" /><br>
</div>
</body>
</html>
<script type="text/javascript">
const vue = new Vue({
el: "#box",
data: {
'xing': "",
'ming': "",
'fullName':""
},
//watch 可以监听属性值的变化
watch: {
xing: function(newValue,oldValue) {
console.log("xing:属性值变化了 "+"新值:"+newValue+"旧值:"+oldValue);
this.fullName=newValue+" ";
},
ming: function(newValue, oldValue) {
console.log("ming:属性值变化了"+" 新值"+newValue+" 旧值"+oldValue)
this.fullName = this.fullName.concat(' ').concat(newValue);
},
fullName:function(newValue, oldValue){
//console.log(oldValue);
var arr=newValue.split(" ");
this.xing=arr[0];
this.ming=arr[arr.length-1];
this.fullName=this.xing+" "+this.ming;
}
}
});
</script>
米和千米的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
米<input type="text" class="class" id="" value="" v-model="mi"/><br>
千米<input type="text" class="class" id="" value="" v-model="qianmi"/><br>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
mi: "",
qianmi:""
},
watch:{
mi:function(newValue){
this.qianmi=newValue/1000;
},
qianmi:function(newValue){
this.mi=newValue*1000;
}
}
});
</script>
7.class属性的绑定
class是特殊属性,绑定的方式与其他属性不同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aClass {
color: blue;
}
.bClass {
font-size: 200px;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- <h1 class="aClass">传统写法改变样式</h1> -->
<!-- :class="'aClass'" 当你使用vue绑定了class属性 类型选择器名称 要用单引号引起来-->
<h1 :class="'aClass'">采用Vue的方式改变样式</h1>
<!-- 绑定多个类选择器 使用[] 让他成为一个数组。 -->
<h1 :class="['aClass','bClass']">芜湖起飞</h1>
<!--让绑定的属性成为变量 -->
<h1 :class="a">一行标题444444444</h1>
<h1 :class="[a,b]">一行标题55555</h1>
<!-- 绑定class属性的值是一个JSON对象
类选择器名:true true 表示选择器生效,false表示选择器不生效。
{'aClass':true,'bClass':true}
-->
<h1 :class="{'aClass':true,'bClass':true}">一行标题55555</h1>
<!-- true 和 false 不写死 而是写出变量 -->
<h1 :class="{'aClass':aflag,'bClass':bflag}">一行标题55555</h1>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
'aflag': true,
'bflag': false
}
});
</script>
案例:点击图片切换样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击图片切换样式</title>
<style type="text/css">
.aClass {
height: 200px;
width: 400px;
border: 1px black solid;
background-color: red;
}
.bClass {
height: 400px;
width: 800px;
border: 2px black solid;
background-color: blue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<div id="" :class="{'aClass':a,'bClass':b}" @click="change()">
</div>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
'a': true,
'b': false
},
methods: {
change() {
this.a = !this.a
this.b = !this.b
}
}
});
</script>