# vueinit

**Repository Path**: demo51/vueinit

## Basic Information

- **Project Name**: vueinit
- **Description**: localinit
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vueinit

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).


# 笔记

    插件 Vetur|

## 模板语法
显示html|

`<p v-html="room"></p>`

**插值**

```
可以实现单行表达式



```



```
# 动态绑定
<a v-bind:href="links.url">{{links.title}}</a>
<!-- 动态绑定|可以识别自定义属性 -->
<p v-bind:data-id="id">id={{id}}</p>

-----
<!-- 绑定数据|下面效果等效 -->
<a v-bind:href="url">{{count}}</a>
<a :href="url">{{count}}</a>


```

**条件渲染**

```
v-if

v-show
#使用的是 display: none;

```

**列表渲染**

```
<ul>
 <li v-for="(item,index) in names"  v-bind:key="index">
   {{index}}-|-{{item}}
 </li>
</ul>


```



## 事件渲染

```
v-on:click


#事件传递参数
```



## 计算属性 和侦听器

```
computed:{
  getMsg(){
    return this.msg.split('').reverse().join("")
  }
}

模板中直接使用
 {{getMsg}}

```

## style和class绑定

```vue
<p>
  <!-- 变颜色 -->
  <div :class="{active:isActive}">helloisActive</div>
  <button @click="isActive=!isActive">变颜色</button>
</p>

```

## 表单

数据绑定

```
v-model

```



## 组件

vue组件后缀名为vue

组件由三部分组成 template script style

script 中data 必须是函数。

scoped：

​		增加scoped属性，样式只能在当前组件生效。

**组件的引入**

1. 引入
2. 依赖注入
3. 使用

各个组件是独立的。



**组件传递参数**

通过props传递参数



## 插槽

slot

编译作用域，声明在哪里就在哪里使用







## 动态组件

```vue
动态组件：
<button @click="showA">A显示</button>
<button @click="showB">B显示</button>
<keep-alive>
<!-- keep-alive:只要需要被缓存都可以使用，在路由中同样生效 -->
<component :is="currentComponent"></component>
</keep-alive>

```

## 边界处理情况



## 过渡与动画





## 二级路由

1. 规则

	```
	{
	  path: '/learn',
	  component: Learn,
	  children: [{
	      path: 'java',
	      component: Java
	    },
	    {
	      path: 'go',
	      component: Go
	    }
	  ]
	}
	
	```

2. 路由配置：不需要给定全部路由，

3. 增加2级路由显示位置`<router-view></router-view>`



## 重定向和别名

```
{
path: '/',
redirect: "/home"
}


///别名
{
path: 'java',
component: Java,
alias: 'javaweb' /* 别名 */
}
```