vue

// App.vue <template> <div id="app"> {{ count }} <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script> import { mapState } from 'vuex'; // import { mapState, mapActions } from 'vuex'; export default { name: 'app', computed: mapState([ 'count' ]), methods: { increment () { // this.$store.commit('increment'); this.$store.dispatch('incrementAsync'); }, decrement () { // this.$store.commit('decrement'); this.$store.dispatch('decrement'); }, testAction () { this.$store.dispatch('actionA').then(() => { }); } } // methods: mapActions([ // 'increment',

// App.vue <template> <div id="app"> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> // main.js import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) Vue.config.productionTip = false const moduleA = { state: { count: 3 }, mutations: { increment (state) { state.count++; } }, getters: { doubleCount (state) { return state.count * 2; } },

一. VSCode开发必备插件 1. Beautify：语法高亮； 2.Bracket Pair Colorizer ：对括号对进行着色； 3. ESLint： ESLint插件，高亮提示； 4.HTML CSS Support：css提示（支持vue）； 5.HTML Snippets：自动帮你输入HTML标签； 6.vetur:目前比较好的Vue语法高亮,快捷提示； 7. vscode-icons：文件图标，方便定位文件； 8. Vue 2 Snippets：API添加了代码片段； 二.页面文件路由跳转文件配置 文件在router文件夹下的index.js下 //首页 import index from '@/components/pages/My/index' ...... routes: [ { path:'/index', name:'index', component:index } ] 三.跨域解决方法 文件在config文件夹下的index.js下 module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target:'http://192.168.1.240:18080', changeOrigin

跨平台一直是老生常谈的话题，cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放，颇有一股推倒原生开发者的势头。本文将对当下跨平台移动开发的现状、实现原理、框架的选择等进行深度解析。 为什么我们需要跨平台开发？ 本质上，跨平台开发是为了增加代码复用，减少开发者对多个平台差异适配的工作量，降低开发成本，提高业务专注的同时，提供比web更好的体验。通俗了说就是：省钱、偷懒。 本篇主要以react-native、weex、flutter，结合资讯展望，深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们，因为对比ionic、phoneGap，它们更于 “naive”。 一、原理与特性 目前移动端跨平台开发中，大致归纳为以下几种情况： react native、weex均使用Java作为编程语言，目前Java在跨平台开发中，可谓占据半壁江山，大有“一统天下”的趋势。 kotlin-native开始支持 iOS 和 Web 开发，（kotlin已经成为android的一级语言）也想尝试“一统天下”。 flutter是Google跨平台移动UI框架，Dart作为谷歌的亲儿子，毫无疑问Dart成为flutter的编程语言，如下图，作为巨头新生儿，在flutter官网也可以看出，flutter同样“心怀天下

// App.vue <template> <div id="app"> </div> </template> <script> export default { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> // main.js import Vue from 'vue' import Vuex from 'vuex' import App from './App.vue' Vue.use(Vuex) Vue.config.productionTip = false const moduleA = { namespaced: true, state: { count: 3 }, mutations: { increment (state) { state.count++; } }, getters: { doubleCount (state) { return state

1.在进行开始开发vue项目的时候，所需要的步骤。 npm init webpack 项目名字 npm run dev 运行项目 npm run build 编译打包项目 2.安装插件 "dependencies" : { "axios" : "^0.19.2" , "vant" : "^2.4.6" , "vue" : "^2.5.2" , "vue-router" : "^3.0.1" , "vuex" : "^3.1.2" } , 开发依赖 npm install less less-loader 3.main.js配置 mport Vue from 'vue' import App from './App' import router from './router' //路由 import Axios from 'axios' //axios import store from './store' //vuex Vue.config.productionTip = false Vue.prototype. $axios = Axios // Axios 请求拦截器 Axios.interceptors.response.use ( function ( response ) { // Do something with response data console.log (

前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？ 方法一、 props / $emit 父组件A通过props的方式向子组件B传递。 1.父组件向子组件传值 接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"] //App.vue父组件 <template> <div id="app"> <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名 </div> </template> <script> import Users from "./components/Users" export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } } 复制代码 /

一、组件间的关系 1、父子关系 2、兄弟关系 3、隔代关系 二、组件间的通信方式 1、props 2、$emit/$on 3、VUEX 4、$parent/$children 5、$attrs/$listeners 6、provide/inject 三、通信方式举例 新建了一个过程，采用webpack来管理项目。 方法一：props / $emit 1、props---父组件向子组件传值 子组件：sub1.vue 父组件：app.vue 父组件通过props向下传递给子组件。注：组件中的数据共有三种形式：data，props，computed // app.vue 父组件 <template> <div> <sub1 v-bind:data_from_app = "msg_parent"></sub1> </div> </template> <script> import sub1 from './components/sub1.vue'; export default { data(){ return { msg_parent:'父组件数据app' } }, components:{ sub1 } } </script> <style lang="scss" scoped> </style> 　　 // 子组件 sub1.vue <template> <div> <p>{

背景： 初始Vue.js，了解组件时Vue的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： 组件A与组件B、C之间是父子组件，组件B、C之间是兄弟组件，而组件A、D之间是隔代的关系 那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式。例如Props、$emit/$on、Vuex等。可以根据使用场景选择适合的使用方式。 一、Prop / $emit 1、Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个Prop特性的时候，它就变成了那个组件实例的一个属性。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过Props属性获取对应数据 //父组件 <template> <div> <child :title="title"></child> </div> </template> <script> import Child from './child.vue' export defalut{ name:'parent', data(){ return{ title:'我是父组件给的' } }, components:{ Child } } </script> //子组件 <template> <div> <p>{{title}}</p> </div> </template> <script> export

　　Vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要。 　　常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provide / inject ref $attrs / $listeners 兄弟组件通信: eventBus Vuex 跨级通信: eventBus Vuex provide / inject $attrs / $listeners 一、props / $emit （最常用的组建通信方式） 　　 父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。 　　1. 父组件向子组件传值（props） 传入一个静态的值 　　<blog-post title="My journey with Vue"></blog-post> 传入一个动态的值， 任何 类型的值都可以传给一个 prop。 　　<blog-post v-bind:title="post.title"></blog-post> 　　<blog-post v-bind:likes="42"></blog-post> 　　<blog-post v-bind:is-published="false"></blog-post> 　　<blog-post v-bind:comment-ids="[234,