# vue学习
**Repository Path**: Seek_Object/vue-learning
## Basic Information
- **Project Name**: vue学习
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-03
- **Last Updated**: 2021-05-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 视频来源
- VUE
https://www.bilibili.com/video/BV15741177Eh?p=13
- Element-Ul
https://www.bilibili.com/video/BV1y5411p7DX?from=search&seid=17936894035480145632
# VUE
## methods 属性用于vue对象中定义方法
参考:vue计数器.html
```
methods:{
add: function () {
this.counter++;
console.log("++")
},
sub: function () {
this.counter--;
console.log("--")
}
}
```
## 点击事件@click v-on:click="sub"
参考:vue计数器.html
```
```
## 函数|方法，函数无主，方法有主
## 可能不希望界面随意的跟随改变
## 【指令v-once】可能不希望界面随意的跟随改变（了解）
```
Title
{{message}}
{{message}}
```
- 谷歌F12 输入 `vm.message='111'`,`{{message}}
`值不会变
- 指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
## 【指令v-html】某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
- 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
- 会将string的html解析出来并且进行渲染
## 【指令v-text】v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型
## 【指令v-pre】用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。（了解）
- 第一个h2元素中的内容会被编译解析出来对应的内容
- 第二个h2元素中会直接显示{{message}}
## 【指令v-cloak】 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
- https://www.jianshu.com/p/f56cde007210?utm_source=oschina-app
## 【指令v-bind】v-bind用于绑定一个或多个属性值v-bind用于绑定一个或多个属性值 （了解）
### 语法糖
## 【指令v-bind:class】
07-v-bing-class.html
### 根据条件切换列表中的 class，可以用三元表达式：
```
```
## 【指令v-bind】绑定style
06-v-bind.html
06-v-bindstyle.html
## 计算属性
08-计算属性.html
### 计算属性的setter和getter
- 08-计算属性的setter和getter.html
- 计算属性一般是没有set方法，只读属性
### 计算属性的缓存 methods和computed
- computed 有缓存
08-计算属性缓存.html
## 【指令v-on】基础 （了解）
- 09--v-on-click.html
### 在某些情况下，我们拿到event的目的可能是进行一些事件处理
## 【指令v-if、v-else-if、v-else】
- 10-v-is-else.html
- v-if后面的条件为false时，对应的元素以及其子元素不会渲染
- 也就是根本没有不会有对应的标签出现在DOM中
### if-else条件渲染
- 10-v-is-else条件渲染.html
#### 小问题：
- 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
- 在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
##### 问题解答：
- 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
##### 解决方案：如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key并且我们需要保证key的不同
## 【指令v-show】
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染
### v-if和v-show对比
- v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
- v-if当条件为false时，压根不会有对应的元素在DOM中
- v-show当条件为false时，仅仅是将元素的display属性设置为none而已。
- 开发中如何选择呢？
- 当需要在显示与隐藏之间切片很频繁时，使用v-show
- 当只有一次切换时，通过使用v-if
## 【v-for】遍历数组
- 11-v-for遍历数组.html
## 检测数组更新
- Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
## 图书购物车 （了解）
- 12-图书购物车.html
## 表单绑定v-model
- 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单
- Vue中使用v-model指令来实现表单元素和数据的双向绑定
- input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
- 13-v-model.html
- 13-v-model-radio.html
### 修饰符
- 13-v-model修饰符.html
#### lazy修饰符 （了解）
- 默认情况下，v-model默认是在input事件中同步输入框的数据的
- lazy修饰符可以让数据在失去焦点或者回车时才会更新
#### number修饰符
- 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
- number修饰符可以让在输入框中输入的内容自动转成数字类型
#### trim修饰符
- 如果输入的内容首尾有很多空格，通常我们希望将其去除
## 组件
- 14-注册组件.html
- 14-注册组件-放在实例当中.html
- 14-注册组件-模板分离-script.html
- 14-注册组件-模板分离-template.html
### 语法糖
### 14-注册组件-模板分离-props传值.html
- 字符串数组，数组中的字符串就是传递时的名称
- 对象，对象可以设置传递时的类型，也可以设置默认值等
### 自定义事件（看不懂）
- 15-自定义事件.html
### 父子组件的访问方式： $children
- 父组件访问子组件：使用$children或$refs
- 16-父子组件的访问方式： $children .html
### slot基本使用子组件开启一个插槽
17-slot基本使用.html
### 具名插槽slot元素一个name属性
- 17-slot-创建name.html
## Webpack(了解)
模块 和 打包
- webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系
- 打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。
- 打包`webpack src/man.js dist/bundle.js`,`man.js`指定目录打包到`bundle.js`
## Vue CLI
### cnpm安装
`npm install -g cnpm --registry=https://registry.npm.taobao.org`
这样就可以使用 cnpm 命令来安装模块了::
`cnpm install [name]
### Vue CLI使用前提 - Webpack
`npm install webpack -g
`
### 安装Vue脚手架
- 没有指定版本
`npm install -g @vue/cli`
- Vue CLI2初始化项目
`vue init webpack my-project`
- Vue CLI3初始化项目（有问题，默认npm install -g @vue/cli应该会下拉最新版本）
`vue create my-project`
### Vue CLI2创建详解
### 目录结果详解
## 安装和使用vue-router
`npm install vue-router --save`
### demo
#### 创建实例
#### 挂载到Vue实例中
#### 创建路由组件
#### 配置路由创建
#### 使用路由
#### 希望渲染首页的内容
- 如何可以让路径默认跳到到首页, 并且渲染首页组件呢
##### HTML5的History模式 改变路径的方式有两种:
- URL的hash
- HTML5的history
- history模式, 非常简单, 进行如下配置即可:
- 区别
### router-link补充
- 在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径
- 还有一些其他属性:``
- - tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个元素, 而不是
- replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
- active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class,
- - 进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类
- - 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可
### 修改linkActiveClass（了解）
- 该class具体的名称也可以通过router实例的属性进行
### 路由代码跳转
- 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了
### 动态路由
- 某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径
- /user/aaaa或/user/bbbb
- 有前面的/user之外，后面还跟上了用户的ID
### 认识路由的懒加载（不理解）
- 当打包构建应用时，Javascript 包会变得非常大，影响页面加载
- 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
- 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况
#### 懒加载的方式（不理解）
- 方式一: 结合Vue的异步组件和Webpack的代码分析
`const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
`
- 方式二: AMD写法
`const About = resolve => require(['../components/About.vue'], resolve);
`
- 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
`const Home = () => import('../components/Home.vue')
### 认识嵌套路由
- 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容
- 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
#### 具体代码
### 嵌套默认路径
### 传递参数|获取参数$route
#### 传递参数
###### 传递参数方式一:
###### 传递参数方式二: JavaScript代码
### 获取参数
- 获取参数通过$route对象获取的
### $route和$router是有区别的
- $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
- $route为当前router跳转对象里面可以获取name、path、query、params等
### 导航守卫
- 比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.
### keep-alive遇见vue-router(缓存)
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
- 创建与销毁调用
主要是打开连接然后会调用`created`,访问其他就会调用`destroyed`销毁
- 创建``,就不在执行`destroyed`销毁
### Vuex 全局状态管理
- 可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面
- 这图片中的三种东西，怎么理解呢？
- State：不用多说，就是我们的状态
- View：视图层，可以针对State的变化，显示不同的信息
- Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变
#### 代码时刻
- 创建一个文件夹store，并且在其中创建一个index.js文件
- 挂载到Vue实例中 ,main.js文件，导入store对象，并且放在new Vue中, 这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了
## axios
### 初步demo
- axios.vue
# Element-UI
- 安装`npm i element-ui -S`
- main.js 配置
```import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
```
## helloWord
hellow.vue