Vue 基础

怼烎@ 2022-12-04 08:36 31阅读 0赞

Vue ref获取dom元素  
给要获取元素的标签加ref属性 例：ref=”refs ” 获取this.$refs.refs .innerhtml

键盘事件

其他组件需要加 .native@keyup.enter这里必须加上 .native 才能生效.
    @keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
    获取按键的键码 e.keyCode
    @keyup.13     按回车键
    @keyup.enter 回车
    @keyup.up    上键
    @keyup.down  下键
    @keyup.left     左键
    @keyup.right    右键
    @keyup.delete    删除键

v-bind:

专门绑定元素的属性值变量

v-show

控制一个元素的显示隐藏 v-show=”条件表达式 ” 条件表达式执行结果为true 元素显示，反之 自动替换display

v-if v-else

控制两个元素的显示隐藏、 v-if=“判断条件”v-if=“ islong==true” islong变量 <元素1 v-if=“判断条件”><元素2 v-else>

v-if v-else-if

控制多个元素的显示隐藏,< v-if=“判断条件1”> < v-if=“判断条件2”> ...v-else

$event vue

自动创建的事件对象

v-cloak

在未加载出元素时隐藏{
       {}},需要设置style属性为display:none;

v-text

如果只隐藏内容使用，优先使用v-text不用{
       {}}

v-once

只在页面加载时，自动绑定一次。原理：只会扫描和替换一次虚拟DMO

v-pre

刚好内容中有{
       {}}不想被替换

v-model

双向绑定：

即能从M-V,又能V-M 只要绑定表单元素的值时，都用双向绑定，只有表单用户可修改

Vue中的v-model绑定单选按钮和复选框下拉列表是需绑定在chacked上，不可绑定在value上

watch:\{ \}

监视函授 监视data中的变量变化

Style

单次控制元素CSS的值时用style 可为字符串格式数据，也可以对象数据 上下左右四键 37(左)38(上)39(右)40(下) 两个style可以共存

Clss

操作多个样式用class 1.将整个class作为一个大的字符串绑定 2.将class属性看做一个对象结构来绑定 data：{bianl：{class1：true/false class2：true/fals...}}

vue.directive(“指令名”,{
    Inserted(domElem){
    对domElem执行常用的dom操作
    }
    }) 自定义direction (指令) 使用自定义指令和使用官方指令是一样的 v-指令名
    Watch 监视函数：只要变量变化时需要执行操作元素就用watch

Methods 函数  
Computed 计算属性：不实际保存属性值，仅通过其他属性计算获得 需return 用法和data变量一样  
1.创建Vue.filter(“过滤器名”,function(原始值1，…)\{ return 处理后的值 \})过滤器是对原始类型的值进行加工在显示 2.使用：在绑定语法中\{ \{原始值 | 过滤器名(实参值)\}\} 过滤器可以添加实参值，多个过滤器可以同时使用,使用时|线连接\{ \{原始值 | 过滤器名(实参值) | 过滤器名(实参值) | …\}\} 多个过滤器拿到的值是前一个过滤器处理过的中间产物  
测试post请求可以用postman  
Axios ↓ 专门发送ajax请求的函数库  
如何：  
发送get请求：  
axios.get(服务器接口地址,\{param\{ 参数：值 ,… …\}\}).then(result=>\{ return.data 才是服务器返回的结果\})  
发送post请求 需要装换工具querystring(可以拼接字符串)  
axios.get(服务器接口地址, Qs.stringify(\{ 变量1:值1.变量2:值2… \})\}).then(result=>\{ result.data 才是服务器返回的结果\})  
使用QS  
1/npm install qs  
如何配置axios的地址  
在main下面配置地址 axios.defaults.baseURL=“http://localhost:5050”; 配置之后this.axios.get（）里面的url可以省略配置过的地址，只写相对地址、  
配置 axiosnpm install axios  
1 引入axios库  
import axios from “axios”  
2 设置属性发送ajax请求时保存session信息  
axios.defaults.withCredentials=true  
3 设置ajax请求基础路径  
axios.defaults.baseURL=“http://localhost:5050/”;  
4 将axios注册vue实例  
Vue.prototype.axios=axios

组件（component）↓  
创建：Vue.component(“组件名”,\{ template（模板）代替了el ，tempate后写html片段，需用一个父元素包裹，使用模板字符串，data不能直接用\{\}了 data变成了函数data（）\{ return\{n:0\}\} 其他new vue 中能写什么，组件中就可以写什么 \})  
1.根组件 new Vue()  
2.全局组件 Vue.component()  
3.子组件 创建：var 子组件名称（驼峰格式）( … ) 父组件添加components:\{子组件名称1 , 子组件名称2\} 把全局降级为变量 html中使用时驼峰格式的子组件名称会自动翻译为…-…  
组件间传参  
父给子传参：1、全局引入注册子组件 2、子组件使用使用冒号绑定props:\[ \]里面数据3、父组件使用冒号绑定子需要的数据并定义方法或数据  
插槽：1、子组件定义插槽，并起名称name2、父组件使用template 发送 \{ \{ 吃饭 就是task\}\} template写入标签直接，不是属性  
子给父传参：两步1、父组件需要在子组件引用的子组件上添加一个自定义事件，并绑定父组件中的处理函数2、子组件需要 通过KaTeX parse error: Expected 'EOF', got '\#' at position 532: …uter-link会自动翻译陈\#̲/相对路径 也是a标签 Js路…router.push(“/相对路径”)  
路由传参：  
三步：1、接收参数的页面的路由字典中就要配置参数 /：lid参数 props:true 让url自动成为props的自定义属性  
var routes\[\{path:”/index/：lid”,component:index,props:true\}，\{path:”/*”,component\{template:`html404`\}\}\]  
2、组件界面，组件props:\[“lid”\]  
3、跳转页面更改文本 /1没有问号，没有冒号  
脚手架vue/cli  
两步：  
1、安装生成脚手架的工具：npm i -g @vue/cli  
2、用脚手架生成工具为本次项目生成一套脚手架结构代码Vue create xzvue xzvue项目名称  
3、运行 cd进入当前文件夹 npm run serve  
可选结构  
1、Manually select features  
2、Babel 将所有新版的js代码翻译为旧版也支持  
3、Router  
4、Vuex  
5、(*) Linter / Formatter 严格模式  
6、Use history mode for router? 是否使用history 模式路由中 就是Vue中的\#号，可选 N  
7、In package.json  
8、Save this as a preset for future projects? (y/N) N

脚手架的项目结构：  
Config：index.js  dev.env.js   prod.env.js三个文件，其中index.js是用来配置开发模式和打包模式下相关配置类文件的，如访问路径、静态资源路径、开发模式端口号等等。dev.env.js就是开发模式下特定的一些配置参数可以在此文件中进行定义。prod.env.js：生产模式下相关自定义的一些参数可以在此进行配置  
Public：不需要编译和打包的文件 包括1、唯一的index.html页面 2、图片3、第三方下载的已经压缩过的通用的库.min.js代表已经压缩过了4、在唯一完整的index引入公共的库  
Src：一切自己编译的内容都要放在src文件夹中  
页面组件都要放在views  
全局组件/子组件都要放在components下  
自己编写的css和js库都要放在assets下 全局使用比如base.css自己编写的通用样式  
main.js 相当于new Vue(\{\})  
router.js 路由字典和路由器 引入组件import，给地址  
App.vue 相当于 <div id=”app ”>  
1、一个.vue文件相当于就是一个组件，要创建几个组件就要添加几个vue文件  
2、每个vue文件中都包含3样东西html、组件对象的js、css。 html片段必须写在template标签内，有唯一父标签；组件对象的js放在一个匿名对象中\{除了没有template外，其他和vue.comonent一样\}  
export default\{\}可以抛出模块，任何想使用这个组件的地方，都要用import 变量 from “路径/组件.vue”css需要写在style标签内 或者@inpur（url）引用 为了防止样式冲突使用scoped  
created()\{ axios.get（“url”）.then() \} 当这个组件自动创建后，自动执行，类似lood  
脚手架使用axios 安装npm i -save axios 放在main.js中 因为main是原型对象，可以是全部的组件访问到 import引入 vue.prototype.axios=axios prototype原型对象 组件调用this.axios  
启动服务端 node app.js  
生命周期  
四个阶段 创建 挂载 更新 销毁  
创建creat：仅创建了new Vue（）或组件对象，同时创建了组件对象中的data对象  
使用：前:beforeCreat() 后：creatd() 比如可做this.axios.get  
挂载mount：开始扫描dom树，形成虚拟dom树，并首次替换绑定内容为data中的变量值  
使用：前:beforeMount() 后：mountd() 可做dom操作  
更新update：在任何位置修改了data中的变量值，都会触发更新阶段  
使用：前:beforeUpdate() 后：updated()  
销毁destroy：只在调用KaTeX parse error: Expected '\}', got 'EOF' at end of input: …:23 示例:获取age \{ \{ store.getters.函数\}\}  
示例:修改age  
this. s t o r e . c o m m i t ( " 函 数 名 称 " , 参 数 ) 函 数 名 称 是 m u t a t i o n s 里 面 的 函 数 参 数 可 写 可 不 写 示 例 : 修 改 a g e t h i s . store.commit("函数名称",参数) 函数名称是mutations里面的函数 参数可写可不写 示例:修改age this. store.commit("函数名称",参数)函数名称是mutations里面的函数参数可写可不写示例:修改agethis.store.dispath(“函数名称”)

打包  
npm run build 会打成一个html 启动命令 npm run serve

VUE main引入全局的子组件  
import MyHeader from ‘./components/MyHeader’  
Vue.component(“my-header”,MyHeader); “子组件名字”，子组件对象  
在组件页面使用  
在使用子组件的父组件引用1 2步骤不变注册:components:\{“my-header”:MyHeader\};

Vue.ui 组件库mint-ui  
为什么要使用组件库来开发我们的项目，因为可以提高开发效率  
mint-ui使用的方法 下载npm i mint-ui -S i install安装 -s保存 -g 全局  
使用：main.js负责引入和配置所有的第三方模板 因main.js是new vue 全局的  
1、引入组件库（按需引入/完整引入） import MintUI from ‘mint-ui’  
2、引入单个组件库样式文件 import ‘mint-ui/lib/style.css’  
3、注册 Vue.use(MintUI)  
4、挑选组件库中的组件添加到自定义组件  
使用组件库 Toast  
功能：显示一个短消息提示框。作用提示 基本语法js this.$toast(\{message:”提示文字”\})  
脚手架目录结构二  
node\_modules 第三方的模块(库) axios vant  
Package.json 启动脚手架和打包项目命令放在Package.json 修改端口–port 5050 修改地址–host 172.0.0.1 写在serve里面

如果组件没有提供当前组件的事件  
绑定方法 <mt-tab-item @click.native=”chage ”> @click.native绑定原生事件  
修改组件样式  
清除所有内外边距  
下载通用样式文件  
normalize.css 清除浏览器所有的样式 并且将文件加载到public/index.html中

请求方式  
Get 客户端想获取服务器数据  
Post 客户端想发数据给服务器  
Put 客户端想更新服务器中数据  
Head 客户端想获取服务器数据，只需要响应头不响应主体  
Delece 客户端想删除服务器山的数据  
Trace 追踪路径  
Options 备选项  
Connect 测试连接

登录 session 重点  
session 应该在所有请求之前  
请求方式：get 请求路径：/login  
Session可以解决服务器端会很快忘记用户是否登录，session可以保留登录成功的id  
Session（会话）  
1、会话开始 打开网页的第一个页面  
2、会话中 中间用户打开此网站的多个页面  
3、会话结束 用户关闭浏览器  
Session 对象是服务器端用来保存此处会话中用户专用数据（id=1）的对象  
用来保存登录用户的id 或者用户的权限  
服务器app.js  
(1)下载第三方模块 express-session  
(2)  
server.use(session(\{  
secret:“128位字符串”, //\#安全字符串  
resave:true, //\#每次请求保存数据  
saveUninitialized:true //\#保存初始化数据  
\}));

客户端(脚手架)  
(1)配置请求时保存session信息  
axios.defaults.withCredentials=true

常见错误：  
Network Error 网络错误 代表服务器已经停止工作了

Vue组件跳转  
this.$route.push(’/product’); /product跳转的组件

获取按钮数据  
用自定义属性 :data-ild… 获取所有的自定义属性dataset.ild :data-lid=“item.lid”