vue学习
vue的基础语法
v-if 页面是是否有这个标签
v-show 页面上存在这个标签，display 控制显示或者不显示.
computed 计算属性 和 methods 的不同的点，是 计算属性有缓存，当数值发生变化的时候，计算属性才会重新计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-html="message"></p>
<p v-if="ok">我想带你去浪漫的西二旗，一起去上地做面试题</p>
<p v-show="ok">我想带你去浪漫的西二旗，一起去上地做面试题</p>
<p><a v-bind:href="url">点我啊</a></p>
<button v-on:click="ooxx">ooxx</button>
<form action="" v-on:submit.prement="onSubmit">
<input type="text">
<input type="submit">
</form>
<p>{{messag1}}</p>
<p>{{reverseMe}}</p>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
name:'sakula',
age:9000,
message:'<a href="">屠龙宝刀，点我就送。</a>',
ok:true,
url:'http://www.baidu.com',
messag1:'123456',
},
methods:{
ooxx:function () {
alert('ooxxx');
},
onSubmit:function () {
alert('不许提交.');
}
},
computed:{
reverseMe:function () {
return this.messag1.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-html="message"></p>
<p v-if="ok">我想带你去浪漫的西二旗，一起去上地做面试题</p>
<p v-show="ok">我想带你去浪漫的西二旗，一起去上地做面试题</p>
<p><a v-bind:href="url">点我啊</a></p>
<button v-on:click="ooxx">ooxx</button>
<form action="" v-on:submit.prement="onSubmit">
<input type="text">
<input type="submit">
</form>
<p>{{messag1}}</p>
<p>{{reverseMe}}</p>
<p>{{fullname}}</p>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
name:'sakula',
age:9000,
message:'<a href="">屠龙宝刀，点我就送。</a>',
ok:true,
url:'http://www.baidu.com',
messag1:'123456',
fullname:'赵诗琪',
firstname:'赵',
lastname:'诗琪',
},
methods:{
ooxx:function () {
alert('ooxxx');
},
onSubmit:function () {
alert('不许提交.');
}
},
computed:{
reverseMe:function () {
return this.messag1.split('').reverse().join('');
}
},
watch:{
firstname:function (val) {
this.fullname=val+this.lastname;
},
lastname:function (val) {
this.fullname=this.firstname+val;
}
}
})
</script>
</body>
</html>
class_style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
}
.d2{
background: green;
}
</style>
</head>
<body>
<div id="app">
<div class="d1" v-bind:class="{d2:ok}" v-on:click="ooxx"></div>
<button v-on:click="ooxx">ooxx</button>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
ok:true,
},
methods:{
ooxx:function () {
this.ok=!this.ok;
},
},
})
</script>
</body>
</html>
小清单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
<style>
.ooxx > span:first-child {
color: green;
}
.ooxx > label{
text-decoration:line-through;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="app" class="col-md-6 col-md-offset-3" style="margin-top: 70px">
<div class="panel panel-info">
<div class="panel-heading" style="text-align: center">
<h3 class="panel-title">小清单</h3>
</div>
<div class="panel-body">
<!-- 输入框 开始-->
<div class="input-group">
<input
v-model="newItem.title"
v-on:change="add"
type="text"
class="form-control"
placeholder="Search for..."
>
<span class="input-group-btn">
<button
v-on:click="add"
class="btn btn-default"
type="button"
>
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div><!-- /input-group -->
<!-- 输入框 结束-->
<hr>
<!--列表组 开始-->
<div class="list-group">
<div
v-for="(item,index) in todoList"
class="list-group-item"
v-bind:class="{ooxx: item.ok}"
>
<span
v-on:click="bianlv(index)"
class="glyphicon glyphicon-ok-sign"> </span>
<label for="">{{item.title}}</label>
<span
v-on:click="remove(index)"
class="glyphicon glyphicon-remove pull-right"
></span>
</div>
</div>
<!--列表组 结束-->
</div>
</div>
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
todoList:[],
newItem:{
title:'',
ok:false
}
},
methods:{
add:function () {
//把新代办的事情添加到todList列表中
let obj=Object.assign({},this.newItem);
this.todoList.push(obj);
this.newItem.title='';
},
bianlv:function (index) {
//绑定点击对勾变绿
this.todoList[index].ok=true;
},
remove:function (index) {
this.todoList.splice(index,1);
}
},
})
</script>
</body>
</html>
浙公网安备 33010602011771号