1.属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
<style>
.red{
background-color: red;
width: 50px;
height: 50px;
}
.blue{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- href中的属性动态赋值 语法v-bind:href-->
<a v-bind:href="url">百度</a><br />
<!-- 简化写法：href -->
<a :href="url">百度</a><br>
<!-- class类型绑定,动态为class赋值,规则：class属性动态绑定，
绑定之后要查找对应的属性 -->
<div :class="colorClass">我是class修饰</div>
<br />
<hr />
<!-- 属性切换 ：通过按钮控制样式是否展现
:class="{class类型名称:false}" -->
<div :class="{red:flag}">我是class修饰符</div><br />
<div :class="{blue:flag}">我是class修饰符2</div>
<button @click="flag=!flag">切换</button>
<!-- 小结：
1、如果是切换属性:class="属性"
2、如果属性修饰是否展现:class="{class类型名称:false}"-->
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
url:"http://www.baidu.com" ,
colorClass:"red" ,
flag:true
}
})
</script>
</body>
</html>
2.分支结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
<style>
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- 按照用户考试成绩进行评级 -->
<!-- 分支结构：
语法：v-if、v-else-if、v-else-->
<h1>评级</h1>
输入分数:<input v-model="score"/>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=70">中等</div>
<div v-else-if="score >=60">及格</div>
<div v-else="score <60">不及格</div>
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
score:99
}
})
</script>
</body>
</html>
3.循环结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
<style>
</style>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
<!-- 遍历数组 -->
<a v-for="item in array" v-text="item"></a>
<br />
<a v-for="(item,index) in array">
下标：{{index}}~~~~元素：{{item}}<br />
</a>
<!-- 遍历对象 -->
<a v-for="(value,key,index) in user" >
{{index}}~~{{key}}~~~{{value}}<br/>
</a>
<!-- 遍历集合 -->
<a v-for="user in userList">
ID:{{user.id}}|name:{{user.name}}|age:{{user.age}}
<!-- 嵌套循环 -->
<p v-for="(value,key,index) in user">
{{index}}~~{{key}}~~~{{value}}<br/>
</p>
</a>
<!-- 总结: 1.如果遍历数组 参数(value,index)
2.遍历对象 参数(valus,key,index)
特点:遍历数据在页面中展现
-->
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
score:99,
array:["郭晶晶","马龙","姚明"],
user:{
id:100,
name:"郭晶晶",
age:33
},
userList:[
{
id:100,
name:"郭晶晶",
age:33
},
]
}
})
</script>
</body>
</html>
4.表单操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用表单属性</title>
</head>
<body>
<h1>本案例练习 表单提交数据时 数据如何与vue进行数据绑定</h1>
<div id="app">
<form id="userForm"action="http://www.baidu.com">
<div>
<span>
姓名:
</span>
<span>
<input type="text" name="name" v-model="name"/>
</span>
</div>
<div>
<span>性别:</span>
<span>
<!-- 单选框: name属性必须一致 -->
<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
<label for="man">男</label>
<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
<label for="women">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
</div>
<div>
<span>职业</span>
<!-- 如果需要设置为多选 则添加属性 -->
<select name="occupation" v-model="occupation" multiple="true">
<option value="工人">工人</option>
<option value="教师">教师</option>
<option value="工程师">工程师</option>
</select>
</div>
<div>
<span>个人简介</span>
<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
</div>
<div>
<!-- 阻止默认提交事件 -->
<input type="submit" value="提交" v-on:click.prevent="submitForm"/>
</div>
</form>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: '输入名称',
gender: '女',
hobbies: ['吃','喝','玩'],
occupation: ['工人'],
userInfo: ''
},
methods: {
submitForm(){
console.log("姓名:"+this.name)
console.log("性别:"+this.gender)
console.log('爱好:'+this.hobbies)
console.log('职业:'+this.occupation)
console.log('用户详情:'+this.userInfo)
console.log('封装好数据之后,可以使用ajax方式实现数据提交')
}
}
})
</script>
</body>
</html>
5.表单修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src=../js/vue.js></script>
<div id="app">
<!-- 语法:
.number 只能输入数值类型
.trim 去除数据两端空格
.lazy 离焦事件才触发-->
<!-- .number -->
<h3>数据展示:{{age}}</h3>
输入数据:<input type="text" v-model.number="age" /><br />
<button @click="age++">增加</button>
<hr />
<!-- .trim -->
<h2>用户输入长度:{{user.length}}</h2><br />
用户名:<input type="text" v-model.trim="user"/>
<hr />
<!-- .lazy -->
展现用户数据:lazy~~~~{{msg}}<br />
输入用户数据:<input type="text" v-model.lazy="msg" />
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
age:100,
user:'',
msg:'null'
},
methods:{
}
})
</script>
</body>
</html>
6.计算属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src=../js/vue.js></script>
<!--
将用户输入内容进行反转
API:1、字符串转成数组 拆串 split('')
2 将数组倒序 .reverse()
3 将数组拼接成字符串 .join('')
计算属性功能用法:
1.插值表达式中应该写简单的算数计算,如果复杂应该封装
2.如果数据操作相同则应该简化过程.
总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
-->
<div id="app">
数据展现:{{reverse()}}<br />
数据展示:{{reverseCom}}<br />
<input v-model.lazy="msg" type="text"/><br />
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
msg:''
},
methods:{
reverse(){
console.log("方法执行!")
return this.msg.split('').reverse().join('')
}
},
computed:{
reverseCom(){
console.log("计算属性执行!")
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
7.数组操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src=../js/vue.js></script>
<!-- 数组操作常用方法:
push() 结尾追加
pop() 删除最后一个
shift() 删除第一个元素
unshift() 在开头追加元素
splice() 替换数组中的数据
sort() 数据排序
reverse() 数组反转
-->
<div id="app">
输入框:<input v-model="msg" type="text" /><br />
<a v-for="(item,index) in array">
{{item}}<br />
</a><br />
<!-- push操作 -->
<button @click="push">push</button><br />
<!-- pop操作 -->
<button @click="pop">pop</button><br />
<!-- shift()操作-->
<button @click="shift">shift</button><br />
<!-- unshift()操作-->
<button @click="unshift">unshift</button><br />
<!-- splice()操作-->
<button @click="splice1">splice(2->1)</button><br />
<button @click="splice2">splice(2->2)</button><br />
<button @click="splice3">splice(last)</button><br />
<button @click="splice4">splice(删除)</button><br />
</div>
<script>
const APP=new Vue({
el:"#app",
data:{
array:[
"a",
"b",
"c",
"d"
],
msg:'v'
},
methods:{
push(){
this.array.push(this.msg)
},
pop(){
this.array.pop()
},
shift(){
this.array.shift()
},
unshift(){
this.array.unshift(this.msg)
},
splice1(){
this.array.splice(0,2,this.msg)
},
splice2(){
this.array.splice(0,2,this.msg,this.msg)
},
splice3(){
this.array.splice(this.array.length-1,this.array.length,this.msg)
},
splice4(){
this.array.splice(1,1)
}
},
computed:{
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
