1. Remember to import
<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<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>
1. Interpolation expression { {}}
<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>我最喜欢的人是：{
{ name }}</h1>
</div>
<script type="text/javascript">
//创建vue对象
var app = new Vue({
//让vue接管div标签
el:"#app",
//定义name值为"刘雨昕"，用于在div中引用
data:{
name:"刘雨昕"
}
});
</script>
</body>
</html>
2. v-text and v-html
v-text：<span v-text="msg"></span> <!-- 相当于<span>{
{msg}}</span> -->
v-html：<span v-html="msg"></span> <!-- 相当于<span>{
{msg}}</span> -->
v-text: Display the data as plain text.
v-html: When encountering html tags, it will be parsed normally
3. The principle of v-model
The most detailed explanation of v-model in the whole network_zayyo's Blog-CSDN Blog
The official said that the principle of v-model is actually that there are two operations behind it:
- v-bind binds the value of the value attribute;
- v-on binds the input event to the function, and the function will get the latest value and assign it to the bound property;
<div class="demo">
<textarea v-model="article" cols="30" rows="10"> </textarea>
<h2>article当前的值是：{
{ article }}</h2>
</div>
<script type="text/javascript">
export default {
name: 'demo',
data() {
return {
article: "a"
}
}
}
</script>Run the code When the content entered by the user in the textarea tag is renamed, the {{article}} in the corresponding h1 tag will also change in the same way.
<input type="checkbox" v-model="sport" value="篮球" />篮球
<input type="checkbox" v-model="sport" value="足球" />足球
<input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球
<input type="checkbox" v-model="sport" value="兵乓球" />兵乓球
您的爱好有：{
{ sport }}
<script type="text/javascript">
export default {
name: 'demo',
data() {
return {
message: "内容",
sex: '',
// 当要 默认选中时要填入值即可 例：sex='男'
// agree: false,
sport: [],
// fruits: '',
// fruits2: [],
// hobbies: [],
// origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"],
// age: 0,
// name: ''
}
}
}
</script>
form submit data
<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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>