搜索词>>vue 耗时0.0020
  • Vue中main.js App.vue index.html之间关系

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页,项目入口App.vue---根组件ma在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页,项目入口App.vue---根组件main.js---入口文件那么这几个文件之间的联系如何呢?1.先看index.html中的内容:(为了很好的识别各个文件,我对各文件内容进行了文字标记)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-start|来自index.html的标题</title> </head> <body> <div id="app"> 来自index.html的内容 </div> <!-- built files will be auto injected --> </body> </html> 2.在App.vue中,我做了如下处理:<template> <div id="app"> <img src="./assets/logo.png"> <div>来自App.vue的内容</div> <!--<router-view/>--> </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> 3.在main.js中,文件初始内容如下:// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })  接下来运行这个项目,观察显示网页效果如下: ​也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分)那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,而index.html中 <div id="app"> 来自index.html的内容 </div>上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上; main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过new Vue({ el: '#app', router, components: { App }, template: '<App/>' })告诉该实例要挂载的地方;(即实例装载到index.html中的位置)接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢? import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })这个局部组件是当前目录下的App.vue;模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容) 所以Vue这个实例就是展示的是App.vue这个组件的内容。 总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代,所以会一直保留。
  • vue-router 中 routers 定义写法

    vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 router的index.jsimport Vue from 'vue' import Router from 'vue-router' //首页vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 router的index.jsimport Vue from 'vue' import Router from 'vue-router' //首页 //import index from '@/components/index' //产品中心 import productCenter from '@/components/productCenter/productCenter.vue' //商务合作 import teamwork from '@/components/teamwork/teamwork.vue' //咨询中心 import askCenter from '@/components/askCenter/askCenter.vue' //关于中棋 import aboutUs from '@/components/aboutUs/aboutUs.vue' Vue.use(Router) export default new Router({ routes: [ //首页 { path: '/', name: 'index', component:resolve =>require(['index'],resolve) } //产品中心 ,{ path: '/productCenter', name: 'productCenter', component: productCenter } //商务合作 ,{ path: '/teamwork', name: 'teamwork', component: teamwork } //咨询中心 ,{ path: '/askCenter', name: 'askCenter', component: askCenter } //关于我们 ,{ path: '/aboutUs', name: 'aboutUs', component: aboutUs } ] }) 重点说明:提示:import 引入时用到的“@”就相当于“..”;我们看到index页面是用的require的方式写的路由,所以上面的import就注释掉了,这种写法的好处,不仅仅是简单,还有这样写是按需加载,访问此路由时才加载这个js,会避免进入首页时加载内容过多,因为import引入,当项目打包时路由里的所有component都会打包在一个js中,而用require会将你的component分别打包成不同的js。最后总结:推荐使用require 方式编写routers,按需加载节约资源。 图像 小部件
  • Vue v-if判断数组长度

    Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataList).length == 0"  >l;</li>l;Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量<li  v-if="Object.keys(searchResultDataList).length == 0"  ></li>
  • Vue 2.0项目配置CDN服务解决加载慢问题

    vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>l;     <div id="app">l;</div>l;       <script srvue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文<body>     <div id="app"></div>       <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>     <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>步骤二 添加配置在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,如下:module.exports = {   entry: {     app: './src/main.js'   },   externals:{     'vue': 'Vue',     'vue-router': 'VueRouter',     'vuex':'Vuex'   }  【注意】 externals的key:value不要随便修改,暂时理解为 key是npm安装使用的名称,value为组件对外提供的名称不可随意更改(打开组件源码可见)步骤三 去掉原有的引用1.main.js  文件中注释掉vue // import Vue from 'vue'2.router--> index.js  文件中注释掉 vue和 vue-router:// import Vue from 'vue' // import VueRouter from 'vue-router'3.修改名vue 使用路由配置为以下Vue.use(VueRouter)
  • Vue 登录后返回上一页完美解决办法

    Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//返回上一页 } } //...省略注意Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//返回上一页 } } //...省略注意:前提是使用了Vue 的route组件
  • webstorm中vue项目不能用ip访问解决

    在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来。​默认方式运行  我们在浏览器里输入localhost:8080就可以访问该项目了。但是要是手机想访问的话,就得通过ip地址,但当我输入ip地址进行访问时,却发现不行。于是我找项目的配置文件,发现config/index.js,有个host的配置项,默认值为“localhost”,我把localhost改成ip地址,重启,发现可以访问,但localhost:8080这个地址就没办法访问了。​index.js修改本着一点强迫症,在网上百度的基础与向dalao请教的基础之上,找到了有个解决办法。既能通过ip地址访问,也能通过localhost访问。方法1.将index.js中的host的值改为‘0.0.0.0’方法2.修改package.json中script下dev的值,在后面加入--host 0.0.0.0 也可以解决​package.json修改  
  • Vue 全局变量防刷新优雅实现

    1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     return window.localStorage.toke1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     return window.localStorage.token;   },  setToken(token) {   window.localStorage.token = token;  },  getInfo() {   if (window.localStorage.info)     return JSON.parse(window.localStorage.info);   return null; },  setinfo(user) {   window.localStorage.info = JSON.stringify(user); } }上面代码分别实现了对象和字符串的存储,由于基于localStorage所以需要H5浏览器支持。2 vue项目main.js配置  import global from './global'; Vue.prototype.global = global; 其他你的代码3 vue全局变量使用  let _self=null; export default {     name: "demo-vue",     created:function(){      _self=this;    },     data() {     },     methods: {          test(){              var token=_self.global.getToken();              console.log(token)          }     }   };遗留一个小问题,localStorage必须手动清除,否则永久存放,也可以试试sessionStorage。如果你有更好的方法,欢迎告知。感谢。
  • vue watch监控对象属性变化

    vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } },或者下面写法watch:{ 'objvue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } },或者下面写法watch:{ 'object.attr'(value){ //处理操作 } },
  • Vue2.x父子组件相互通信

    一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决。二、Vue 2.x组件相互通讯原理在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。看看它们是怎么工作的。​Vue 2.x组件相互通讯原理三、子组件 这里的子组件是模拟的一个搜索组件,包含返回、搜索等事件。只用关注组件的值传递即可。$title(child.vue) <template> <!--搜索条--> <div class="search-back-section searchHead flex-between animated" :class="activeClass"> <mu-button class="back" flat color="#444444" @click="back"><i class="fa fa-angle-left" aria-hidden="true"></i></mu-button> <mu-text-field :value="searchKeyword" v-model="text" :placeholder="'请输入:'+placeholder" :error-text="error" ></mu-text-field> <mu-button small class="btn" flat color="#444444" @click="search">搜索</mu-button> </div> </template> <script> import verify from "../assets/js/verify"; export default { name: "com-search-back-section", props: [ "back", //"返回按钮" "searchKeyword", //搜索关键字 "placeholder", //输入框提示 "error", //错误提示 "activeClass", //绑定CSS样式 ], data() { return { text: "", } }, watch:{ searchKeyword(val){ this.text=val; } }, created() { this.text = this.searchKeyword; }, methods: { search() { let msg = ""; if (verify.isEmpty(this.text)) { msg = this.text; } else { msg = false; } this.$emit("search", msg); } }, } </script> <style scoped> //样式代码与本文主题关系不大,省略 </style> 划重点props: [ "back", //"返回按钮" "searchKeyword", //搜索关键字----重点 "placeholder", //输入框提示 "error", //错误提示 "activeClass", //绑定CSS样式 ] watch:{ searchKeyword(val){ this.text=val; //---重点 } } 通过watch监视props中的属性值以及data中属性与数据的双向绑定,实现了外部数据的双向绑定。注意:父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致search() { let msg = ""; if (verify.isEmpty(this.text)) { msg = this.text; } else { msg = false; } this.$emit("search", msg); //---重点 }通过$emit向外面抛出一个回调函数传递当前组件的值数据。四、父组件$title(patent.vue) <template> 其他省略--- <!--搜索框--> <search-back-section :active-class="isFixedState?'isFixed fadeInDown':''" :back="closeFullscreenDialog" :searchKeyword="searchKeyword" //-----重点 :placeholder="'关键字'" @search="searchBtn" :error="errorText" ></search-back-section> 其他省略--- </template> <script> let _self=null; export default { name: "door-home", data() { return { errorText: "", //错误信息 searchKeyword: "", //关键字 isFixedState:false //用于判断css样式选择,与主题无关 }, created() { _self=this; this.searchKeyword='默认的值'; //---重点 会看到初始化的子组件中输入框默认值为‘默认的值’(实现了父向子传递数据) }, methods: { /* * @"搜索"按钮 * */ searchBtn(msg) {------重点 通过子向外抛出的回调函数,子组件向父组件传递子组件中输入的内容值(实现了子向父传递数据) if (msg) { this.searchKeyword = msg; this.errorText = ""; } else { this.errorText = "请输入关键字."; return false; } } closeFullscreenDialog(){ //关闭搜索操作,与主题无关代码省略 } }, }; </script>注意:父组件中定义子组件绑定属性的名称对应的是子组件props里面定义的名称一致,传值是通过props传递所以必须一致。例子中的 :searchKeyword="searchKeyword"前面的searchKeyword是子组件的props定义的,后面这个是当前父组件定义的,后方这个searchKeyword可以随意其他名称
  • Vue route路由跳转及传参

    一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:value2}});一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:value2}});