Vue是单页面应用
v-on:click 简写 @click fn可以加括号 也可以不加
<h1 @click="fn('我爱vue')">{{msg}}</h1>
{{}}里面还可以写表达式
<h1>{{msg.substring(0,4)}}</h1>
vue的条件判断v-if后面支持变量 也支持直接写布尔值
点击 输入你的爱好 如果你输入的是java 页面显示 我爱学习java 输入js 我爱学习js '' 显示
<!-- <button @click="fn2">点我</button>
<h1 v-if="str1=='java'">我爱学习java</h1>
<h1 v-else-if="str1=='js'">我爱学习javaScript</h1>
<h1 v-else>我什么都不爱学</h1> -->
属性想使用动态变量需要加上v-bind v-bind可以简写成:
<!-- @click可以直接写js表达式 -->
<!-- class 对象里面的key表示类名 -->
<!-- style 对象里面的key表示属性名 -->
<!-- <h1 :class="{red:flag1,'font-size':flag1}" @click="flag1=!flag1">中国人不骗中国人</h1>
<h1 :style="{color:flag1?'red':'','font-size':flag1?'60px':''}" @click="flag1=!flag1">中国人就骗中国人</h1> -->
v-for 循环 里面有两项 item表示数组的每一项 index表示数组的索引 循环的时候需要加key key最好时候对象里面的属性 如果没有再使用index
<ul>
<li
v-for="(item,index) in arr"
v-bind:key="item.id"
@click="choose(index)"
:style="{color:item.flag?'red':''}"
>{{item.title}} --- {{item.id}}</li>
</ul>
new Vue({
/* 挂载点 */
el: "#app",
/* 数据 */
data: {
arr: [{
id:0,
title:"一天某女子深夜造访涛涛",
flag:true,
},{
id:1,
title:"一天某女子深夜造访正见",
flag:false,
},{
id:2,
title:"一天某小学生深夜玩王者荣耀",
flag:false,
}],
flag1: false,
msg: "欢迎大家正式进入Vue的学习",
flag: false,
str1: ''
},
/* 定义方法的地方 */
methods: {
choose:function(index){
/* 排他 */
this.arr.forEach(r=>{r.flag=false});
/* 把当前索引对象的flag改成true */
this.arr[index].flag = true;
},
fn2: function () {
let str = window.prompt('选择你喜欢的编程');
if (str == 'java') {
/* 使用this.给data中的数据赋值 */
this.str1 = 'java'
} else if (str == 'js') {
this.str1 = 'js'
}
},
fn: function (str) {
alert(str)
}
},
})
<body>
<div id="app">
<!-- <input type="text" :value="str" @input="change"> -->
<!-- v-model就类似于上面的写法 是一种语法糖 来实现双向数据绑定-->
<!-- @keyup后面可以接修饰符 .enter .keyCode值 -->
<input type="text" v-model="str" @keyup.13="keyFn">
<h1>{{str}}</h1>
<!-- 输入email 和 密码 按enter有校验 首先是非空 email必须要含有@和.
按enter可以alert出 邮箱加密码 -->
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
str:'我爱Vue'
},
methods: {
// change:function(e){
// let event = e||event;
// this.str = event.target.value;
// },
keyFn(e){
// let event = e||event;
// if(event.keyCode==13){
// alert(this.str)
// }
alert(this.str)
}
},
})
</script>
</body>
<body>
<div id="app">
<p>
邮箱：<input type="text" v-model="user">
</p>
<p>
密码：<input type="text" v-model="pwd" type="password">
</p>
<button @click="submit">提交</button>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
user:'',
pwd:''
},
methods: {
submit(){
if(!this.user.trim()||!this.pwd.trim()){
alert('邮箱或密码不能为空')
return
}
if(this.user.indexOf('@')==-1||this.user.indexOf('.')==-1){
alert('邮箱必须含有@和.')
return
}
alert(`您的邮箱是${this.user}，您的密码是${this.pwd}`)
}
},
})
</script>
</body>
