目录
本节所有代码以及课程资源资源链接:
一.学前须知
熟悉HEML、CSS、Javascript、AJAX
二.Vue基础
Vue简介及作用
1.它是一个JavaScript框架
2.简化Dom操作
3.响应式数据驱动
第一个Vue程序
首先要在visual Studio Code中创建一个HTML文件,百度一下
1.导入开发版本的Vue.js
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2.创建Vue实例对象,设置el属性和data属性
3.使用简洁的模板语法把数据渲染到页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础 </title>
</head>
<body>
<div id="app">
<!-- 大括号差值表达式,可以先把它理解成模板的语法 -->
{{message}}
</div>
<!-- 从Vue官网复制过来的 -->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 创建一个Vue实例对象
var app=new Vue({
// #表示id选择器
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
运行效果图
el挂载点
el是用来设置Vue实例挂载(管理)的元素
data:数据对象
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data:数据对象</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{school.name}} {{school.mobile}}</h2>
<ul>
<li>{{campus[0]}}</li>
<li>{{campus[3]}}</li>
</ul>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"你好,小黑",
school:{
name:"黑马程序员",
moble:"400-618-9090"
},
campus:["北京校区","上海校区","广州校区","深圳校区"]
}
})
</script>
</body>
</html>
运行结果图
总结
本地应用
v-text
v-html
语法
如果需要渲染(例如是一个超链接)就用v-html类型的,如果只是一个文本就用v-text类型
v-on指令
语法:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on指令基础</title>
</head>
<body>
<!-- 2.html结构 -->
<div id="app">
<input type="button" value="v-on指令基础" v-on:click="doIt">
<!-- 简写方式 -->
<input type="button" value="v-on指令" @click="doIt">
<!-- 双击事件,点击两次才会生效 -->
<input type="button" value="双击事件" @dblclick="doIt">
<!-- 点击“西兰花炒蛋”这几个字,后边就会出现好好吃这几个字 -->
<h2 @click="changeFood">{{food}}</h2>
</div>
<!--1. 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 3.创建Vue示例
var app=new Vue({
el:"#app",
data:{
food:"西兰花炒蛋"
},
methods:{
doIt:function(){
alert("做IT ");
},
changeFood:function(){
this.food+="好好吃!"
}
}
})
</script>
</body>
</html>
运行效果图
总结
计数器
语法:
代码以及效果图:
总结:
v-show
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app" >
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="D:\img\1.jpg" alt="">
<img v-show="age>=18" src="D:\img\1.jpg" alt="">
</div>
<!--1. 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<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>
</html>
效果图:
总结:
v-if
语法:
代码以及效果图:
总结:
v-bind
语法:
两种效果一样
代码以及效果图:
总结:
图片切换
语法:
代码:
css资源在本文开头已给出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>图片切换</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
深圳创维校区环境
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="" />
<!-- 左箭头 -->
<!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a> -->
<a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
</body>
</html>
效果图:
总结:
v-for
语法:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 2.div -->
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="item in arr">
程序员之家:{{item}}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 3. -->
<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>
</html>
效果图:
总结:
v-on补充
代码以及效果图:
总结:
v-model
语法:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
message:"程序员",
},
methods:{
getM:function(){
alert(this.message);
},
setM:function(){
this.message="酷丁鱼";
}
}
})
</script>
</body>
</html>
效果图:
总结:
问题:前端代码不同于后端,当你关键字打错时它不会提示,这样就需要在编程的时候细心一点,以免出现细节方面的问题,会很难解决。例如,编码过程中methods易打错少打了一个s,导致页面效果显示不出来......