前言
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。
特点：
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
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声明周期和钩子函数
（1）什么是vue生命周期?
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
（2）vue生命周期的作用是什么?
Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。
（3）vue生命周期总共有几个阶段?
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。
（4）第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
（5）DOM 渲染在 哪个周期中就已经完成?
DOM 渲染在 mounted 中就已经完成了。
（6）简单描述每个周期具体适合哪些场景?
生命周期钩子的一些使用方法：
beforecreate : 可以在此阶段加loading事件，在加载实例时触发；
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
mounted : 挂载元素，获取到DOM节点；
updated : 如果对数据统一处理，在这里写上相应函数；
beforeDestroy : 可以做一个确认停止事件的确认框；
nextTick : 更新数据后立即操作dom；
2. 插值表达式
**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"
语法：{{ 变量名/对象.属性名 }}
案例：
<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,值为"白大锅" data:{ name:"白大锅" } }); </script> </body> </html>
3.显示数据(v-text和v-html)
概述：
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.
语法：
v-text：<span v-text="msg"></span> <!-- 相当于<span>{{msg}}</span> --> v-html：<span v-html="msg"></span> <!-- 相当于<span>{{msg}}</span> -->
区别：
v-text：把数据当作纯文本显示. v-html：遇到html标签,会正常解析
4.数据双向绑定数据(v-model)
概述：
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.
注意：
- 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
- 文本框/单选按钮/textarea, 绑定的数据是字符串类型
- 单个复选框, 绑定的是boolean类型
- 多个复选框, 绑定的是数组
- select单选对应字符串，多选对应也是数组
4.1.绑定文本框
代码:
<div id="app"> 用户名: <input type="text" v-model="username"/> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ //该属性值和文本框的value属性值,保持一致 username:"" } }); </script>
效果:
4.2.绑定单个复选框
代码:
<div id="app"> <input type="checkbox" v-model="agree">同意<br> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ agree:true } }); </script>
效果:
4.3.绑定多个复选框
代码:
<div id="app"> <input type="checkbox" value="Java" v-model="language">Java<br> <input type="checkbox" value="Python" v-model="language">Python<br> <input type="checkbox" value="Swift" v-model="language">Swift<br> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ //数组中的值,就是被选中的元素的value属性值 language:["Java","Python"] } }); </script>
效果
4.4.form表单数据提交
例子:传json格式跟formData格式的两种情况
<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>
