vue大杂烩（更新）

vue大杂烩

对于刚刚摸到vue门把手的我来说，jio得把自己学到的记录在博客里面是一件很聪明的事情。既能后面的新人看到我写的vue博客可以脑袋灵光一闪，突然开窍的那种feel。当然最主要是我怕自己忘记了，所以决定写在博客里。偶热还能登陆上来看一下温习一下哈哈~。没有什么逻辑顺序路过的就将就看吧。

1、vue首页加载缓慢的问题

之前大家网上大家看到在路由的index引入组件一般是用下面这样引入。如果小项目的问题倒不大。当你的项目很庞大，组件使用非常多的时候，这就会造成首页加载十分缓慢。因为页面需要将所有的组件加载完毕才显示

import Detail from '@/pages/detail/Detail'

const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')

 

上面的最后一段代码使用的是webpack ensure。流弊点的说法就是异步加载-代码分割，通俗点的说法就是按需加载组件。你进入的是首页，那么页面就只会讲所有index的组件加载，当年进入detail页面，就会将detail页面组件加载以此类推。这个就是我在简书看到比较简单明了的https://www.jianshu.com/p/9fa38e536033解答。

1. v-bind:title="message" 此处的v-bind为绑定的意思。讲数据中的message和标签属性title想绑定。实时的获取message值的改变，并更新到title的值上。

2. <p v-if="seen">现在你看到我了</p>  此处的seen为数据里的data键，假如seen为true则为显示，false那么此标签就会消失。

3.     <li v-for="todo in todos">
         {{ todo.text }}
       </li>

   此处例子的方法todo 为键 toods为值。意思是循环渲染li标签。但其实v-for还有另外一种方法，v-for="(name,index) in key".  index为循环时候下标签。并且当循环渲染数据到页面的时候，我们一般直接写 v-for="(name,index) in key"这样写很多的编辑器都会提示你，需要绑定一个key的属性来区分。然后我们就可以选择用index来区分或是你数据里的不同id   ，例子在下面：

   <div class="item" v-for="(item,index) of list" :key='index'>
               <div class="item-title">
                   <span class="item-title-icon"></span>
                   {{item.title}}
               </div>
           </div>

    

4. v-model 主要用于表单和其他地方共用的数据的双向绑定。

   <div id="app-6">
     <p>{{ message }}</p>
     <input v-model="message">
   </div>

   input标签里输入的内容会实时改变p标签的内容。