vue | 易学教程

vuex学习---getters

阅读更多关于 vuex学习---getters

vue是一个面向数据，只有一个层：view,在数据传给客户端之前，计算其相关的属性，应该是什么样子，前面有个mapState([])远程加载数据，加载的是一个静态的数据，如果想获取动态的数据，就要用到 getters 。官方建议在getter和computed不推荐使用箭头函数。这个例子依旧沿用了之前vuex学习---简介的模板 1.首先在store.js中一开始会在页面上显示：104 常量值4+ getters中的100 ;点击加会104+ 100+3 ,变成207 ；点击减207+100-1 = 306 ，依次如此。 1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 4 //使用vuex模块 5 Vue.use(Vuex); 6 7 //声明静态常量为4 8 const state = { 9 count : 4 10 }; 11 12 //定义一个方法，在vue中，唯一的定义状态的方法就是提交一个mutations, 13 //而且导出时，只要导出mutations即可， 14 //当使用时，也仅仅只要使用统一的 $store.commit('event') event是事件名称。 15 const mutations = { 16 add(state,n){ 17 state.count +=n.a; 18 },

vue 渲染函数 & JSX

阅读更多关于 vue 渲染函数 & JSX

渲染函数 render 通过渲染函数渲染组件 Vue.component('myComponent', { render (h) { // createElement return h( 'div', // HTML tag、自定义组件、异步组件 { // 属性对象 attrs: { // 标签属性 id: 'wrap' }, class: { // 类名 'my-com': true }, props: { // DOM 属性，props user: 'wdapp' }, style: { // 样式 color: 'red', fontSize: '18px' }, on: { // 绑定事件 mouseenter: function () { console.log('click') } }, key: 'myKey', // 唯一key值 ref: 'myRef', // 获取DOM元素的标识 }, [// 子节点 "文本节点", // 文本节点 h('h1', "内容"), // 虚拟节点 ] ) } }) 渲染后： // html <div id="wrap" class="my-com" style="color: red; font-size: 18px;">文本节点<h1>内容</h1></div> JSX 通过以上方式创建虚拟DOM，语法比较繁琐。可以使用JSX

Vuex响应式原理

阅读更多关于 Vuex响应式原理

一、深入响应式原理当视图模型（VM）中的数据模型（M）发生改变时，视图（V）就会进行更新。 Vue通过watcher将data中的属性全部使用Object.definePropery编程,当属性值发生改变的时候， getter和setter就会触发，然后wather触发，通知视图（V）进行重新渲染。数据必须放在data选项中才能进行深入响应式。底层原理：核心使用的是es5的一个方法,这个方法不支持ie8以及以下代码： Object . defineProperty ( obj , obj . attr , descriptor ) 参数： obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。它是一个对象，这个对象有哪些构成？ `configurable` ：决定了对象的key是否可删除 `enumerable` ：决定了对象是否可遍历（枚举） `writeable` : 决定了对象的key的value是否可修改存储器： get 函数 -- -- 起了个名字getter 设置当前对象的key的初始值 set 函数 -- -- 起了个名字setter 修改当前对象的key的值代码： Vue . set ( vm . list , 'num' , 1000 ) console . log (

Vue项目多域名跨域

阅读更多关于 Vue项目多域名跨域

在Vue项目中请求后台数据时，遇到的多域名跨域问题。直接上代码： assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { "/api": { target: "path1", changeOrigin: true, //改变源 pathRewrite: { "^/api": "/" //路径重写 } },　　　　// 此处若使用 "/api1" 类似命名可能会导致请求时只截取api部分接口出现404错误，因此命名时尽量避免此类命名方式。 "/mzyl": { target: 'path1', //源地址 changeOrigin: true, //改变源 pathRewrite: { "^/mzyl": "/" //路径重写 } } }, //dev.env.js 'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: '"/api"', API_HOST: '"/mzyl"', }) 来源： https://www.cnblogs.com

基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册

阅读更多关于基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册

项目地址： https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + Element 构建项目前端，Node.js + Koa2 + MongoDB + Redis 实现数据库和接口设计，包括邮箱验证码、用户注册、用户登录、查看删除用户等功能。 1. 技术栈前端初始化项目： vue-cli3.0 组件库： Element-ui 路由控制/拦截： Vue-router 状态管理： Vuex 服务端运行环境： Node.js 后台开发框架： Koa2 路由中间件： Koa-router 发送邮件: nodemailer HTTP通讯接口请求/拦截： Axios Token认证： jsonwebtoken 数据库 MongoDB 数据库操作： Mongoose 缓存工具： Redis 2. 项目依赖： "dependencies": { "axios": "^0.18.0", "crypto-js": "^3.1.9-1", "element-ui": "^2.4.5", "js-cookie": "^2.2.0", "jsonwebtoken": "^8.5.0", "koa": "^2.7.0", "koa-bodyparser": "^4.2

nprogress进度条vue项目实现步骤

阅读更多关于 nprogress进度条vue项目实现步骤

1.安装 vue-ui界面：运行依赖---nprogress yarn add nprogress npm i nprogress -S 2.ajax请求拦截器实现 //导入进度条插件 import NProgress from 'nprogress' //导入进度条样式 import 'nprogress/nprogress.css' .. .. . //请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use ( config = > { //当进入request拦截器，表示发送了请求，我们就开启进度条 NProgress.start ( ) //为请求头对象，添加token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem ( "token" ) //必须返回config return config } ) //在response拦截器中，隐藏进度条 axios.interceptors.response.use ( config = > { //当进入response拦截器，表示请求已经结束，我们就结束进度条 NProgress.done ( ) return config } ) 3

vuejs之v-on

阅读更多关于 vuejs之v-on

看一个例子： <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="button" value="事件绑定" v-on:click="doIt"> <input type="button" value="v-on简写" @click="doIt"> <input type="button" value="双击事件" @dblclick="doIt"> <h2 @click="changeFood">{{food}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { food: '西红柿炒鸡蛋' }, methods: { doIt: function () { //逻辑 alert("做it"); }, changeFood: function () { this.food += "好好吃" } }, }) </script> </body> </html> 结果：点击事件绑定或者v-on简写或者双击事件，会：点击西红柿炒鸡蛋：说明：v-on可以为标签绑定事件，语法：v-on:事件名="方法名" ，可以使用

vuejs之v-text

阅读更多关于 vuejs之v-text

看一个例子： <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2 v-text="message">这里有内容</h2> <h2 v-text="info + '!'"></h2> <h2>深圳{{message}}</h2> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', info: "Hello", } }) </script> </body> </html> 输出：说明：v-test会全部替换标签体里的内容，而且内部支持写表达式。来源： https://www.cnblogs.com/xiximayou/p/12315829.html

[vue]插槽

阅读更多关于 [vue]插槽

插槽 <div id="app"> <todo>  <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items> </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> Vue.component("todo", { template: '<div>' + '<slot name="todo-title"></slot>' + '<ul>' + '<slot name="todo-items"></slot>' + '</ul>' + '</div>' }) Vue.component("todo-title", { props: ['title'], template: '<div>{{title}}</div>' }) Vue.component("todo-items", { props: ['item'], template: '<div>{{item}}</div>'

vue数据响应式原理

阅读更多关于 vue数据响应式原理

vue2.0数据响应式原理对象 Obect.defineproperty 定义对象的属性mjm defineproperty 其实不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，设置一系列操作权限，只不过属性里的get和set实现了响应式 var ob = { a: 1, b: 2 } //1-对象 2-属性 3-对于属性的一系列配置 Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true writable: false, enumerable: false, configurable: false }) ob.a = 3 console.log(Object.getOwnPropertyDescriptor(ob, 'a')) console.log(ob.a) //1 var ob = { a: 1, b: 2 } //1-对象 2-属性 3-对于属性的一系列配置 /** * vue双向数据绑定 * 给ob的a属性设置get/set方法，则获取ob的a时，会触发get方法，设置ob的a时，会触发set方法 */ Object.defineProperty(ob, 'a' , { //a对象则是ob的绝对私有属性,,默认都是true get: function(){ console.log('a-

订阅 vue