v3-06 vue安装+ vue语法(下篇)
作者：互联网
目录
1. 安装VUE脚手架
流程略...
2. 续vue知识 分支
2.1 分支结构(与java基础类似)
v-if 如果满足条件,则展现后续内容
v-else-if 除了if之外的其他可能性
v-else 上述条件不满足,展现如下内容
2.2. 循环结构
<!--
问题: 什么样的数据需要循环
1. 数组 2. 对象
语法 v-for 遍历展现的是一个个标签
v-for="数据元素 in 集合数组 "
-->
2.2.1 遍历 数组
<h2>遍历数组</h2>
<!--<p v-for="item in hobby" >{{item}}</p>-->
<p v-for="aa in hobby" v-text="aa"></p>
2.2.2遍历 对象
<h2>遍历对象</h2>
<!--直接遍历 值展现value-->
<p v-for="users in user" v-text="users"></p>
<!--展示key value值-->
<div v-for="(value,key) in user">
<p>{{key}}---{{value}}</p>
<p></p>
</div>
<!--key value index都显示-->
<div v-for="(value,key,index) in user">
<p>{{key}}---->{{value}}---->{{index}}</p>
</div>
2.2.3遍历 集合
<h2>遍历集合</h2>
<div v-for="users in userList">
<p>id编号: {{users.id}} ------> 姓名: {{users.name}}</p>
<p></p>
</div>
2.2.4数据: --->
表单数据提交
上
下
计算属性
1. 反转
<!-- 需求: 将字母进行反转 abc cba
方法: 将数据拆分成数组,将数组进行反转,
再讲数组合并为字符串 按照空串拆分 按照空串拼接
split('')+reverse()+join('')
字符串--》 数组--》反转----》字符串
数据展示----->{{msg.split('').reverse().join('')}}<br>
用户输入: <input type="text" v-model="msg"><br>
计算属性 computed 属性
面试题
计算属性与方法的区别
钩子函数
<!--钩子函数: 整个vue有一个完整的执行过程 如果用户需要对vue的对象进行额外的扩展时,可以采用预留的"接口"进行拓展 我们把项目中提前设定好的"接口"在js中成为钩子函数--> <!-- 总结 钩子函数 作用: 对原有操作进行扩展 8个函数 2. 初始化函数4个 修改函数两个 销毁函数两个 3. mounted()函数标识vue对象实例化成功 4. 生命周期函数,是vue对象独有的内容 注意写法不要方法哦methods中 -->
三种状态
1. 创建
2. 销毁
3. 修改
总结: 效果加代码
day02总代码区:-------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueDay02总结</title>
</head>
<body>
<div id="app">
分支:
<h2>-----当前的成绩-----</h2>
<input type="text" v-model="score">
<div v-if="score>99">满分!!</div>
<div v-else-if="score>85">优秀!!</div>
<div v-else-if="score>60">及格!!</div>
<div v-else>再见!!!!</div>
<hr style= "border:1px dashed #de1e1e" >
循环结构(三种)
<!-- <div v-for="item in array">{{item}}</div>-->
<div v-for="item in user">{{item}}</div>
<hr>
key value 循环
<div v-for="(value,key) in user">
<p>{{key}}---{{value}}</p>
</div>
<div v-for="(value,key,index) in user" :key="users.id">
<p>{{key}}-->{{value}}--->{{index}}</p>
</div>
<hr>
<div v-for="users in users">
<p>id编号:{{users.id}}-->{{users.name}}</p>
</div>
<hr style= "border:1px dashed #de1e1e" >
数据封装<br>
输入:<input type="text" v-model="text"><br>
文本: <textarea v-model="textarea"></textarea><br>
<select name="city" v-model="city.address1" multiple="true">请选择
<option value="沈**阳">沈**阳</option>
<option value="沈阳">沈阳</option>
<option value="大连">大连</option>
<option value="抚顺">抚顺</option>
</select><br>
value字符非常重要
<input type="radio" name="sex" v-model="usees.gender" value="男">男
<input type="radio" name="sex" v-model="usees.gender" value="女">女
<hr style= "border:1px dashed #de1e1e" >
属性说明
当前num是----> {{num}}
<input type="text" v-model.number="num">
<button @click="addNum">+10</button>
<br>
当前length是----> {{line.length}}
<input type="text" v-model.trim="line">
<br>
鼠标离开,数字变化--->{{line1}}
<input type="text" v-model.lazy="line1">
<hr style= "border:1px dashed #de1e1e" >
新添属性 computed(计算属性)<br>
01<br>
输入文字: <input type="text" v-model="word">
反转---->{{word.split('').reverse().join('')}}
<br> 02<br>
输入文字: <input type="text" v-model="word">
反转---->{{over}}
<hr style= "border:1px dashed #de1e1e" >
<br>面试题methods与computed区别<br>
{{over}}
{{over}}
{{overmethod()}}
{{overmethod()}}
<br> 计算属性只执行一次,有缓存,方法执行两次<br>
<hr style= "border:1px dashed #de1e1e" >
<h3>vue生命周期: 略</h3>
<hr style= "border:1px dashed #de1e1e" >
数组的相关方法<br>
-----> {{shuzu}}<br>
<input type="text" v-model="finish">
<button @click="push">最后加</button>
<button @click="pop">最后删</button>
<button @click="shift">开头删</button>
<button @click="unshift">开头加</button>
<button @click="sort">排序</button>
<button @click="reverse">反转</button>
<button @click="splice">替换数据</button>
<button @click="splice1">删除数据(第二个)</button>
<h4>所有的方法都测试了, vue(下篇)结束</h4>
<hr style= "border:1px dashed #de1e1e" >
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const app = new Vue({
el: "#app",
data:{
msg: 123,
score: '',
array:[1,2,3,4,5],
user: {
id: 100,
name: 'tomcat 猫',
},
users: [{id:100,name:"张三1"},
{id:200,name:"张三2"},
{id:300,name:"张三3"}],
text:'',
textarea:'',
city: {
address: ['沈阳'],
address1: ['沈阳','大连']
},
usees: {
gender: '女'
},
num:'',
line: '',
line1: '',
word:'abcd',
shuzu: [1,2,3,4,5],
finish:''
},
methods: {
addNum(){
this.num=this.num+10;
},
overmethod(){
console.log("计算方法执行!!")
return this.word.split('').reverse().join('')
},
push(){
this.shuzu.push(this.finish)
},
pop(){
this.shuzu.pop()
},
unshift(){
this.shuzu.unshift(this.finish)
},
shift(){
this.shuzu.shift()
},
sort(){
this.shuzu.sort()
},
reverse(){
this.shuzu.reverse()
},
splice(){
this.shuzu.splice(0,1,this.finish)
},
splice1(){
this.shuzu.splice(1,1)
}
},
computed:{
over(){
console.log("计算属性执行!!")
return this.word.split('').reverse().join('')
}
}
});
</script>
</body>
</html>标签：遍历,vue,06,name,shuzu,v3,2.2,id,属性 来源： https://blog.csdn.net/pingzhuyan/article/details/118353926