vue

我们通过Vue的component方法来定义一个全局组件。 <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> // 定义全局组件，两个参数：1，组件名称。2，组件参数 Vue.component("counter",{ template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>', data(){ return { count:0 } } }) var app = new Vue({ el:"#app" }) </script> 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。 data必须是一个函数，不再是一个对象。 效果： 2.组件的复用 定义好的组件，可以任意复用多次：

什么是路由 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； 在 vue 中使用 vue-router 路由的基本使用包括以下几步： 引入 vue-router.js ，也可以通过 npm 安装，后面再介绍 创建模板对象 创建一个路由对象， 当导入 vue-router 包之后，在 window 全局对象中，就有了一个路由的构造函数，叫做 VueRouter ，在 new 路由对象的时候，可以为构造函数，传递一个配置对象。配置对象中的 routes 表示 路由匹配规则 ，每个路由规则，都是一个对象，这个规则对象身上，有两个必须的属性： path 表示监听的路由链接地址； component 表示，如果路由是前面匹配到的 path ，则展示 component 属性对应的那个组件，注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称。 router: routerObj 将路由规则对象，注册到 vm 实例上，用来监听

一.登录拦截 用户登录成功后服务端返回token的值，然后前端使用axios中请求拦截器（service.interceptors.request.use）再每个的请求接口上加上Authorization:token的值，服务端通过这个Authorization来获取token的值，来进行判断token的值是否过期，如果过期则接口返回403,前端得到403的状态，则提示用户返回登录页。 1.request.js import axios from 'axios'; import { Message, MessageBox } from 'element-ui'; import router from '../router'; /** * 提示函数 * 禁止点击蒙层、显示一秒后关闭 */ const tip = msg => { Message({ message: msg, duration: 1000 }) } /** * 跳转登录页 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面 */ const toLogin = () => { router.replace({ path: '/login' }); } // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE

vuex中的actions 官方建议actions用来处理异步操作 实际如下 < button @click = "updataInfo" > 修改就完事了 < / button > methods : { updataInfo ( ) { this . $store . dispatch ( 'updataInfo' ) } } actions : { updataInfo ( context ) { setTimeout ( ( ) => { context . commit ( 'updataInfo' ) } , 1000 ) ; } } , state : { counter : 1000 , info : [ { name : '刘德华' , age : 10 } , { name : '张学友' , age : 11 } , { name : '黎明' , age : 22 } , { name : '郭富城' , age : 23 } ] } , mutations : { updataInfo ( state ) { state . info [ 0 ] . name = '孙笑川' } } 通过和mutations的方法比较得知 如果有异步操作,官方希望你先组件里dispatch 然后在actions里提交,最后在mutations里操作 来源： CSDN 作者

组件使用的三个步骤 1.创建组件构造器 2.注册组件 3.使用组件 < div id = " app " > <!-- 使用组件 --> < cpn > </ cpn > </ div > < script > // 1.创建组件构造器对象 const cpnC = Vue . extend ( { template : ` <div> <h2>我是标题</h2> </div>` } ) ; // 2.注册组件(标签名，组件构造器) Vue . component ( "cpn" , cpnC ) const app = new Vue ( { el : "#app" , } ) </ script > 各步骤的含义： 1.Vue.extend()： 调用Vue.extend()创建的是一个组件构造器。 通常在创造组件构造器时，传入template代表我们自定义组件的模板。 该模板就是在使用到组件的地方，要显示的HTML代码。 2.Vue.component(): 调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。 所以需要传两个参数：1、注册组件的标签名 2、组件构造器 全局组件和局部组件 1.全局组件：通过Vue.component注册组件 2.局部组件：在创建的Vue实例中注册组件 const app=new Vue({ el

框架演变： 原生js: jequery类库: 封装了原生js方法，是个库，浏览器兼容性 前端模板引擎(): 调用方法生成dom元素(组件，页面等等) 流行框架(vue,react,anjular): 1.减少不必要的dom操作 2.提供双向数据绑定，只需关注业务，不必要关注dom 项目结构： vue项目结构 来源： CSDN 作者： 小T的博客 链接： https://blog.csdn.net/m0_37840243/article/details/104539813

先把几个方法放出来： 1.SSR服务器渲染； 2.静态化； 3.预渲染prerender-spa-plugin； 4.使用Phantomjs针对爬虫做处理。 首先复习一下SEO： 搜索引擎 优化（Search engine optimization，简称SEO），指为了提升网页在搜索引擎自然搜索结果中（非商业性推广结果）的收录数量以及排序位置而做的优化行为，是为了从搜索引擎中获得更多的免费流量，以及更好的展现形象。 vue对seo太不友好了，单页面SPA应用就是实时渲染的，爬虫都爬不到，我在做完一个vue写的官网的时候，老板突然说要seo，我懵逼了，所以被迫营业找了一下优化方法。 1. SSR： 这个vue的官方有一个文档（ 官方地址 ），但是 对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境，其他环境也可以，代码又要重新写一遍。 使用SSR权衡之处： 开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行； 环境和部署要求更高，需要Node.js server 运行环境； 高流量的情况下，请准备相应的服务器负载，并明智地采用缓存策略。 优势： 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面；

简介 最近发现了一个好玩的框架，叫做 AlpineJS ，它是类似于Vue或者React这样的组件化开发框架，但是它更加轻量，下面是它的github地址 https://github.com/alpinejs/alpine Scrimba上的视频教程 https://scrimba.com/g/galpinejs 它更适合于在现有的项目里的某个部分应用组件（Vue和React也可以在某个部位适用，但是总感觉有点大），它有种拿来即用的感觉 小例子 先忽视安装步骤，直接看下面这个小例子 < div x-data = " { word: ' hello world ' } " > < h1 x-text = " word " > </ h1 > </ div > 它的语法是从Vue里借鉴过来的，几乎和Vue一样，但是它是以 指令 为基础，没有什么 {{}} 这样的语法，并且指令是以 x- 开头的，不是Vue的 v- 开头。 上面的那个例子中，你可以理解为，带有 x-data 指令的标签容器，就相当于一个组件，在组件内部可以通过其他 x- 指令去运用 x-data 里的数据，做声明式的渲染操作。 看起来是不是很方便，官方说有点类似于 javascript的 tailwind CSS （如果你用过 tailwind CSS 你应该知道，这种工具式的开发特别爽）。 接下来看下一些常见的功能

一 vue 事件操作 1》监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:事件名称 简写 ： @事件名称 2》方法事件处理器 @事件名称=“方法名称（参数1，参数2，。。）” 3》事件修饰符 阻止冒泡 @click.stop 取消默认行为 @click.prevent 串联 @click.stop.prevent @keyup.stop.prevent.37 4》按键修饰符 @keyup.37 ||@keyup.enter 例子1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{msg}} <button @click="msg++">按钮</button> </div> <script src="../vue.js"></script> <script> new Vue({ el: "

在el-dialog 对话框中经常会输入一些信息，但是在关闭的时候我们需要清空输入的信息，如果不清空下次打开信息会存在 数据结构 data() { return { message: "1", testDialog:{ dialogVisible:false, input1:"", input2:"" } }; }, 第一种方法 ：采用循环方式 clearVirtualDriveclearInfo(obj) { for (let key in obj) { if (key != "dialogVisible") { obj[key] = ""; } } }, 第二种方式 ：采用this.$options.data().testDialog 获取 Vue 实例的初始化数据 this.testDialog = this.$options.data().testDialog // 清空的一种方法 Object.assign(this.testDialog,this.$options.data().testDialog) 清空的另一种方法 来源： oschina 链接： https://my.oschina.net/u/2612473/blog/3176133