VUE

Vue是一套构建用户界面的渐进式框架。

使用npm命令创建vue项目的步骤

1. npm是依赖node的内部命令，所以应该先安装node；
2. npm安装vue：npm  i  vue
3. 安装脚手架：npm  i  vue-cli  -g
4. 初始化项目：vue  init  webpack  xxx
5. 初始化项目名、项目描述、作者等信息
6. ESLink、e2e这两项选No，其他项选Yes
7. 进入项目文件夹(cd xxx)，安装依赖的包：npm i
8. 运行项目：npm run dev

Vue指令

v-text：展示元素的文本内容

v-model：在表单元素上创建双向数据绑定，随表单元素类型不同而不同。

v-html：可以渲染有DOM结构的字符串

v-once：后面没有表达式，表示这个元素只渲染一次

v-for：循环语句，要想循环谁就把v-for加到谁身上

v-if：条件语句

v-show：是否显示，表达式为true时显示，为false时不显示

v-on：给元素绑定事件，可缩写为@

<button v-on:click=’del’>删除</button>

<button @click=’del’>删除</button>

v-bind：给元素绑定属性，可缩写为:（冒号）

     <img  v-bind:src=’./1.jpg’>

<img  :src=’./1.jpg’>

v-cloak：给所有行间有v-cloak的元素添加样式，style样式里的写法：

[v-clock]{

width:100px;

}

过滤器filter

过滤器在实例中是一个filters属性，属性值是一个大对象，对象里是一个个的函数；过滤器使用管道符进行使用。

myName里的val是文本框输入的内容，str是过滤器传过来的参数；连续使用多个过滤器val值是上一次的返回值。

计算属性computed

计算属性在实例中是一个computed属性，属性值是一个大对象，对象里是具体的计算属性。如：计算属性msg，里面有get()和set()两个函数；也可以简写成msg(){}，这种表示只有get，没有set。

监听属性watch

计算属性是只要依赖的数据任何一个发生变化就触发；

监听属性是只有监听的数据发生变化才触发。

样式绑定

自定义指令

生命周期

组件

组件可以扩展HTML元素，封装可重用的代码；使用组件的步骤：1、声明组件，2、注册组件，3、在实例渲染的DOM中使用组件。

组件的使用步骤

1. 声明一个全局组件

Vue.component(‘组件名’,{

          template:’<h2>这是一个全局组件</h2>’

})

1. 声明一个局部组件

let title = {

          template:’<h2>这是一个全局组件</h2>’

}

组件的数据传递

1. 父传子
   • 父组件通过属性将数据传递给子组件；
   • 子组件不可以修改父组件传递过来的数据；
   • 如果确实需要修改父组件中的数据，我们可以给子组件设置data，在mounted中把从父组件接收到的数据复制一份赋给自己的data。
2. 子传父

①子向父传递数据通过自定义事件来实现；在子组件的行内定义一个事件，这个事件根据自己的业务逻辑来触发；通过this.$emit(‘自定义事件名称’,……传递的数据)来触发自定义事件。

②若传给父组件的是一个引用数据类型，那么父组件修改这个数据时，会把子组件的这个数据修改掉。

组件间方法的调用

1. 父调用子
   • 通过$refs
   • 通过父组件的this.$children
2. 子调用父
   • 通过this.$emit
   • 通过this.$parent

父子组件间渲染顺序

父子组件之间，子组件先渲染完毕，父组件最后渲染完毕。Mounted是子组件先执行，created是父组件先执行。

在组件上使用v-model

v-model自动给子组件传递了一个value属性，还绑定了一个自定义事件。

slot插槽

<slot></slot>这种没写name属性的身上，其实带着一个默认的name属性，值是default。Slot会把这个组件包含的结构整个拿过来。

eventBus

vue-router

router-view，router-link是vue-router提供的全局组件。

路由的使用步骤

1. 先声明要使用的组件；
2. 根据写好的组件编写路由映射表；
3. 创建一个router实例，把路由映射表注入到这个实例中；
4. 把router实例注入到根实例VM中。

Router-link

<router-link  to=’/home’  tag=’button’  active-class=’cur’  exact-active-class=’exactClass’ >首页</router-link>

1. Router-link标签上的tag是修改要展示的标签元素的类型，不写默认a标签；
2. Active-class是控制当前选中状态的类名的，后边跟着的值就是选中状态下的类名；不写这个属性，默认选中的类名就是‘router-link-active’;
3. Exact-active-class精确（会把传的一些参数认成不同路径）匹配路由；不写这个属性，默认选中的类名就是‘router-link-exact-active’；
4. Query这个单词是vue-router规定的；后边跟着的是个对象，router会把对象中的每一项拼接到路由后边；用法如下：

<router-link  :to=”{path:’/home’,query:{name:’zc’,age:27}}”>首页</router-link>

1. params这个单词是vue-router规定的；它把对象中的参数当做路径拼接到之前的路径上；这个地方不能再用path跳转，必须用name（这个属性名是固定的）跳转；用法如下：

<router-link  :to=”{name:’qqq’,params:{name:’zc’,age:27}}”>首页</router-link>

编程式路由切换

除了使用router-link创建a标签来定义导航链接外，我们还可以借助router的实例方法，通过编写代码来实现路由跳转。

$route中存的都是咱们需要的参数；$router中存的都是跳转的方法；下面是几种常用方法：

1. this.$router.go(-1); // go负几就是往回跳几次；如果找不到就不跳，仍然在当前页；
2. this.$router.back();
3. this.$router.push({path:’/list’,query:{name:’zc’}}); // 在路由历史中新增一次跳转
4. this.$router.push(‘/list’);
5. this.$router.replace({path:’/list’,query:{name:’zc’}}); //当前路由在哪，replace只是把当前路由替换掉了；在点回退按钮时，是从当前路由往回跳转的。

路由的重定向

路由的嵌套

多视图

Vuex

Vuex的使用步骤

Vuex是一个专为Vue应用程序开发的状态管理模式。使用步骤如下：

1. 先创建一个store仓库；
2. 把store实例注入到根实例里。

Vuex的组成

state：存放数据的，Vuex里的唯一数据源；

getter：Vuex里的计算属性；

mutation：改变状态；通过commit进行提交；

action：类似于mutation，但它不是直接改变状态，而是通过调用mutation来改变状态。