介绍
新手程序员一枚,渴望成为大神,来点关注来点赞,给我介绍几个大神也行,球球了。
主要记录自己的学习过程,将之前的笔记进行整理并分享一下,有错误请指出,谢谢各位大佬爷们的观看。
下面开始分享我的笔记
VSCode插件
- Auto Close Tag
- Auto Rename Tag
- Chinese (Simplified) (简体中文) Language
- Code Runner
- Code Spell Checker
- HTML CSS Support
- IntelliJ IDEA Keybindings
- JavaScript (ES6) code snippets
- Live Server
- Mithril Emmet
- open in browser
- Path Intellisense
- Vetur
- Vue
- Vue 3 Snippets
- VueHelper
HTML模板
创建文件模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>%%</title>
<script src="js/vue.js"></script>
</head>
<body>
</body>
</html>
Vue指令
知识点
- {{}}:插值表达式 内容为:变量、三元运算符、函数调用、算术运算
- v-model:在表单元素上创建双向绑定。
- v-bind:为HTML标签绑定属性值、如href、css样式等。
- v-on:为HTML标签绑定事件。
- v-if、v-else-if、v-else:条件渲染某元素。
- v-show:条件展示某元素、切换display的值为none。
- v-for:列表渲染,遍历容器的元素对象的属性。
案例
1.One
div样式
<div id="app">
<!-- v-bind -->
<a v-bind:href="url">链接</a>
<a :href="url">另一个链接</a>
<!-- v-model -->
<input type="text" v-model="massage">
<!-- {{}}操作符 -->
{{massage}}
<!-- v-on -->
<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="另一个按钮" @click="handle()">
</div>
js代码
<script>
//Vue对象
new Vue({
el:"#app",//Vue接管区域
data:{
massage:"hello world",
url:"https://www.baidu.com"
},
methods: {
handle:function(){
alert("点击了一次");
}
}
})
</script>
效果
2.Two
div样式
<div id="appt">
<!-- v-if等展示 -->
年龄<input type="text" v-model="age">判定为:
<span v-if="age >= 0 && age <= 35">年轻人(35以下)</span>
<span v-else-if="age > 35 && age <= 60">中年人(35-60)</span>
<span v-else-if="age > 60 && age <= 200">老年人(60以上)</span>
<span v-else>年龄无效(200以上,0以下)</span>
<br><br>
<!-- v-show 展示 -->
年龄<input type="text" v-model="age">判定为:
<span v-show="age >=0 && age<=35">年轻人(35以下)</span>
<span v-show="age > 35 && age <= 60">中年人(35-60)</span>
<span v-show="age > 60 && age <= 200">老年人(60以上)</span>
<span v-show="age > 200 || age < 0">年龄无效(200以上,0以下)</span>
</div>
js
<script>
//另一个Vue对象
new Vue({
el:"#appt",
data:{
age:20
},
methods:{
}
})
</script>
效果
3.案例
div样式
<div id="appr">
<div v-for="(city, index) in addr">{{index+1}} : {{city}}</div>
</div>
js
<script>
//Vue对象
new Vue({
el:"#appr",
data:{
addr:["北京","上海","杭州","南京","香港","深圳"]
},
methods:{
}
})
</script>
效果
综合案例
描述
综合之前指令,填充表格
div样式
<div id="app">
<div style="margin-bottom: 10px">成绩表</div>
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user, index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-show="user.score >= 90">优秀</span>
<span v-show="user.score >= 60 && user.score < 90">及格</span>
<span style="color: red;" v-show="user.score < 60">不及格</span>
</td>
</tr>
</table>
</div>
js
<script>
//Vue对象
new Vue({
el:"#app",
data:{
users:[
{
name:"Tom",
age:20,
gender:1,
score:78
},{
name:"Rose",
age:21,
gender:2,
score:88
},{
name:"Jay",
age:23,
gender:1,
score:98
},{
name:"Bob",
age:22,
gender:1,
score:48
},{
name:"Tony",
age:36,
gender:1,
score:83
},{
name:"amy",
age:28,
gender:2,
score:97
}
]
},
methods: {
}
})
</script>
效果
Vue生命周期
每触发一个生命周期事件,自动执行一个生命周期方法。
流程图
知识点
-
自动调用生命周期的方法mounted()等方法。
-
主要用于向服务端发送数据。
案例
js
<script>
//Vue 对象
//自动调用生命周期的方法mounted()
//主要用于向服务端发送数据。
new Vue({
el:"#app",
data:{
},
methods: {
},
mounted() {
console.log("Vue 挂载完成,发送请求到服务端")
},
})
</script>
效果
Ajax
-
数据交换:通过Ajax可以向服务器发送请求,并获取 服务器响应的数据
-
异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页。例如搜索的联想功能,用户名是否可用。
Axios
简化Ajax
// Axios 别名
// axios.get(url,[,config])
// axios.delete(url,[,config])
// axios.post(url,[.data[,config]])
// axios.put(url,[,data[,config]])
代码
<body>
<input type="button" value="get" onclick="get()">
<input type="button" value="post" onclick="post()">
<script>
// Axios 别名
// axios.get(url,[,config])
// axios.delete(url,[,config])
// axios.post(url,[.data[,config]])
// axios.put(url,[,data[,config]])
function get(){
//通过axios发送请求
//then 为成功回调函数
axios({
method:"get",
url:"http://www.baidu.com"//这个地址无效
}).then(result=> {
console.log(result.data);
})
//改写
axios.get("http://www.baidu.com").then(result=>{
console.log(result.data);
})
}
function post(){
axios({
method:"post",
url:"http://www.baidu.com",//这个地址无效
data:"id=1"
}).then(result=> {
console.log(result.data);
})
//改写
axios.post("http://www.baidu.com","id=1").then(result=>{
console.log(result.data);
})
}
</script>
</body>
Vue对象获取Axios取得的数据
<script>
//Vue获取Axios请求的数据
new Vue({
el:"#app",
data:{
emps:[] //定义数据类型 通过mounted函数获取数据并存储到emp中
},
methods: {
},
mounted() {
//此处经行Axios请求
axios.get("url").then(result=>{
this.emps = result.data;
})
},
})
</script>
以上是学习的第一弹笔记。 后面会慢慢更新笔记。
项目位置!!!!!
https://gitee.com/zsjnew/admin_web_project.git
标签:axios,入门,url,age,学习,Vue,result,data From: https://blog.csdn.net/m0_61801450/article/details/140147243