Vue——基础语法篇
author：木子六日
学习视频来源
coderwhy老师的vue教学
01.hello vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello vue!</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="div01">
<h2>{{message}}</h2>
</div>
<div>
{{message}}
</div>
</body>
<script type="text/javascript">
let app = new Vue({
el:'#div01',
data:{
message:'有一说一vue这么写一点也不别扭，我已经爱上vue了'
}
})
</script>
</html>
02.vue展示列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div01">
<h1>这写起来也太爽了吧。。。</h1>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#div01',
data:{
movies:['阳关灿烂的日子','鬼子来了','太阳照常升起','让子弹飞','一步之遥','邪不压正']
}
})
</script>
</body>
</html>
03.vue计数器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>当前计数:{{count}}</h2>
<button type="button" v-on:click="count++">+</button>
<button type="button" @click="count--">- </button> </div> <script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add: function() {
this.count++;
},
minus: function() {
this.count--;
}
}
})
</script>
</body>
</html>
04.v-once的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-once的使用</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:'nihao'
}
})
</script>
</body>
</html>
05.v-html的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-html的使用</title>
</head>
<body>
<div id="app">
<h2 v-html="url"></h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
url:"<a href='https://www.baidu.com'>百度一下</a>"
}
})
</script>
</body>
</html>
06.v-text的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-text的使用</title>
</head>
<body>
<div id="app">
<h2 v-text="message"></h2>
<h2>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:"丢雷楼某嗨"
}
})
</script>
</body>
</html>
07.v-pre的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-pre的使用</title>
</head>
<body>
<div id="app">
<h2 v-pre>{{message}}</h2>
<h2>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:"丢雷楼某嗨"
}
})
</script>
</body>
</html>
08.v-bind的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind的使用</title>
<style type="text/css">
.Red{
color: red;
}
.Blue{
color: blue;
}
</style>
</head>
<body>
<div id="app" style="text-align: center;">
<img v-bind:src="url1" width="400px" height="500px">
<img :src="url2" width="400px" height="500px">
<hr >
<h1 v-bind:class="{Red:isRed,Blue:isBlue}">点击按钮改变颜色</h1>
<button @click="changeClass">color change</button>
<hr >
<h5 :style="{fontSize:tempSize+'px'}" @click="changeSize">点击字体变大</h5>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
url1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589563082654&di=abe029e125e1a7a4bc6982398a1b6270&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20161215%2F20161215154634_940b4d487aedf8f5c0931f7f3591781b_1.jpeg",
url2:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589563500622&di=65e0fd8719641dac01b8b3e76f209da3&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20170511%2F20170511132714_a97930c96c5a47884752b81f8a5da89f_6.jpeg",
isRed:true,
isBlue:false,
tempSize:50
},
methods:{
changeClass:function(){
this.isRed = !this.isRed;
this.isBlue = !this.isBlue;
},
changeSize:function(){
this.tempSize++;
}
}
})
</script>
</body>
</html>
09.小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小练习</title>
<style type="text/css">
.Color{
color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in movies"
:class="{Color:index === currentIdx}"
@click="changeColor(index)">
{{item}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
movies:['阳光灿烂的日子','鬼子来了','太阳照常升起','让子弹飞','一步之遥','邪不压正'],
currentIdx:0
},
methods:{
changeColor:function(index){
this.currentIdx = index;
}
}
})
</script>
</body>
</html>
10.computed计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>computed计算属性的使用</title>
</head>
<body>
<div id="app">
<h2>{{str3}}</h2>
//两种写法等价
<h2>{{str4()}}</h2>
<br>
<h2>书的总价是：{{totalPrice}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
str1:"木子",
str2:"六日",
books:[
{id:1,name:'数据结构与算法',price:40},
{id:2,name:'计算机组成原理',price:29},
{id:3,name:'操作系统',price:46},
{id:4,name:'计算机网络',price:50},
]
},
computed:{
str3:function(){
return this.str1 + ' ' + this.str2;
},
totalPrice(){
let res = 0;
for(let i = 0;i<this.books.length;i++){
res += this.books[i].price;
}
return res;
}
},
methods:{
str4(){
return this.str1 + ' ' + this.str2;
}
}
})
</script>
</body>
</html>
11.v-on的修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on的修饰符</title>
</head>
<body>
<div id="app" @click="divClick">
<button type="button" @click="btnClick">按钮1</button>
<button type="button" @click.stop="btnClick">按钮2</button>
<br><br>
<form action="baidu" method="post">
<input type="submit" value="提交" @click.prevent.stop="submitClick"/>
</form>
<br>
<input type="text" @keyup.enter="keyup" />
<br><br>
<button type="button" @click.once="btnClick">只能被点击一次的按钮</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
},
methods:{
btnClick(){
console.log('btnClick');
},
divClick(){
console.log('divClick');
},
submitClick(){
console.log('submitClick');
},
keyup(){
console.log('按了一次回车键')
}
}
})
</script>
</body>
</html>
12.v-if的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if的使用</title>
</head>
<body>
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<br>
<h2 v-show="score<0">{{score}}</h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
score:92
}
})
</script>
</body>
</html>
13.filter、map和reduce三大函数介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三大函数</title>
</head>
<body>
<script type="text/javascript">
let arr = [1,23,45435,654,1234,1234,6,56]
let newArr1 = arr.filter(function(n){
return n<100;
})
console.log(newArr1)
let newArr2 = newArr1.map(function(n){
return n * 2;
})
console.log(newArr2);
let sum = newArr2.reduce(function(preValue,n){
return preValue + n;
},0)
console.log(sum);
let total = arr.filter(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(preValue,n){
return preValue+n;
},0)
console.log(total)
let total2 = arr.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n)
console.log(total2)
</script>
</body>
</html>
14.v-model的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
{{message}}
<hr >
<input type="radio" value="male" v-model="sex"/>男
<input type="radio" value="female" v-model="sex"/>女
你所选择的性别是：{{sex}}
<hr >
<input type="checkbox" v-model="agree"/>是否同意
<button type="button" :disabled="!agree">下一步</button>
<hr >
<input type="checkbox" value="basketball" v-model="hobbies" />打篮球
<input type="checkbox" value="reading" v-model="hobbies" />看书
<input type="checkbox" value="movie" v-model="hobbies" />看电影
你的爱好是：{{hobbies}}
<hr >
<select name="country" v-model="country">
<option value ="中国">中国</option>
<option value ="美国">美国</option>
<option value ="俄罗斯">俄罗斯</option>
<option value ="英国">英国</option>
<option value ="法国">法国</option>
</select>
你选择的国家是：{{country}}
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:'',
sex:'male',
agree:false,
hobbies:[],
country:"中国"
}
})
</script>
</body>
</html>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
