Vue、ElementUI 妖狐艹你老母 2023-10-02 21:41 43阅读 0赞 ## 1.什么是MVVM? ## MVVM是Model-View-ViewModel的简写,将View中的状态和行为抽象化. ViewModel在取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的 业务逻辑. ### 2.什么是VUE? ### Vue就是一套用于构建用户界面的渐进式框架,与其他框架不同的是,Vue被设计为可以自底向上逐渐应用.Vue的核心库只关注图层,不仅容易上手,还便于与第三方库或既有项目整合. ### 3.Vue的优点 ### * 体积小 * 高效率 * 双向数据绑定,简化Dom操作 * 生态丰富,学习成本低 ### 4.第一个Vue程序 ### 1. 导入开发版本的Vue.js 2. 创建Vue实例对象,设置el属性和data属性 3. 使用简洁的模板语法把数据渲染到页面上 <div id="app">{ {message}}<div/> var app=new Vue({ el:"#app", data:{ message:"Hello Vue!" } }) 代码解析: \{ \{变量\}\}模板语法,插值表达式获取数据 new Vue();创建一个Vue对象(VM对象) el:数据挂载的dom对象 * Vue会管理el选项命中的元素及其内部的后代元素 * 可以使用其他的选择器,但是建议使用ID选择器 * 可以使用其他的闭合标签,不能使用HTML和BODY data:\{message:"hello world"\} model数据 * Vue中用到的数据定义在data中 * data中可以写复杂类型的数据,如对象,数组 ### 5.Vue指令 ### <table> <thead> <tr> <th>v-text</th> <th>作用是设置标签的文本内容,默认写法会替换全部内容,使用差值表达式可以提高指定内容</th> <th><p v-text="message+1">恸情</p> <p>{ {message+1}}恸情</p></th> </tr> </thead> <tbody> <tr> <td>v-html</td> <td>作用是设置元素的innerHTML,内容中有html结构会被解析为标签</td> <td><p v-html="message+1">非凡英才</p></td> </tr> <tr> <td>v-on</td> <td>作用是元素绑定事件,事件名不需要写on指令可以写成@,绑定的方法定义在methods属性中,可以传入自定义参数</td> <td><input type="button" value="按钮" v-on:click="test(1,2)" /> <input type="button" value="按钮" @click="test" /> methods:{ test(a,b){ alert(a); } }</td> </tr> <tr> <td>v-model</td> <td>作用的便捷的设置和获取表单元素的值,绑定的数据会和表单的数据值相关联,绑定的数据<--->表单元素的值 双向的数据绑定</td> <td><input type="text" v-model="message"/> <p>{ {message}}</p> data:{ message:"" }</td> </tr> <tr> <td>v- show</td> <td>作用是根据真假切换元素的显示状态,原理是修改元素的display,实现显示隐藏指令后面的内容,最终都会解释为布尔值为true元素显示,值为false元素隐藏,数据改变之后,对应元素的显示状态会同步更新</td> <td>data:{ isShow:true, age:20 }</td> </tr> <tr> <td>v-if</td> <td>作用是根据表达式的真假切换元素的显示状态,本质通过操作dom元素来切换,显示状态表达式的值为true,元素存在于dom中,为false,从dom中移出.</td> <td></td> </tr> <tr> <td>v-bind</td> <td>作用是为元素绑定数据属性,完整写法是v-bind:属性名(:属性名)</td> <td><img v-bind:src="imgSrc" /> <img :src="imgSrc" /> <img :title="imgTitle" :src="imgSrc" /> data:{ imgSrc:'img/3.jpg' imgTitle:"这是一张图片" }</td> </tr> <tr> <td>v-for</td> <td>作用是根据数据生成列表结构,数据经常和v-for结合,使用语法是(item,index)in 数据,item和index可以结合其他指令一起使用,数据长度的更新会同步到页面上是响应式的,为循环绑定一个key值,尽可能唯一</td> <td><li v-for="item in array"> { {item}}省 </li> <li v-for="(item,index) in array"> { {index+1}}{ {item}}省 </li> <li v-for="(item,index) in objects"> { {index+1}}{ {item.name}}{ {item.age}} </li> data:{ array:['陕西','山西','河南'], objects:[ {name:'admin',age:23}, {name:'jim',age:22} ] }</td> </tr> </tbody> </table> ### 6.Vue实例生命周期 ### 每个Vue实例在被创建时都要经过一系列的初始化过程,例如,需要设置数据监听、编译模板，将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会 beforeCreate: function () { console.log('beforeCreatea ’); }, created: function () { console.log('createda ' ); }, beforeMount:function(){ console.log('beforeMounta’); }, mounted:function(){ console.log('mounteda’); } ### 7.vue-cli搭建项目 ### vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建一个Maven项目时可以选择一个创建一个骨架结构，这个骨架结构就是脚手架，我们的开发更加的快速； #### 1.主要功能 #### * 统一的目录结构 * 本地调试 * 热部署 * 单元测试 * 集成打包上线 #### 2.需要的环境 #### **Node.js**:简单的说Node.js就是运行在服务端的JavaScript。如果熟悉JavaScript，那么你将会很容易的学会Node.js。 Node.js是一个基于Chrome JavaScript运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行的JavaScript的速度非常快，性能非常好。 #### 3.npm #### npm是Node.js的包管理工具，用来安装各种Node.js的扩展。npm是JavaScript的包管理工具，也是世界上最大的软件注册表。有超过60万个JavaScript代码包可供下载，每周下载月30亿次。npm让JavaScript开发人员可以轻松地使用其他开发人员共享的代码。 1.组件路由 vue router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。 1.安装 vue-router是一个插件包，所以我们还是需要用npm来进行安装。 打开命令行工具，进行你的项目目录，输入下面命令。 npm i vue-router@3.5.3 搭建步骤: 1. 创建 router 目录 创建 index.js 文件,在其中配置路由 import Vue from 'vue'; import router from 'vue-router'; /* 导入路由 */ import login from '../views/login'; /* 导入其他组件 */ import content from '../components/content'; /* 导入其他组件 */ Vue.use(router) /* 定义组件路由 */ var rout = new router({ routes: [ { path: '/index', name: 'index', component: index }, { path: '/content', component: content } ] }); //导出路由对象 export default rout; 2.使用路由 <router-link to="/index">首页</router-link> <router-link to="/content">内容</router-link> <router-view/> 3.在main.js中配置路由 import router from './router/index.js' Vue.use(router); new Vue({ el: '#app', router, render: h => h(App) }) 4.路由导航守卫 为路由对象，添加 beforeBach 导航守卫 to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数 rout.beforeEach((to,from,next)=>{ if(to.path=='/login'){如果用户访问的登录页，直接放行 return next(); }else{ var token = window.sessionStorage.getItem("token"); if(token==null){ return next("/login"); }else{ next(); } } }) 5.路由嵌套 { path: '/main', component: Main, //路由嵌套 在 main 下面的嵌套子路由 children:[ { path:"/admin", component:Admin } ] 6.路由传参 <router-link :to="{path:'/User',query:{num:id,name:'jim'}}"> 用户 </router-link> 目标组件获取地址参数 this.$route.query.num #### 8.ElementUI #### Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 安装ElementUI:npm i element-ui-S 在 main.js 中写入以下内容： import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); new Vue({ render: h => h(App), }).$mount('#app'); 1.网络请求 #### #### axios是 一个HTTP的网络请求库。 安装 npm install axios 在 main.js 中配置 axios 导入 axios import axios from 'axios'; 设置访问后台服务器地址 axios.defaults.baseURL="http://127.0.0.1:9999/api/"; 将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问 Vue.prototype.$http=axios; 使用get或post方法即可发送对应的请求 then方法中的回调函数会在请求成功或者失败时触发 通过回调函数的形参可以获取响应的内容，或错误信息 基本语法 this.$http.get(地址?Key=value&key2=val1).then(function(response){ } this.$http.post("login",{key:"value",key2:"val2"}).then(function(response){ } axios 的常用 API get：查询数据 post 添加数据 put：修改数据 delete：删除数据 axios 的响应结果 响应结果的主要属性 data：实际响应回来的数据 headers：响应头信息 status：响应状态码 statusText：响应状态信息 //axios 请求拦截 axios.interceptors.request.use(config =>{ //为请求头对象，添加 Token 验证的 token 字段 config.headers.token = window.sessionStorage.getItem('token'); return config; }) // 添加响应拦截器 axios.interceptors.response.use((resp) =>{//正常响应拦截 if(resp.data.code==500){ ElementUI.Message({message:resp.data.message,type:"error"}) } if(resp.data==201){ router.replace("/login"); } return resp; });
还没有评论，来说两句吧...