vue.js学习文档-自己学习的时候整理的

安装

安装插件：

node.js 下载地址：http://nodejs.cn/

vue.js

下载地址：https://cn.vuejs.org/v2/guide/installation.html
官方文档：https://cn.vuejs.org/v2/api/
Eclipse和Idea要安装Vue.js插件
CDN:<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”> </script>

创建一个Vue项目

前提准备

下载插件

安装淘宝镜像：npm i cnpm -g
下载vue-cli: cnpm i vue-cli -g  (2)
			npm i @vue/cli -g  (3/4)（查看vue应用程序模板：vue -list）
下载webpack：npm i webpack -g
下载webpack-cli: npm i webpack-cli -g
热部署：webpack --watch
下载vue-router（前端路由）: npm i vue-router -D
下载element-ui: npm i element-ui -S
下载nodesass: cnpm i sass-loader node-sass -D
下载axios: npm i axios -S
下载vue-axios: npm i vue-axios -S
下载vuex：npm i vuex -S
下载qs: npm install qs 数据序列化

创建vue项目

1.vue init webpack +项目名（脚手架2）
vue create + 项目名（脚手架3）（C:\Users\86136\配置文件 ）
2.Cd (项目名)
3.下载所需要的插件
4.安装依赖：npm i
5.启动项目：npm run dev（2）
npm run serve (3)
6.退出项目：Ctrl+c

vue ui: 打开项目管理器
环境配置：
%SystemRoot%\system32;
C:\Windows\System32

vue属性

差值表达式：{{ }}

el:用于挂载要管理的元素；
data:定义数据；
methods:定义方法；
computed:计算属性；有缓存，多次调用，只用执行一次
watch:监听器
watch监听单个属性，基本数据类型是简单监视，复杂数据类型是深度监视

filters:过滤器

Components:组件

语法糖写法：

组件内部也有data和方法（调不到实例里面的属性），并且data必须是函数

组件内部传递参数：

子传父：自定义事件this.$emit(‘自定义事件名’,参数)

组件化开发：

组件之间的通信;

组件的插槽：使组件具有更强的扩展性

具名插槽：

作用域插槽：
父组件替换插槽的标签，但是内容由子组件提供

.join(‘ * ’):以什么连接两个元素

Vue指令

v-once : 只执行一次，不能改变；
v-html : 解析html标签;
v-text ： 约={{}}
v-pre ：原封不动展示内容；
v-cloak : 设置解析之前的样式；

<style>
    [v-click]{
        display: none;
    }
</style>

v-bind : 动态绑定；
绑定class：v-bind:class=”{key(类名):value（bollean）}”
绑定style : v-bind:style=”{key（属性名）:‘value(属性值)’}”

v-on:事件绑定
参数：
直接调用函数名称：默认传递参数event
传递多个参数：最后一个必须是event而且写法必须是$event
修饰符：
.stop： 阻止冒泡 =event.stopPropagation（）
.prevent: 阻止默认行为 =event.preventDefault()
.{键帽}：只有按指定键帽才进行回调
.once: 只触发一次回调

v-if:
v-else-if:
v-else:

v-show:是否渲染，为false时只是隐藏，而v-if是直接删除

v-for:遍历数组
绑定（：key=“item”）更高效的更新虚拟DOM

v-model:数据和元素双向绑定
原理：1.v-bind绑定一个value属性
2.v-on绑定input事件
修饰符：
.lazy 让数据失去焦点或者回车才会更新
.number 把输入框内容转换成数字类型
.trim 去内容两端空格

响应式编程

Push（）在最后插入元素
pop（）删除最后一个元素
Shift（）删除第一个元素
Unshift（）在最前面添加元素
Splice（索引值，动几个数，添加的数）删除/插入/替换
Sort（）排序
Reverse（）反转
Vue.set（要修改的对象，索引值，修改后的值）

Vue.delete(要修改的对象，索引值)

Runtime-compiler

Template>ast(抽象语法树)>render（函数）>vdom（虚拟dom）>UI(真实dom)
Runtime-only(性能更高，代码量更少)
render>vdom>UI

箭头函数

（{}里面只有一行代码）
两个参数：Const sum=function(num1,num2){
return num1+num2
}
Const sum=(num1,num2)=>num1+num2
一个参数：Const sum=num=>num* num
没有参数：const a=()=>console.log(‘你好’)

箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
this对象的指向是可变的，但是在箭头函数中，它是固定的。

Router

$router:获取router对象
$route:获取当前active对象

router-link标签属性：（默认渲染为a标签）
to: 用于指定跳转的路径；
tag:指定router-link渲染成什么组件

replace:不会留下history记录，返回键不可用（直接使用）

active-class: 修改router的class属性名称（两种方式）

路由代码跳转：

动态路由：
方法1：

<router-link :to="{path: '/profile',query: {name: 'why',age: 13,height: 20}}" active-class="active" >档案</router-link>

方法2：

路由懒加载：用到时在加载

component: () => import('../views/user.vue')

嵌套路由：

导航守卫：

router.beforeEach((to,from,next)=>{
  //从from跳转到to
  document.title=to.matched[0].meta.title
  next()
})

Keep-alive: <keep-alive><router-view/></keep-alive>

保证切换时，组件不会频繁被销毁，频繁被创建

只有使用keep-alive标签才能使用activated/deactivated函数

Keep-alive属性：
Include：包含谁
exclude：排除在外

Promise

第一种写法:

第二种写法：

链式调用:

发送两次请求，同时满足才能执行:

Vuex

Vuex是一个专为vue.js开发的状态管理模式
把需要多个组件共享的变量全部存储在一个对象里面，然后把这个对象放在顶层的vue实例中，让其他组件可以使用，（响应式的）

state：放状态信息 this.$store.state.属性：访问状态

getters:对数据进行变化（判断或运算）

mutations: this.$store.commit(‘mutation中的方法’)：修改状态（唯一能修改state的状态）
mutation里面的方法必须是同步方法

Mutations：命名写法新建一个mutations-type.js

在使用的文件中引入mutations-type.js

App.vue文件运用

Index.js文件运用

actions:与mutation相似，替换mutation进行异步操作的

modules:

axios

Params:只能用在方法是get上，post方法用的是data