位置: IT常识 - 正文
Vue学习之从入门到神经(两万字收藏篇)(vue快速入门)
编辑：rootadminVue学习之从入门到神经(两万字收藏篇) 写在前面
前言
本文链接地址:https://www.jiuchutong.com/zhishi/300228.html
转载请保留说明！
推荐整理分享Vue学习之从入门到神经(两万字收藏篇)(vue快速入门)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue从入门到精通,vue入门教程,vue基础入门,vue入门教程简书,vue入门教程简书,vue入门视频教程,vue从入门到精通教程,vue从入门到实战,内容如对您有帮助，希望把文章链接给更多的朋友！
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家:人工智能学习网站
Vue写在前面前言Vue.js三种安装方式一、 Vue导入二、Vue基本语法1.钩子函数2. 插值表达式3.显示数据(v-text和v-html)4.数据双向绑定数据(v-model)4.1.绑定文本框4.2.绑定单个复选框4.3.绑定多个复选框4.4.form表单数据提交5.事件处理(v-on)5.1.事件绑定(v-on)5.2.事件修饰符6.循环遍历(v-for)6.1.遍历数组6.2.遍历对象6.3.key7.判断语法(v-if和v-show)8.显示数据(v-bind)9.Vue页面跳转(两种方法)9.1.方法一(标签实现)9.1.方法二(this.$router.push()实现)三、Vue其他语法3.1.计算属性3.2.watch监控四、Vue组件4.1.基本使用4.2.父组件向子组件通信4.3.子组件向父组件通信五、axios异步请求5.1 axios概述5.2.Get请求5.3.Post请求5.4.跨域请求六、VueJs Ajax6.1.vue-resource6.2.axios6.2.1.引入axios6.2.2.get请求6.2.3.post请求七、综合案例7.1.需求7.2. 数据库设计与表结构7.3.服务器端7.3.1.配置文件7.3.2.Controller7.3.3.Dao7.4.客户端7.4.1.user.html页面7.4.2.user.js前言
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。
特点：
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
Vue.js三种安装方式此处引荐下大佬的文章 讲的非常详细 Vue.js三种方式安装
一、 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><script type="text/javascript"> //创建一个Vue对象 var app = new Vue({ //指定,该对象代表<div id="app">,也就是说,这个div中的所有内容,都被当前的app对象管理 el: "#app", //定义vue中的数据 data: { name: "" } });</script>二、Vue基本语法1.钩子函数**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法
语法：
<script type="text/javascript"> var app = new Vue({ el:"#app", //钩子函数created,该方法在页面显示之后,自动执行 created() { console.log("created..."); } });</script>补充：Vue
下一篇：react-router6.4+的项目种路由实现方式（列举两种）
