VUE新手1

我做饭超级好吃

已于 2024-07-03 09:01:36 修改

阅读量381

点赞数 3

文章标签： vue.js

于 2024-07-02 13:56:02 首次发布

本文链接：https://blog.csdn.net/weixin_74929756/article/details/140124119

版权

前言

概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：

Vue通过MVVM模式,能够实现视图与模型的双向绑定。

简单

Vue导入

概述：Vue是一个类似于Jquery的一个JS框架，所以，如果想使用Vue，则在当前页面导入Vue.js文件即可。

语法：

来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="node_modules/vue/dist/vue.js"></script>
案例

<div id="app">
<h1>用户名:<input type="text" v-model="name"/></h1> <br/>
<h1>您输入的用户名是: {{name}}</h1>
</div>

Vue基本语法

钩子函数

Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue插值表达式</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>111-->{{ name }}</h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue({
//让vue接管div标签
el:"#app",
//定义数据,里边包含一个属性name,值为"222"
data:{
name:"222"
}
});
</script>
</body>
</html>

显示数据

v-text和v-html专门用来展示数据, 其作用和插值表达式类似。

语法

v-text：<span v-text="msg"></span> 
v-html：<span v-html="msg"></span>

绑定文本框

<div id="app">
用户名: <input type="text" v-model="username"/>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
//该属性值和文本框的value属性值,保持一致
username:""
}
});
</script>

绑定单个复选框

<div id="app">
<input type="checkbox" v-model="agree">同意<br>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
agree:true
}
});
</script>

绑定多个复选框

<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br>
<input type="checkbox" value="Python" v-model="language">Python<br>
<input type="checkbox" value="Swift" v-model="language">Swift<br>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
//数组中的值,就是被选中的元素的value属性值
language:["Java","Python"]
}
});
</script>

form表单数据提交

<template>
<div class="from_box">
<form action="">
<input type="text" placeholder="请输入昵称" v-model="formMess.account">
<input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
<input type="text" placeholder="请输入手机号" v-model="formMess.phone">
</form>
<span class="but" @click="onSubmit()">提交</span>
</div>
</template>

<script>
import axios from 'axios';

export default {
name: "from",
data() {
return {
   formMess:{
   "account":"",
   "act_pwd":"",
   "phone":""
   }
};
},
methods: {
onSubmit() {
/* json格式提交： */
// let formData = JSON.stringify(this.formMess);

/* formData格式提交： */
let formData = new FormData();
for(var key in this.formMess){
formData.append(key,this.formMess[key]);
}

axios({
   method:"post",
   url:"xxxxxxx",
   headers: {
       "Content-Type": "multipart/form-data"
   },
   withCredentials:true,
   data:formData
   }).then((res)=>{
console.log(res);
});
}
}
};
</script>


<style scoped lang="less">
.from_box{
form{
width:90%;
margin: auto;
border:.01rem solid gray;
display: flex;
flex-wrap: wrap;
input{
width:80%;
height:.5rem;
margin-bottom: .2rem;
border:.01rem solid black;
height:.5rem;
}
}
.but{
font-size: .14rem;
margin-left:5%;
}
}
</style>

事件绑定

<button v-on:事件名="函数名/vue表达式">点我</button>

<button @事件名="函数名/vue表达式">点我</button>

遍历数组

v-for="item in items"
v-for="(item,index) in items"

items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。
<div id="app">
   <ul>
<li v-for="(user, index) in users">
   {{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
</li>
   </ul>
</div>
<script>
var app = new Vue({
el:"#app",//el即element，要渲染的页面元素
data: {
users:[
{"name":"白卓冉","age":8,"gender":"男"},
{"name":"白大锅","age":12,"gender":"女"},
{"name":"白仙女","age":4,"gender":"男"}
]
}
});
</script>

遍历对象

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
value，对象的值
key，对象的键
index, 索引，从0开始
<div id="app">
   <ul>
<li v-for="(value,key,index) in person">
   {{index}}--{{key}}--{{value}}
</li>
   </ul>
</div>
<script>
var app = new Vue({
el:"#app",//el即element，要渲染的页面元素
data: {
person:{"name":"白大锅", "age":3, "address":"中国"}
}
});
</script>