vue使用

最新推荐文章于 2024-07-11 10:59:33 发布

2301_76898372

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量42

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76898372/article/details/130161658

版权

1.简介

它是一个Javascript框架，作用:简化dom的操作，以及响应式编程

2.快速入门 https://cn.vuejs.org/guide/introduction.html

2.1 在webstrom中创建工程

（1）引入vue.js文件

（2）body创建一个div标签

<body>
<div id="app">

</div>
</body>

（3）创建自己的js代码

<script type="text/javascript">
	var app = new Vue({  //创建一个vue对象
		el:"#app",       //el:"#需要绑定的区域"
		data:{       //数据
			num:0
		},
		methods:{        //方法
			add(){
				this.num++;
			},
			jian(){
				this.num--;
			}
		}
	})
</script>

(4) 常用指令

v-text 只显示文本

v-html 除了文本之外还显示样式

v-on 绑定事件

v-show 样式控制显示与隐藏

v-if 显示与隐藏就是需要的时候创建和不需要时删除

v-bind 设置元素属性

v-for 循环数据

v-model 双向绑定获取元素的值

3. vue结合axios https://www.axios-http.cn/docs/intro

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

axios实现向后端发送请求

<body>
<div id="student">
    <button @click="select">查询学生信息</button>
    <table border="1px">
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>班级</td>
        </tr>
        <tr v-for="a in students">
            <td>{{a.sname}}</td>
            <td>{{a.age}}</td>
            <td>{{a.aclass.cname}}</td>
        </tr>
        </thead>
    </table>
</div>
</body>
<script>
    let app = new Vue({
        el: "#student",
        data: {
            studentVo:{"maxage": 0,
                "minage": 0,
                "sname": ""},
            students:[]
        },
        methods: {
            select() {
                axios.post("http://localhost:8080/student/findAll/1/5/",this.studentVo).then(result => {
                    this.students=result.data.data.records;
                })
            }
        }
    })
</script>