Vue基础
一、概述
VUE 是前端JS的框架。
1.库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求 （jquery） 2.框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目
二、vue核心特征
① 解耦视图与数据 ② M-V-VM模型 关注模型和视图 M：即Model，模型，包括数据和一些基本操作。 V：即View，视图，页面渲染结果 VM：即View-Model，模型和视图间的双向操作 ③ 双向数据绑定
三、Vue入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>{{name}}，欢迎你！</h2> </div> <!-- 引入在线的vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script type="text/javascript"> //生成一个Vue实例 var app = new Vue({ el:"#app",// el ,即是element。要渲染的页面元素 data:{// 数据 name:"火星辉" } }) </script> </body> </html> Vue使用流程： 1. body中,设置Vue管理的视图<div id="app"></div> 2. 引入vue.js 3. 实例化Vue对象 new Vue(); 4. 设置Vue实例的选项:如el、data... new Vue({选项:值}); 5. 在<div id='app'></div>中通过{{ }}使用data中的数据
四、常见指令【v- 前缀】
使用前需要先引入Vue.js
（一）
v-text和v-html类似innerText和innerHTML ① v-text：更新标签中的内容 ② v-html：更新标签中的内容/标签 <!-- v-text 不识别html文本只能原样输出,直接覆盖原本标签的内容 v-html 能识别html文本,直接覆盖原本标签的内容 -->（二）
v-if和v-show根据表达式的boolean值进行判断是否渲染该元素 v-if：注释内容 v-show：改变display属性（三）
v-on① 作用：使用 v-on 指令绑定事件 ② 语法： v-on:事件名 = "methods中的方法名"; v-on的简写方法: @事件名 = "methods中的方法名";（四）
v-for① 作用：列表渲染,当遇到相似的标签结构时,就用v-for去渲染 ② 格式： (item,index) in 数组或集合 参数： item:数组中的每个元素 index:数组中元素的下标（五）
v-bind① 作用: 可以绑定标签上的任何属性 ② 格式：v-bind:属性="值" ③ 简写格式：:属性="值" ④ 属性值一部分进行替换的格式：:属性="'常量值' + vue对象data中的数据"（六）
v-model① 作用：表单元素的绑定 ② 特点：双向数据绑定 （1）vue对象中的数据发生变化可以更新到界面 （2）通过界面可以更改vue对象中数据 （3）v-model 会忽略所有表单元素的 value、 checked 、 selected 特性的初始值而总是将 Vue 实 例的数据作为数据来源。应该在data选项中声明初始值。（七）计算属性
计算属性可以时刻关注在vue中定义的关联的变量。 当这些关联的变量值发生变化，计算属性也会发生变化. 语法： let app = new Vue({ el:'#app', data:{ num1:0, num2:0 }, computed:{ // 计算表达式； sum(){ return this.num1*1 + this.num2*1; } } });
五、Vue的生命周期
英文版：
中文版：
六、Vue的Ajax(axios)
使用前先引入axios.js1、get请求
axios.get('/user?id=123').then(response => { console.log(response.data); });2、post请求
axios.post('/user', "name=火星辉&age=22") .then(response => { console.log(response.data); });
七、跨域问题
1、问题
什么是跨域？ 指的是浏览器不能执行其他网站的脚本。是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 同源策略： 是指协议、域名、端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 跨域问题怎么出现的？ 开发一些前后端分离的项目时，比如使用 Servlet + Vue 开发时，后台代码在一台服务器上启动，前台代码在另外一台电脑上启动，此时就会出现问题。 如： 后台 地址为 http://192.168.70.77:8081 前台 地址为 http://192.168.70.88:8080 此时 ip 与 端口号不一致， 不符合同源策略，造成跨域问题。2、解决思路【后台】：自定义过滤器
package com.mars.filter; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebFilter("/*") public class CorsFilter implements Filter { @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) servletResponse; HttpServletRequest request = (HttpServletRequest) servletRequest; // 不使用*，自动适配跨域域名，避免携带Cookie时失效 String origin = request.getHeader("Origin"); response.setHeader("Access-Control-Allow-Origin", origin); // 自适应所有自定义头 String headers = request.getHeader("Access-Control-Request-Headers"); response.setHeader("Access-Control-Allow-Headers", headers); response.setHeader("Access-Control-Expose-Headers", headers); // 允许跨域的请求方法类型 response.setHeader("Access-Control-Allow-Methods", "*"); // 预检命令（OPTIONS）缓存时间，单位：秒 response.setHeader("Access-Control-Max-Age", "3600"); // 明确许可客户端发送Cookie，不允许删除字段即可 response.setHeader("Access-Control-Allow-Credentials", "true"); // 放行 filterChain.doFilter(request, response); } @Override public void destroy() { } } //发送Cookie，不允许删除字段即可 response.setHeader("Access-Control-Allow-Credentials", "true"); // 放行 filterChain.doFilter(request, response); } @Override public void destroy() { } }
八、总结
let app = new Vue({
el: 渲染的页面原色，
data: 数据，
methods: 方法，
computed: 计算属性，定义和方法一样，调用和属性一样
})
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
