Vue系列-01-基础语法
# https://blog-static.cnblogs.com/files/lichengguo/vue.js
# 下载该文件，保存的路径为代码同级目录 js/vue.js 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 引入vue -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3. 通过vue对象提供的指令显示内容到html网页中 -->
<h1>{{message}}</h1>
<p @click="num+=1">{{num}}</p>
数值： <input type="text" v-model="num" disabled>
</div>
<script>
// 2. 创建vue对象,Vue首字母大写的
let vm = new Vue({
el:"#app", // 当前vue对象可以操作的页面范围，一般就是ID元素的选择符
data:{ // 当前vue对象要输出到html页面中的数据
message:"登录错误!",
num: 10084,
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
{{str1.split("").reverse().join("").toUpperCase()}}<br>
<input type="text" v-model="str1"><br>
<span v-html="img"></span>
</div>
<script>
let vm = new Vue({
el:"#index",
data:{
str1:"hello ",
img:"<img src='#'>"
}
})
</script>
</body>
</html>操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="typeStr" placeholder="请输入wifi密码"> <button @click="changeType">{{ tipStr }}</button>
</div>
<script>
let vm = new Vue({
el:"#index",
data:{
url:"#",
title:"测试图片",
typeStr:"password",
tipStr:"显示密码",
},
methods: {
//
changeType(){
// console.log("1")
// console.log(this.typeStr)
if (this.typeStr == "text") {
this.typeStr = "password"
this.tipStr = "显示密码"
} else {
this.typeStr = "text"
this.tipStr = "隐藏密码"
}
}
},
})
</script>
</body>
</html>操作事件1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="type" placeholder="请输入wifi密码">
<button @click="clickHander">{{type_tips}}</button>
<!--<button v-on:click="clickHander">{{type_tips}}</button>-->
</div>
<script>
let vm = new Vue({
el:"#index",
// 在data可以定义当前vue对象调用的属性,调用格式: this.变量名,例如： this.title
data:{
url:"#",
title:"图片不见了",
type:"password",
type_tips: "显示密码",
},
methods:{
// 在methods中可以定义当前vue对象调用的方法,调用格式：this.方法名(),例如： this.clickHander()
clickHander(){
// alert(this.type); // 调用上面的data里面的数据
if(this.type=="password"){
this.type="text";
this.type_tips="隐藏密码";
}else{
this.type="password";
this.type_tips="显示密码";
}
}
}
})
</script>
</body>
</html>操作事件2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="++num">+</button>
<input type="text" v-model="num">
<button @click="sub">-</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
num:0,
},
methods:{
sub(){
if(this.num<=1){
this.num=0;
}else{
this.num--;
}
},
}
})
</script>
</body>
</html>class样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.red{
color: red;
border: 1px solid blue;
}
.bg{
background: yellow;
}
.fz{
font-size: 32px;
}
.bg1{
background: red;
}
.bg2{
background: orange;
}
</style>
</head>
<body>
<div id="box">
<!-- :class={css样式类名: 变量} -->
<p :class="{red:red_bool, bg:bg_bool}">一段文本</p>
<button @click="red_bool=false;">去掉样式</button>
<button @click="red_bool=true;">添加样式</button>
<br>
<br>
<br>
<p :class="p_cls">一段文本</p>
<button @click="p_cls.red=false, p_cls.bg=false;">去掉样式</button>
<button @click="p_cls.red=true, p_cls.bg=true;">添加样式</button>
<br>
<br>
<br>
<p :class="[arr1,arr2]">一段文本</p>
<button @click="arr1.fz=false;">字体变小</button>
<button @click="arr1.fz=true;">字体变大</button>
<br>
<br>
<br>
<p :class="status?'bg1':'bg2'">一段文本</p>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
red_bool:false,
bg_bool:true,
p_cls:{
red:true,
bg:true
},
arr1:{
red:true,
fz:true,
},
arr2:{
bg:true,
},
status:true,
}
})
</script>
</body>
</html>style样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<p :style="{backgroundColor:bg, color:cg}">一段文本</p>
<button @click="cg='white'">改变字体</button>
<br>
<br>
<br>
<br>
<p :style="p_style">一段文本</p>
<button @click="p_style.color='white'">改变字体</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
bg:"red",
cg:"blue",
p_style:{
backgroundColor:"orange",
color:"black",
}
}
})
</script>
</body>
</html>操作样式案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @click="index=0" :class="index==0? 'current':'' ">国内新闻</span>
<span @click="index=1" :class="index==1? 'current':'' ">国际新闻</span>
<span @click="index=2" :class="index==2? 'current':'' ">银河新闻</span>
</div>
<div class="content">
<div class="list" :class="index==0?'active':''">国内新闻列表</div>
<div class="list" :class="index==1?'active':''">国际新闻列表</div>
<div class="list" :class="index==2?'active':''">银河新闻列表</div>
</div>
</div>
<script>
// 思路：
// 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
// 代码实现：
var card = new Vue({
el:"#card",
data:{
index:0, // 当前显示的内容块
},
});
</script>
</body>
</html>v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-if="login_status==false" class="login">
<a href="#">登录</a>
<a href="">注册</a>
</div>
<div v-if="login_status==true" class="user-info">
<div>欢迎～</div>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status:false, // 假设有个登录状态
},
})
</script>
</body>
</html>v-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-if="login_status" class="user-info">
<span>欢迎～</span>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
<div v-else class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status: false, // 假设有个登录状态
}
})
</script>
</body>
</html>v-if v-else-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<span v-if="sex==0">男</span>
<span v-else-if="sex==1">女</span>
<span v-else>保密</span>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
sex:3, // 假设有个变量表示性别
}
})
</script>
</body>
</html>v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-show="login_status" class="user-info">
<span>欢迎～</span>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
<div v-show="!login_status" class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status: false, // 假设有个变量表示登录状态
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in book_list">{{book.title}}</li>
</ul>
<hr>
<br>
<table border="1" align="center" width="799">
<tr>
<th>序号</th>
<th>ID</th>
<th>图书名</th>
<th>价格</th>
</tr>
<tr v-for="book,index in book_list">
<td>下标：{{index+1}}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.price}}</td>
</tr>
</table>
<hr>
<hr>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book_list:[
{"id":11,"title":"图书名称1","price":20},
{"id":12,"title":"图书名称2","price":2000.3},
{"id":13,"title":"图书名称3","price":200.50},
{"id":14,"title":"图书名称4","price":200},
]
}
})
</script>
<ul id="test">
<!-- k是每一个键名, v是每一个value值-->
<li v-for="v, k in book">{{k}}:{{v}}</li>
</ul>
<script>
var vm3 = new Vue({
el:"#test",
data:{
book: {
// "attr属性名":"value属性值"
"id":11,
"title":"图书名称1",
"price":200
},
},
})
</script>
</body>
</html>Filters.js
// 全局过滤器
// Vue.filter("过滤器名称","调用过滤器时执行的函数")
Vue.filter("RMB", function(value){
return value+"元";
})过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
价格：{{ price|keepdot2(3)|RMB }}<br>
价格：{{ price|keepdot2(2)|RMB }}<br>
价格：{{ price|keepdot2(1)|RMB }}<br>
价格：{{ price|keepdot2(4) }}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3
},
methods:{},
// 普通过滤器[局部过滤器]
filters:{
//
keepdot2(value,dot){
return value.toFixed(dot)
},
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
原价格：{{price|k2|RMB}}<br>
折扣价：{{new_price|RMB}}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3,
sale: 0.6, // 折扣
},
// 过滤器
filters:{
k2(value){
return value.toFixed(2)
}
},
// 计算属性
computed:{
new_price(){
return (this.price * this.sale).toFixed(2);
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
账号：<input type="text" v-model="form.username"><span :style="user_style">{{user_text}}</span><br><br>
密码：<input type="password" v-model="form.password"><br><br>
确认密码：<input type="password" v-model="form.password2"><br><br>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
form:{
username:"",
password:"",
password2:"",
},
user_style:{
color: "red",
},
user_text:"用户名长度只能是4-10位"
},
// 监听属性
// 监听属性的变化
watch:{
"form.username": function(value){
if(value.length>=4 && value.length<=10){
this.user_style.color="blue";
this.user_text="用户名长度合法！";
}else{
this.user_style.color="red";
this.user_text="用户名长度只能是4-10位！";
}
},
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{user_text}}
</div>
<script>
// vm初始化时会有以下几个阶段
// 1. vue创建对象vm
// 2. vm对象把数据添加到data属性中
// 3. vm对象显示数据到视图模板html页面中
var vm = new Vue({
el:"#app",
data:{
user_text:"用户名长度只能是4-10位"
},
// vm对象把数据添加到data属性之前
beforeCreate(){
console.log("--------beforeCreate---------");
console.log("$data=", this.$data);
console.log("$el=", this.$el);
console.log("user_text=", this.user_text)
},
// vm对象把数据添加到data属性之后
created(){
// 这里可以使用ajax到后台获取数据给data
console.log("----------created-------------");
console.log("$data=", this.$data);
console.log("$el=", this.$el);
console.log("user_text=", this.user_text)
},
// vm对象显示数据到视图模板html页面之前
// 如果执行 beforeMount，则表示vm对象已经获取到模板ID对象
beforeMount(){
console.log("----------beforeMount-------------");
console.log("$el=", this.$el);
},
// vm对象显示数据到视图模板html页面以后
mounted(){
// 使用ajax或者js在页面刷新前，完成页面修改的操作
console.log("----------mounted-------------");
console.log("$el=", this.$el);
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
账号：<input type="text" v-model="user"><br><br>
密码：<input type="password" v-model="pwd"><br><br>
<button @click.prevent="loginhander">登录</button>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
user:"",
pwd:"",
},
methods:{
loginhander(){
if(this.user.length<3 || this.pwd.length<3){
// 长度太短不能登录
alert("长度太短不能登录");
}else{
// 页面跳转
location.assign("http://www.baidu.com")
}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
width: 400px;
height: 400px;
background: red;
}
.box2{
width: 150px;
height: 150px;
background: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="box1" @click="show1">
<div class="box2" @click="show2">
<p @click.stop="show3">一段文本</p>
</div>
</div>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{},
methods:{
show1(){
console.log("box1");
},
show2(){
console.log("box2");
},
show3(){
console.log("点击了p标签");
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="todolist" class="list_con">
<h2>To do list</h2>
<input type="text" v-model="message" class="inputtxt">
<input type="button" @click="addItem" value="增加" class="inputbtn">
<ul id="list" class="list">
<li v-for="item,key in dolist">
<span>{{item}}</span>
<a @click="delItem(key)" class="del">删除</a>
<a @click="upItem(key)" class="up" > ↑ </a>
<a @click="downItem(key)" class="down"> ↓ </a>
</li>
</ul>
</div>
<script>
// 计划列表代码
let vm = new Vue({
el:"#todolist",
data:{
message:"",
dolist:[
"学习html",
"学习css",
"学习javascript",
]
},
methods:{
addItem(){
if(this.message==""){
console.log("我被执行了")
return false;
}
this.dolist.push(this.message);
this.message = ""
},
delItem(key){
// 删除和替换
// 参数1: 开始时的下标
// 参数2: 元素长度，如果不填默认删除到最后
// 参数3: 表示使用当前参数替换已经删除内容的位置
// this.dolist.splice(key, 1, "你好");
this.dolist.splice(key, 1,);
},
upItem(key){
if(key==0){
return false;
}
// 向上移动
let result = this.dolist.splice(key,1); // 先删除元素在原来列表的位置，并拿取到该元素的返回值
this.dolist.splice(key-1,0,result[0]); // 插入新的元素
},
downItem(key){
// 向下移动
let result = this.dolist.splice(key, 1);
console.log(result);
this.dolist.splice(key+1,0,result[0]);
},
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 注意引入vue.js -->
<script src="js/vue.js"></script>
<style>
table{
width: 700px;
border-collapse: collapse; /* 合并表格的边框 */
}
tr{
height: 42px;
}
table,td,th{
border: 1px solid black;
}
.box{
background-color: #ddd;
border-radius: 5px; /* 边框圆角 */
padding-top: 15px;
padding-left: 30px;
padding-bottom: 15px;
width: 290px;
height: 160px;
position: fixed;
margin: auto;
left: 0px;
right: 0px;
top:0;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="is_show_form=true">添加商品</button>
<br><br>
<table>
<tr>
<th>商品ID</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr v-for="goods,key in goods_list">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.number}}</td>
<td>{{goods.price}}</td>
<td>
<button @click="edit(key)">编辑</button>
<button @click="del(key)">删除{{key}}</button>
</td>
</tr>
</table>
<div class="box" v-show="is_show_form">
商品标题: <input type="text" v-model="name"><br><br>
商品数量: <input type="text" v-model="number"><br><br>
商品价格: <input type="text" v-model="price"><br><br>
<!-- 添加商品的时候是没有ID的，编辑保存商品的时候才有ID -->
<button @click="id>0? save():add() ">保存</button>
<button @click="cancel">取消</button>
</div>
</div>
<script>
/*
* 编辑商品的思路：
* 1. 用户点击"编辑"，显示表单,表单中是当前商品的信息
* 2. 用户在点击表单的保存按钮以后，把用户填写在表单里面的数据同步到data属性中的goods_list
* */
let vm = new Vue({
el:"#app",
data:{
key:"", // 当前编辑的数组成员索引
id:"", // 商品ID
name: "", // 保存表单中的商品标题
number:"", // 保存表单中的商品数量
price:"", // 保存表单中的商品价格
is_show_form: false, // 控制表单显示隐藏
goods_list:[
{"id":1,"name":"商品1","number":30,"price":30.5},
{"id":2,"name":"商品1","number":30,"price":30.5},
{"id":3,"name":"商品1","number":30,"price":30.5},
{"id":4,"name":"商品1","number":30,"price":30.5},
{"id":5,"name":"商品1","number":30,"price":30.5},
],
},
methods: {
//
cancel(){
// 隐藏表单
this.is_show_form=false;
// 清空值
this.id='';
this.key='';
this.name='';
this.number='';
this.price='';
},
//
add(){
// 如果有空值不添加
if (this.name=="" || this.number=="" || this.price==""){
return this.cancel()
}
this.goods_list.push({
"id": this.goods_list.length+1, // 原来的长度基础上+1
"name":this.name,
"number":this.number,
"price":this.price,
});
// 可以在vue的方法中调用内部定义的方法,直接通过this.方法名()
this.cancel();
},
//
del(key){
this.goods_list.splice(key,1);
},
// 显示编辑的表单数据
edit(key){
// 根据key获取对应的数组成员,保存到表单中
this.id = this.goods_list[key].id
this.name = this.goods_list[key].name
this.number = this.goods_list[key].number
this.price = this.goods_list[key].price
this.key = key; // 保存当前要编辑的商品索引下标
this.is_show_form = true;
},
// 保存更新的数据
save(){
let key = this.key;
this.goods_list[key].name = this.name
this.goods_list[key].number = this.number
this.goods_list[key].price = this.price
this.cancel();
},
},
})
</script>
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章