版权声明：本文为CSDN博主「闪耀太阳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_16804847/article/details/116518189
1. VUE命令
1.1 v-on命令
1.作用: 如果需要对页面元素进行操作(事件)
1.1.1 click命令
1.1.2 methods属性介绍
通过methods属性定义众多方法.
1.2 事件修饰符
1.2.1 stop
1.2.2 prevent
1.2.3 按键修饰符
1.3 v-bind
1.3.1 属性绑定
1.3.2 属性动态绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<!-- 定义style标签 -->
<style>
.red{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
<a href="http://www.baidu.com">百度</a>
<!-- 属性绑定的语法 -->
<a v-bind:href="url">百度</a>
<!-- 简化操作 -->
<a :href="url"></a>
<hr >
<!-- class的绑定 -->
<div class="red">
class的内容测试
</div>
<hr >
<!-- 需求:需要动态的绑定样式 -->
<div v-bind:class="{red: isRed}">
class的内容测试
</div>
<!-- 简化写法 -->
<div :class="{red: isRed}">
class的内容测试
</div>
<!-- 切换样式 -->
<button @click="isRed = !isRed">切换</button>
v-on v-bind
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com',
//如果控制样式 则设定boolean类型的值
isRed: false
}
})
</script>
</body>
</html>
1.4 分支结构语法
1.4.1 分支结构介绍
- v-if 如果判断为真 则显示标签数据
- v-else 如果判断为假 则显示数据
- v-else-if 判断规则 位于if和else之间的.
- v-show 展现数据.
1.4.2 分支结构介绍(if/else)
1.4.3 v-show命令
1.5 循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
</head>
<body>
<div id="app">
<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
<!-- 2.带下标的循环遍历语法 2个参数 参数1:遍历的数据 参数2:下标 -->
<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
<!-- 3.循环遍历对象 -->
<div v-for="user in userList" :key="user.id">
<span v-text="user.id"></span>
<span v-text="user.name"></span>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//一般采用数组形式保存多个数据
hobbys: ['打游戏','敲代码','喝水','水王八'],
userList: [{
id: 100,
name: '孙尚香'
},{
id: 200,
name: '王昭君'
},{
id: 300,
name: '貂蝉'
}]
}
})
</script>
</body>
</html>
1.6 Vue表单操作
1.6.1 常见表单元素
1.input 文本框
2.textarea 文本域
3.select 下拉框
4.radio 单选框
5.checkbox 多选框
1.6.2 数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单数据提交</title>
</head>
<body>
<div id="app">
<form action="http://www.baidu.com">
<div>
<span>用户名:</span>
<span>
<input name="username" type="text" v-model="username"/>
</span>
</div>
<div>
<span>性别:</span>
<span>
<!--label相当于合并一个div 需要id-for进行关联 -->
<input name="gender" type="radio" value="男" id="man"
v-model="gender"/>
<label for="man">男</label>
<input name="gender" type="radio" value="女" id="women"
v-model="gender"/>
<label for="women">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<span>
<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
<input name="hobbys" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
<input name="hobbys" type="checkbox" value="喝水" v-model="hobbys"/>喝水
</span>
</div>
<div>
<span>部门:</span>
<span>
<!-- 设定下拉框多选 -->
<select name="dept" v-model="dept"
multiple="true">
<option value="财务部">财务部</option>
<option value="研发部">研发部</option>
<option value="测试部">测试部</option>
</select>
</span>
</div>
<div>
<span>用户详情</span>
<span>
文本域
</span>
</div>
<div>
<!-- 让默认的行为失效 -->
<button @click.prevent="submit">提交</button>
</div>
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
username: '',
gender: '女',
//如果数据项有多项 则使用数组接收
hobbys: ['敲代码','喝水'],
//定义下拉框 如果单个数据使用'' 多个数据使用数组
//dept: '研发部'
dept: ['财务部','研发部']
},
methods: {
submit(){
console.log("username数据:"+this.username)
console.log("username数据:"+this.gender)
}
}
})
</script>
</body>
</html>
1.6.3 表单修饰符
1.number : 将用户输入的内容转户为数值类型.
2.trim: 去除左右2边多余的空格.
3.lazy: 简化input框调用js的次数 当失去焦点时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单修饰符</title>
</head>
<body>
<div id="app">
<!-- number 将字符转化为数值 -->
数字1: <input type="text" v-model.number="num1"/><br>
数字2: <input type="text" v-model.number="num2"/><br>
<button @click="addNum">加法操作</button> <br>
总数: {{count}}
<hr >
<!-- 去除多余的空格 -->
数据: <input type="text" v-model.trim="msg"/> <br>
字符长度 {{msg.length}}
<hr />
<!-- lazy 当数据失去焦点时触发事件 -->
检验用户名: <input type="text" v-model.lazy="username"><br>
{{username}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
num1: '',
num2: '',
count: '',
msg: '',
username: ''
},
methods: {
addNum(){
this.count = this.num1 + this.num2
}
}
})
</script>
</body>
</html>
1.7 计算属性
1.7.1 需求说明
有时在vue的JS中需要进行大量的数据计算. 但是如果将所有的数据计算都写到HTML标签中,则代码的结构混乱.
优化: VUE中提供了计算属性的功能.
1.7.2 计算属性案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<!-- 需求: 需要对一个字符串进行反转操作
用户输入内容 abc
要求的输出内容 cba
思路: 字符串拆分为数组 将数组进行反转 将数组拼接成串
方法说明:
reverse(): 将数组进行反转
join("连接符") 将数组拼接为字符串
-->
用户输入: <input type="text" v-model="msg" /> <br>
常规调用:{{msg.split('').reverse().join('')}}<br>
<!-- 添加计算属性的名称-->
计算属性调用: {{reverseMethod}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: ''
},
//定义计算属性的key
computed: {
//指定计算属性的名称 要求有返回值
reverseMethod(){
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
1.7.3 计算属性和方法的区别
考点: 1.方法调用时每次都会执行.
2.计算属性调用时 有缓存机制
3.如果数据需要被大量的引用 则使用计算属性更好 效率高
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
