0413. Vue 快速使用【笔记】

一个臻蒸的鰻

已于 2023-04-16 21:43:41 修改

阅读量56

点赞数

文章标签： vue.js 笔记 javascript

于 2023-04-16 21:24:21 首次发布

本文链接：https://blog.csdn.net/sunset981120/article/details/130188156

版权

1.Vue 简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

* 仅以学习Vue 2.X 版本

2.如何使用Vue

1）创建一个HTML项目，并引入Vue.js文件

官网查找到，在项目中引入：

或者可以打开https://cdn.jsdelivr.net/npm/vue@2.7.14网址后，复制全部代码，创建一个Vue.js文件，并粘贴到项目JS文件中：

2）body中创建一个div标签

<div id="app">
  {{ message }}
</div>

3）编写js代码

  <script type="text/javascript">
        //创建一个vue对象
      var app=new Vue({
            //vue对象挂载到id为app的标签上，那么该标签下的所有元素都可以使用vue对象中的成员
            el: "#app",
            //数据
            data:{
                 msg:"Hello Vue!",
            }
      })
  </script>

输入结果：

Hello Vue！

el属性：把当前vue对象挂载到指定的标签元素上，使其vue生效。

3.Vue指令

v-text 和v-html：设置标签的文本值(textContent)

v-on：为元素绑定事件，可以简写为@

v-show 和v-if：根据表达值的真假,切换元素的显示和隐藏

v-bind：设置元素的属性

v-for：循环数据

v-model：获取和设置表单元素的值. input select textarea

4.vue结合axios以及后台代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>查询所有学生信息</title>
    <!--引入vue的js-->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script type="text/javascript" src="./js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<input 
			autofocus="autofocus"
			autocomplete="off"
			placeholder="请输入学生姓名"
			v-model="stuname"
			/>
			<br /><br />
			<button @click="find">查询所有学生信息</button>
			<hr />
			<table width="700"  border="1" cellspacing="0"  cellpadding="2">
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>生日</td>
					<td>年级</td>
					<td>班级老师</td>
				</tr>
				<tr v-for="item in stus">
					<td>{{item.stuname}}</td>
					<td>{{item.gender}}</td>
					<td>{{item.stuage}}</td>
					<td>{{item.tblclass.grade}}</td>
					<td>{{item.tblclass.classteacher}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				stuname:"",
				stuVo:{},
				stus:[],
                URL:"http://localhost:8080/student/list/1/10",
			},
			methods:{
				find(){
					axios.post(this.URL,this.stuVo).then(result=>{
						console.log(result.data.data.records)
						this.stus=result.data.data.records;
					})
				}
			}
		})
	</script>
</html>