vue 的基本使用
■ 最简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: goldenrod;
}
</style>
</head>
<body>
<div id="app" >
<!--插值表达式 {{ }}-->
{{message}}
<!--事件监听：监听点击事件@click-->
<button @click="btnActive">点击</button>
<!--属性绑定：样式绑定-->
<div :class="getClass()">样式</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message:'切换颜色',
isActive: true,
active: 'active',
},
methods: {
btnActive() {
this.isActive = !this.isActive;
},
getClass () {
return this.active;
}
}
});
</script>
</body>
</html>
1、插值表达式 {{ }}**
- 将值插入到我们模板的内容当中
### **2、双向绑定绑定 v-model**
### **3、v-if 条件选择**
- v-else
- v-show 适合经常切换的
### **4、v-for 循环**
### **5、样式绑定**
### **6、属性绑定**
- v-bind 常用的是语法糖的冒号：
### **7、事件绑定**
- v-on 常用的是语法糖的@，经常使用的也是点击事件@click
- 事件修饰符
### **8、计算属性**
- 和普通methods 属性的区别是：它具有**缓存作用**
9、插槽slot**
> 在vue中看到$:代表使用但是是vue自身的属性或者是挂载到vue上的插件(比如route)的属性，目的是为了和咱自己定义的变量做一个区分
> 安装插件命令：npm install （若失败，可以使用cnpm install）
> *# npm install --save 插件名*
> *# 安装路由*
> npm install vue-router --save
> *# 安装[vuex](https://www.zhihu.com/search?q=vuex&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2577155559%7D)*
> npm install vuex --save
>
> *# 安装element-ui*
> npm i element-ui -S
>
> *# npm install*
> *# 安装axios*
> npm install axios
>
>
- --save-dev 的话，安装到node_modules 目录中，并在devDependencies 节点下添加上依赖，-dev是在开发时需要用的，部署不需要，一般是一些打包压缩工具和一些格式转化工具
## **组件**
### **1、什么是组件化**
Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，**在Vue中，万物皆组件。**
也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，**Vue的对象都会以组件的形式出现，能被反复使用。**
**要想实现组件化，需要在页面中[注册组件](https://www.zhihu.com/search?q=%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2577155559%7D)。**
关于注册的方式有两种，分别是**[全局注册](https://www.zhihu.com/search?q=%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22answer%22%2C%22sourceId%22%3A2577155559%7D)和本地注册**。
### **2、注册**
全局注册和本地注册区别：
全局注册可以在任何Vue根实例里面使用；而本地(局部)注册只能在绑定它的父组件中使用。
一般项目中只有一个Vue根实例(全局注册)，其他组件都是局部注册的。
- 全局注册：
- 本地(局部)组件
