day05笔记--VUEJS
VUEJS
VUEJS 语法
1.count 定义常量
2.let 作用和var类似，有作用域的概念
3.var 特点：没有作用域
入门案例
入门案例步骤
1.导入vue.js文件
2.指定区域进行渲染 需要准备div
3.创建vue.js对象 指定渲染区域 动态调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE入门案例</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 入门案例步骤
1.导入vue.js文件
2.指定区域进行渲染 需要准备div
3.创建vue.js对象 指定渲染区域 动态调用
-->
<!-- 导入vue -->
<div id="app">
<!-- 在div中展现msg属性
插值表达式: {{key}}
-->
<h1>{{msg}}</h1>
</div>
<script>
/**
* 语法 1.count 定义常量
* 2.let 作用和var类似，有作用域的概念
* 3.var 特点：没有作用域
*/
const App = new Vue({
// 指定区域
el: "#app",
// 定义属性
data: {
//key: value
msg: "你好VUE"
}
})
</script>
</body>
</html>
数据显示
1.v-text命令
<h1 v-text="msg"></h1>
2.v-html命令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue入门案例</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 只有显示的可以用插值表达式 输入时不可用input-->
<h1>{{msg}}</h1>
<span>{{msg}}</span>
<p>{{msg}}</p>
<h1 v-text="msg"></h1>
<!-- 2.v-html -->
<div v-html="h3Html"></div>
</div>
<script>
const APP = new Vue({
el:"#app2",
data: {
msg:"你好吗VUE",
h3Html: "<h3>我需要html渲染</h3>"
}
})
</script>
</body>
</html>
3.v-pre 命令 跳过预编译
直接显示{{mag}}
<div v-pre>{{mag}}</div>
4.v-once 命令 只渲染一次
once: “我只渲染一次”
<div v-once>{{once}}</div>
MVVM设计思想
M：Model 封装数据，数据层
V：View 数据的展现
VM：ViewModel DOM Listeners DataBindings 虚拟DOM
MVVM：前端设计思想，为了解耦的一种设计思想
DOM就是页面，虚拟的DOM是VUE提供的对象
双向数据绑定 v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 双向数据绑定 v-model
数据段--页面
页面--数据
-->
<input name="msg" v-model="msg"/>
{{msg}}
</div>
<script>
const APP = new Vue({
el:"#app2",
data: {
msg: "数据随时修改"
}
})
</script>
</body>
</html>
事件得绑定 v-on 简化@
语法: v-on:click=“函数/事件”
简化语法 v-on: 简化为 @
v-on:click="“简化@click=”"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件得绑定</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 实现数据自增 v-on 事件得绑定
语法: v-on:click="函数/事件"
简化语法 v-on: 简化为 @
-->
<h3>数值:{{num}}</h3><br/>
<button v-on:click="num++">自增</button>
<button @click="num++">简化自增</button><!-- 简化 -->
</div>
<script>
const APP = new Vue({
el:"#app2",
data: {
num: 100
}
})
</script>
</body>
</html>
特殊按键触发@keyup.xxxx=" 函数"
特殊按键触发
v-on:keyup=" "
简化
@keyup.enter=" 函数"
keydown按下触发 keyup弹起来触发 keypress 小键盘触发
@keyup.enter=“函数” “回车触发”
@keyup.space=“函数” “空格触发”
@keyup.delete=“函数” “删除键触发”
@keyup.left=“函数”"<-触发"
@keyup.right=“函数” value="->键触发"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键触发</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 用户按计算按钮进行计算 -->
<h3>用户的数据:{{num}}</h3>
<input type="text" v-model="num2" />
<button @click="addNum">计算</button>
<!-- 用户按特殊的键位触发函数 回车触发计算-->
<!-- keydown按下触发 keyup弹起来触发 keypress 小键盘触发 -->
<input type="text" v-model="num2" @keyup.enter="addNum" />
<input type="text" v-model="num2" @keyup.space="addNum" />
</div>
<script>
const APP = new Vue({
el:"#app2",
data: {
num: 100,
num2: 0
},
methods:{
addNum(){
this.num += parseInt(this.num2) /* parseInt()把字符转换成数值类型 */
}
}
})
</script>
</body>
</html>
计算机案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器练习</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<h4>数据{{count}}</h4><br>
<input type="text" v-model="num1"/>num1<br>
<input type="text" v-model="num2" @keyup.enter="addNum" />num2<br>
<button @click="addNum">计算</button><br>
</div>
<script>
const APP = new Vue({
el:"#app2",
data: {
num1: 0,
num2: 0,
count: 0
},
methods:{
addNum(){
this.count =parseInt(this.num1) + parseInt(this.num2) /* parseInt()把字符转换成数值类型 */
}
}
})
</script>
</body>
</html>
阻止冒泡 .stop
元素嵌套，会导致事件的嵌套
说明： 如果事件得嵌套则必然带来事件得冒泡
解决方案：阻止事件冒泡 .stop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按键触发</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app2">
<!-- 元素嵌套，会导致事件的嵌套
说明： 如果事件得嵌套则必然带来事件得冒泡
解决方案：阻止事件冒泡 .stop -->
数值{{num}}
<div @click="num++"><br>
<!-- 嵌套一个div -->
<button @click.stop="num++">自增</button>
</div>
<hr />
<a href="http://baidu.com" @click.prevent="aClick">百度</a>
</div>
<script>
const APP = new Vue({
el: "#app2",
data: {
num: 0
},
methods: {
aClick() {
console.log("跳转")
}
}
})
</script>
</body>
</html>
阻止标签的默认行为 @click.prevent=""
点击链接不会跳转 @click.prevent=""
,
<a href="http://baidu.com" @click.prevent="aClick">百度</a>
属性绑定 v-bind
百度
简写
百度
div中绑定的是VUEdata的属性的key , data的value为头部 style的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定</title>
<script src="../js/vue.js"></script>
<style>
/* red 红色 宽度50 高度50 */
.red {
background-color: red;
width: 50px;
height: 50px;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="app2">
<a v-bind:href="url">百度</a>
<!-- 简写 -->
<a :href="url">百度</a>
<div :class = "colorClass1">
我是红色
</div>
<div :class = "colorClass2">
我是蓝色
</div>
</div>
<hr />
<!-- class类型绑定
-->
<script>
const APP = new Vue({
el: "#app2",
data: {
url: "http://baidu.com",
colorClass1: "red",
colorClass2: "blue"
}
})
</script>
</body>
</html>
分支解构
1.v-if 如果为真则展示数据
2.v-else-if 必须与v-if连用
3.v-else 必须与v-if连用 取反
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支解构</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 分支结构
语法: 1.v-if 如果为真则展示数据
2.v-else-if 必须与v-if连用
3.v-else 必须与v-if连用 取反
案例
要求按照用户的考试成绩评级
>=90 优秀
>=80 良好
>=70 中等
>=60 及格
<60 不及格
-->
<h3>评级</h3>
<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=>不及格</div>
请输入分数<input v-model="score" />
</div>
<script>
const APP = new Vue({
el: "#app",
data: {
score: 0
}
})
</script>
</body>
</html>
循环结构
多次重复的执行同一个操作
1.数组
2.对象
3.数组套对象(集合)
总结
遍历数组 参数(value,index)
遍历对象 参数(value,key,index)
v-for((value,key) in array)
v-for((value,key,index) in array)
遍历用户列表 获取用户信息
v-for(user in userList) 需要获取下标,则再次遍历v-for((value,key,index) in array)
<!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 多次重复的执行同一个操作
1.数组
2.对象
3.数组套对象(集合)
-->
<!-- 直接进行循环遍历数组 -->
<p v-for="item in array">{{item}}</p>
<p v-for="item in array" v-text="item"></p>
<!-- 获取下标
v-for = "(遍历的元素,遍历的下标) in array"
-->
<p v-for="(item,index) in array">
数据:{{item}}
下标:{{index}}
</p>
<hr />
<!-- 遍历对象 -->
<p v-for="(value,key,index) in user">
{{value}} ~~{{key}}~~~{{index}}
</p>
<hr />
<!-- 遍历对象集合 -->
<div v-for="user in userList">
id:{{user.id}}~~
name:{{user.name}}~~
age:{{user.age}}
<!-- 还想获取下标 再一次遍历user -->
<p v-for="(value,key,index) in user">
{{value}}~~{{index}}~~{{index}}
</p>
</div>
<!-- 总结
遍历数组 参数(value,index)
遍历对象 参数(value,key,index)
-->
</div>
<script>
const APP = new Vue({
el: "#app",
data: {
array: ["郭晶晶", "马龙", "姚明"],
user: {
id: 100,
name: "tomcat",
age: 18
},
userList: [{
id: 100,
name: "tomcat",
age: 18
},
{
id: 200,
name: "mysql",
age: 20
}
]
}
})
</script>
</body>
</html>
表单相关操作
常用表单属性
<!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>
<!-- 单选框neme属性一致 -->
<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(){
//数据提交
// 封装好数据之后,可以使用ajax方式实现数据提交
console.log("姓名:"+this.name)
console.log("性别:"+this.gender)
console.log('爱好:'+this.hobbies)
console.log('职业:'+this.occupation)
console.log('用户详情:'+this.userInfo)
}
}
})
</script>
</body>
</html>
表单修饰符
.number 输入为数值类型
.trim 去除前后空格
.lazy 离焦事件 懒加载,不是输一个加载一个,输完一起加载
<!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>表单修饰符</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
语法:
.number 输入为数值类型
.trim 去除前后空格
.lazy 离焦事件 懒加载,不是输一个加载一个,输完一起加载
-->
<h3>数据的展现:{{}}</h3>
年龄:<input type="text" v-model.number="age" /><!-- v-model.number 保证输入的是数值 -->
<button @click="addNum">增加</button>
<hr />
输入长度{{name.length}}<br />
用户名<input type="text" v-model.trim="name" /> <!-- v-model.trim去除左右两边的空格 -->
<hr />
展现数据lazy~~{{msg}} <br>
<input type="text" v-model.lazy="msg" />
</div>
<script>
const APP = new Vue({
el: "#app",
data: {
age: 18,
name: "",
msg: ""
},
methods: {
addNum() {
this.age += 1 /* 上面有了 v-model.number="age" age为数值类型,就不用parseInt()*/
}
}
})
</script>
</body>
</html>
计算属性
API:
1.字符串转化为数组 拆串 split(’’)
2.将数组倒序 .reverse()
3.将数组转化为字符串 .join(’’)
计算属性功能用法:
1.插值表达式中应该写简单的算数计算,如果复杂应该封装
2.如果数据操作相同则应该简化过程.
总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<h1></h1>
<div id="app">
<!-- 需求:
将用户的输入内容进行反转
API:
1.字符串转化为数组 拆串 split('')
2.将数组倒序 .reverse()
3.将数组转化为字符串 .join('')
计算属性功能用法:
1.插值表达式中应该写简单的算数计算,如果复杂应该封装
2.如果数据操作相同则应该简化过程.
总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
-->
<h3>数据展现:</h3>
{{reverse()}}<br> <!-- 方法多次执行-->
{{reverse()}}<br>
{{reverse()}}<br>
{{reverse()}}<br>
{{reverseCom}}<br> <!-- 计算属性只执行一次-->
{{reverseCom}}<br>
{{reverseCom}}<br>
{{reverseCom}}<br>
<input type="text" v-model="msg"/>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: 'abc'
},
methods: {
reverse(){
console.log("方法执行!!!!!")
return this.msg.split('').reverse().join('')
}
},
computed: {
//key:value 必须添加返回值
reverseCom(){
console.log("计算属性!!!!")
return this.msg.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
数组用法介绍
1.push() 在最后一个追加
2.pop() 删除最后一个
3.shift() 删除第一个元素
4.unshift() 在开头追加一个元素
5.splice() 在指定位置替换元素 (替换删除都可用)
6.sort() 数组排序 默认是按照字符编码的顺序进行排序
7.reverse() 数组反转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组操作</title>
</head>
<body>
<div id="app">
<!-- 数组的方法
1.push() 在最后一个追加 在java中push:入栈
2.pop() 删除最后一个 在java中pop:弹栈
3.shift() 删除第一个元素
4.unshift() 在开头追加一个元素
5.splice() 在指定位置替换元素
6.sort() 数组排序 默认是按照字符编码的顺序进行排序
7.reverse() 数组反转
-->
<input type="text" v-model="mag" />信息
<button @click="push()">push</button><br>
<button @click="pop()">pop</button><br>
<button @click="splice()">替换第一个元素 </button><br>
<button @click="splice2()">替换前两个元素 </button><br>
<button @click="splice3()">替换前两个元素,挨个替换 </button><br>
<button @click="splice4()">替换最后一个元素 </button><br>
<button @click="splice5()">删除第二个元素 </button><br>
<span v-for="value in array">
{{value}}
</span>
</div>
<!-- 引入JS文件 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
array: ["a", "b", "c"],
mag: ""
},
methods: {
push(){
this.array.push(this.mag)
},
pop(){
this.array.pop()
},
splice(){
/**
* 语法:
* 参数:
* arg1:操做数据的位置
* arg2:操作的数量 (数字)
* arg3:替换后的数据,可以有多个(可变参数类型)
*/
this.array.splice(0,1,this.msg)
},
splice2(){
this.array.splice(0,2,this.mag)
},
splice3(){
this.array.splice(0,2,this.mag,this.mag)
},
splice4(){
let index = this.array.length - 1;
this.array.splice(index,1,this.mag)
},
splice5(){
this.array.splice(1,1)
}
}
})
</script>
</body>
</html>
扫一扫
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
