使用vue

使用bootstrap

npm install bootstrap@3 --save

使用jQuery

npm install

----------------

搭建vue项目

1，全局安装脚手架

npm install --global vue-cli

声明vue项目

模板：simple、webpack-simple、weback（最后要使用的模板）

2、创建weback模板

vue init weback

3、页面

4、引用boostarp

在入口文件app.vue

5：编写路由接口

router-link

6：阴影切换

       <li :class="{active:currentIndex==index}" v-for = "(item,index) in urls" @click = 'clickHandler(index)'>
          <router-link :to="item.url">{{ item.name }}</router-link>
        </li>

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

解析

     <li :class="{active:currentIndex==index}" v-for = "(item,index) in urls" @click = 'clickHandler(index)'>
          <router-link :to="item.url">{{ item.name }}</router-link>
        </li>

v-for = "(item,index) in urls

遍历所有url地址
item为url
index为name

     urls:[
        {url:'/',name:'首页'},
        {url:'/mark',name:'笔记'},
        {url:'/xin',name:'心得'}
      ],

v-on监听事件

v-on指令可以简写为@，@click监听点击事件

 @click = 'clickHandler(index)

猜你喜欢