一、Vue基础
JavaScript相关语法
1、绑定事件
- @click="" 绑定单机事件
- @onclick="" 绑定双击事件
- @keyup.enter="" 绑定回车事件
2、数组
- arr:["s1","s2","s3",] 创建数组
- arr.push() 在数组末尾添加元素
- arr.splice(index,length) 从指定索引删除,并指定删除元素数量
- arr.length 获取数组长度
- arr.splice(0) 清空数组
其他
- console.log("") 控制台输出
- this.method() 在其他方法中调用method方法
1、Vue简介
https://cn.vuejs.org/v2/guide/
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
VScode缩进快捷键:Shift+Alt+F
2、第一个Vue程序
- 引入Vue
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
- 编写页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '你好!'
}
})
</script>
</body>
</html>
- 页面效果
3、el挂载点
Vue实例的el属性可以设置与标签对应的Vue实例,可为标签绑定数据,方法
- id 选择器:"#" (唯一,建议)
<h1 id="app">{{message}}</h1>
<script>
var app=new Vue({
el: "#app",
data: {
message: "hello world!"
}
})
</script>
- class 选择器:"."
<h1 class="app">{{message}}</h1>
<script>
var app=new Vue({
el: ".app",
data: {
message: "hello world!"
}
})
</script>
- 标签选择器:"标签名"
<div>{{message}}</h1>
<script>
var app=new Vue({
el:"div",
data: {
message: "hello world!"
}
})
</script>
4、data数据对象
Vue实例的data属性中,可设置数据值,并根据数据类型,在标签中取出
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<h2>{{message}}</h2>
<h2>{{user.name}} , {{user.password}} , {{user.email}}</h2>
<h2>{{interest[3]}}</h2>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello world!!",
user: {
name: "cxk",
password: "123123",
email: "123@qq.com"
},
interest: ["唱", "跳", "rap", "篮球"]
}
})
</script>
取出方式:
基本值:{{ 属性名 }}
对象值:{{ 对象名.属性值 }}
数组值:{{ 数组名[索引] }}
5、methods方法
Vue实例的methods属性是为标签绑定方法
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app3">
<input type="button" value="单机事件测试" v-on:click="doCode">
</div>
<script>
var v_on=new Vue({
el:"#app3",
data:{
food:"sandwitch"
},
methods:{
doCode:function(){
alert("doCode!!!")
}
}
})
</script>
二、本地应用
1、v-text
可以将标签中的内容替换成v-text中引入的内容
只适用于纯文本
可使用+拼接字符串
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<h2 v-text="message+' world'"></h2>
<h2 v-text="message1+' jntm'"></h2>
<h2>{{message+' !'}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"hello",
message1:"cxk!"
}
})
</script>
2、v-html
可适用将html内容(超链接,按钮...)替换标签内容
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app2">
<h2 v-text="context"></h2>
<h2 v-html="context"></h2>
</div>
<script>
var v_html=new Vue({
el:"#app2",
data:{
context:"<a href='https://www.baidu.com'>百度</a>"
}
})
</script>
标签显示区别:
3、v-on
为标签绑定事件,事件方法可写成函数形式(可传入参数)
事件名不需写on
指令可简写为@
绑定的方法写在Vue实例的methods属性中
<div id="app3">
<input type="button" value="单机事件测试" v-on:click="doCode">
<br><br>
<input type="button" value="简写的单机事件" @click="doCode">
<br><br>
<input type="button" value="双击事件" @dblclick="doCode">
<br><br>
<h2 v-text="food" @click="changeFood"></h2>
<br><br>
<button @click="doIt('java!','js!')" >请点击</button>
<br><br>
<input type="text" @keyup.enter="sayHi" value="请输入用户名">
</div>
<script>
var v_on=new Vue({
el:"#app3",
data:{
food:"sandwitch"
},
methods:{
doCode:function(){
alert("doCode!!!")
},
changeFood:function(){
this.food+=" good!!!"
v_text.message1+=" sb!"
},
doIt:function(n1,n2){
alert("hello!"+" "+n1+" "+n2)
},
sayHi:function(){
alert("确定提交吗?")
}
}
})
var v_text=new Vue({
el:"#app",
data:{
message:"hello",
message1:"cxk!"
}
})
</script>
取出同一个vue实例的data值:this.值name
取出不同vue实例的data值: 实例名.值name
4、案例:计数器
通过点击计数器的加号及减号,可以改变中间数字
并且在数字到0和10时,会有分别有弹窗提示不能进行操作
<body>
<!-- 计数器案例 -->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button @click="decline">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decline: function () {
if (this.num == 0) {
alert("已经是最小啦!")
} else {
this.num--;
}
},
add: function () {
if (this.num == 10) {
alert("已经是最大的啦!")
} else {
this.num++;
}
}
}
})
</script>
</body>
5、v-show
根据真假切换元素的显示状态,指令后的值都会切换为布尔型
原理是修改元素display,实现显示和隐藏
- 通过点击按钮来操纵图片是否显示
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button @click="Show">显示图片</button>
<button @click="noShow">不显示图片</button>
<img src="/static/1.gif" alt="" v-show="isShow">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
Show:function(){
this.isShow=true
},
noShow:function(){
this.isShow=false
}
}
})
</script>
6、v-if
根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
根据指令后布尔值的真假,将dom树添加或移除
- 通过点击按钮来操纵图片是否显示
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button @click="Show">显示</button>
<button @click="NoShow">不显示</button>
<br>
<img src="/static/1.gif" alt="" v-if="isShow">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
Show:function(){
this.isShow=true
},
NoShow:function(){
this.isShow=false
}
}
})
</script>
7、v-bind
为元素绑定属性,可省略v-bind,只写" :"
- 图片的路径,标题,样式皆由v-bind绑定
- 并为图片绑定了单机事件,点击图片后显示边框
<head>
<style>
.active{
border: 2px solid red;
}
</style>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}"
alt="" @click="isShow">
</div>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"/static/1.gif",
imgTitle:"蔡徐坤!",
isActive:false
},
methods:{
isShow:function(){
this.isActive=!this.isActive
}
}
})
</script>
</body>
8、案例:切换图片
通过数组存储图片,点击上一张或下一张切换图片
点击图片显示边框,再次点击消失边框
当图片到达第一张时上一张按钮消失,到达最后一张时下一张按钮消失
<head>
<style>
.active{
border:2px solid black;
}
</style>
</head>
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<button type="button" @click="declineImg" v-show="index!=0">
上一张
</button>
<img :src="imgSrc[index]" alt="" :class="{active:isActive}"
width="400px" height="200px" @click="isBorder">
<button type="button" @click="addImg" v-show="index<(imgSrc.length-1)">
下一张
</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
index: 0,
imgSrc: [
"/static/1.png",
"/static/2.png",
"/static/3.png",
"/static/4.png",
"/static/5.png"],
isActive:false
},
methods: {
addImg: function () {
this.index++;
},
declineImg: function () {
this.index--;
},
isBorder: function(){
this.isActive=!this.isActive;
}
}
})
</script>
</body>
9、v-for
根据数据生成列表结构,经常与数组配合使用
(item,index)in 数组
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}} username:{{item}}
</li>
</ul>
<br><br>
<button @click="addFood">增加</button>
<button @click="decline">减少</button>
<br><br>
<h2 v-for="(item) in foods">
{{item.name}}
</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["cxk","qbl","lbw","wjz"],
foods:[
{name:"sandwitch"},{name:"tock"}
]
},
methods:{
addFood:function(){
this.foods.push({name:"orange"})
},
decline:function(){
this.foods.shift();
}
}
})
</script>
-
将数组数据及索引遍历在页面
-
点击增加与减少按钮,在数组中添加或减少数据。同时页面也随之添加或减少
10、v-model
可用来设置和获取表单元素更改后的值
绑定的data数据和标签内容相关联,一改都改
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message" @keyup.enter="show">
<button @click="changeIt">改变为值为LBW</button>
<h2>{{message}}</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"cxk"
},
methods:{
show:function(){
alert(this.message);
},
changeIt:function(){
this.message="LBW!";
}
}
})
</script>
11、案例:图书列表
- 将数组中的书名展示在页面列表中
- 点击添加按钮即可往数组和页面中添加书名
- 点击删除按钮即可删除当前索引位置图书
- length显示当前图书数量,点击清空图书按钮清空数组和页面中所有图书
<body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="jumbotron">
<h2>BOOK CHARGE</h2>
<input type="text" v-model="bookName">
<button @click="addBook" >添加图书</button>
<br>
<ul>
<li v-for="(item,index) in arr">
{{index+1}} {{item}}
<button @click="declineBook(index)" >删除</button>
</li>
</ul>
<p v-if="arr.length!=0">length:{{arr.length}}</p>
<button @click="clearBook" v-if="arr.length!=0">
清除所有图书
</button>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["Java编程思想","深入理解JVM虚拟机","Spring技术内幕","Effective Java"],
bookName:"请输入书名"
},
methods:{
addBook:function(){
this.arr.push(this.bookName);
},
declineBook:function(index){
this.arr.splice(index,1);
},
clearBook:function(){
this.arr.splice(0);
}
}
})
</script>
</body>