2022-08-27 第四小组 王星苹 学习心得
作者：互联网
学习心得
今天主要学习了在html里面用Vue库，也是一个js文件，这个也是相当于写好的东西可以直接用。Vue.js的核心是一个采用简洁的模板语法来声明式地将数据渲染进DOM的系统。实现了双向数据绑定。Vue.js可以进行组件化开发，是代码编写量大大减少。
应用场景：
1.Web开发
2.移动端开发
3.跨平台应用开发
心情
今日心情还可以，感觉需要记的东西虽然多，但是都和一点学过的有相似之处。
掌握情况：还行一小般
学习总结
Vue.js是通过虚拟DOM来减少对DOM的直接操作
v-bind是用来绑定DOM属性的指令
v-model是Vue中实现数据双向绑定
v-for指令基于一个数组来渲染一个列表，需要item in items形式的特殊语法，其中items是源数据数组，而item则是迭代的数组元素的别名。也可以用它来遍历一个对象的property。
v-for在使用的时候最好添加key，且key最好不是索引。
@ ，v-on都属于Vue绑定事件的指令
v-on:click能够实现页面单击事件绑定
v-if ,v-else ,v-show ,可以实现条件判断。v-bind不可以
模型层定义了person变量内容为{name:"jack",sex:"male"},用<p>{{person.name}}<p>可以输出。
模型层定义了address变量，输出页面<p v-html = "{{address}}"><p>
在Vue实例中用methods定义方法
Model和View改变任意一个，另一个也改变
Vue是一套构建用户界面的渐进式框架（MVVM），能进行数据的双向绑定，.Vue采用自底向上增量的开发的设计。不仅仅为简单的单页应用程序提供驱动，复杂的也可以。
htmlcss--->javascript--->JQuery---->vue,react,angular
一个JavaScript库
vue也可以说是JavaScript框架。
尤雨溪
Vue2
Vue3
<div id="app">
插值表达式
<h1>{{msg}}</h1>
</div>
<script src="js/vue.js"></script>
<script>
// 1.创建一个vue实例
const app = new Vue({
// el用来给Vue实例一个作用域
el: "#app",
data: {
// 用来给Vue定义一些相关的数据
msg: "欢迎使用Vue",
},
});
v-for写在哪个标签中
遍历几个写几个。
面试题：99.99999999%
v-if直接操作DOM元素，底层
v-show是通过css控制DOM元素
<body>
<div id="app">
<h1 v-if="false">欢迎光临</h1>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg:"hello Vue",
},
});
</script>
</body
Vue:
-----vue-----：
注意事项：
- 1、注意vue实例的作用域
- 2、事件绑定（v-on:click）和属性绑定（v-bind:src）
- 3、v-if和v-show区别*****
- 4、双向绑定 应用在表单元素上
- 5、双向绑定在不同的表单元素上的用法 radio checkbox select
- 6、双大括号，Vue的属性或事件用Vue自己的数据，不需要写双大括号。 其他地方，必须写双大括号
- 7、vue的解析过程，最终展现出来的HTML页面，是没有vue的语法的
自己理解的写法
下面这个起的名字，一般是上面某个标签里的id属性
先const 名字 = new Vue（{
el:"#名字"
名字data:{
名字1:"",
名字2,
},
methods:{
方法名1(){
......
},
方法名2(){
......
},
});
步骤就是把各种方法写在一个methods里。
data和methods里面都是 : ,
在html里面数组的一些方法名字:
let arr = [5,2,-1];
在数组的末尾追加
arr.push(4);
删除数组的末尾的元素
arr.pop(2);
从指定位置删除指定个数个元素
arr.splice(1,1);
修改
arr[1] = -1;
反转
arr.reverse();
从小到大排序
arr.sort();
查找
console.log(arr.find());
包含
console.log(arr.includes(0));
console.lo
<body>
<div id="app">
<input type="text" v-model="msg">
<button @click="add()">添加</button>
<ul>
<li v-for="(item,index) in lists">
{{item}}
<a href="#" @click="del(index)">删除</a>
</li>
</ul>
<span>总数量：{{lists.length}}条</span><button @click="cler">删除所有</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
lists:["第一次记事","汪峰发新专辑"],
msg:''
},
methods: {
add() {
/*
把我们文本框输入的内容
msg
追加到数组里
*/
this.lists.push(this.msg);
this.msg = '';
},
cler() {
this.lists = [];
},
del(index) {
this.lists.splice(index,1);
}
},
});
</script>
</body>
1、追加
2、注意文本框要清空
3、删除除了删除记录，还要修改总记录数
4、删除所有，所有记录删除，总记录数归0
练习题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生录入系统</title>
<style>
#app {
/*position: absolute;*/
margin-left: 100px;
margin-top: 100px;
border: 2px solid gold;
}
table {
width: 825px;
text-align: center;
border: 1px solid rgb(240, 117, 10);
background-color: rgb(19, 242, 49);
}
</style>
</head>
<body>
<div id="app">
<div style="width: 600px;">
<legend>学生信息录入系统</legend>
<div>姓名：<input type="text" placeholder="请输入姓名" v-model="user.name" /></div> <!-- v-model 双向绑定数据 -->
<br />
<div>年龄：<input type="text" v-model="user.age" /></div>
<br />
<div>性别: <select v-model="user.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<br />
<div>手机：<input type="text" placeholder="请输入电话号" v-model="user.phoneNumber" /></div>
<br />
<button type="submit" @click="newUser">创建新用户</button>
</div>
<br />
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
<tr v-for="item in users">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
<td>{{item.phoneNumber}}</td>
<td><button @click="del(index)">删除</button></td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
user: {
name: "",
sex: "",
age: "",
phoneNumber: ""
},
users: [
{ name: '灰原哀', age: 20, sex: '女', phone: '19988884869' },
{ name: '工藤新一', age: 22, sex: '男', phone: '15900001111' },
]
},
methods: {
newUser: function () {
if (this.user.name == "") {
alert("名字错误");
} else if (this.user.age == "" || this.user.age < 0) {
alert("年龄错误");
} else {
this.users.push({ name: this.user.name, sex: this.user.sex, age: this.user.age, phoneNumber: this.user.phoneNumber })
}
},
del: function (index) {
this.users.splice(index, 1);
},
}
});
</script>
</html>
标签：arr,27,name,08,绑定,age,Vue,2022,app 来源： https://www.cnblogs.com/wxp0909/p/16631781.html