vue2学习

        1. 在谷歌浏览器扩展程序安装vue_devtools

2.vue介绍：数据驱动视图，双向书绑定。底层原理是mvvm：view、model、viewmodel

3.基本使用步骤：

4.内容渲染指令：

v-text=：会覆盖元素的内容,eg:<p v-text="gender">性别</p>,传值后性别会被覆盖。

{{}}：插值表达式，不能用在属性节点上，只能放在内容节点。

=v-html：把带标签的内容渲染成html内容。

v-bind:：元素属性绑定，可以简写为:。如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如： <div :title="'box' + index">这是一个 div</div>

v-on:：事件绑定。可简写为@。要获取事件可使用参数$event。

@keyup：键盘监视器

v-model=：数据双向绑定，适用于input、textarea、select.修饰符包括.number,trim,lazy

v-show：动态为元素添加或移除 `display: none` 样式；v-if：动态创建或移除元素

v-if,v-else-if,v-else：条件渲染

v-for：列表循环渲染

filters:私有的过滤去标志；Vue.filter()公有的过滤器

watch:侦听器。方法格式的需要内容变化才能触发；对象格式的持续侦听。参数有：immediate、deep

//方法1
info:{
      handler(newVal,oldVal){
      console.log(newVal);
                     
          $.get('https://www.escook.cn/api/finduser/'+newVal.name,function(result){
          console.log(result);
        })
      },
    //进入页面就触发一次
    immediate:true,
    //监听对象的元素变化
    deep:true
},
//方法2
'info.name'(newVal){
console.log(newVal);
}

5.安装vue-cli

安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
cnpm install -g webpack

查看是否安装成功
vue -V

6.使用vue-cli

vue create 项目名称：按照步骤操作

选择Manually select features，选择css pre-processors,不选Linter/formatter（容易报错），暂时选择2.x，选择less，选择In dedicated config files,下一步选择Y/N。开始创建工程。

目录结构：

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
 main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
 App.vue 是项目的根组件。

main.js的$mount("#app")相当于el:‘#app’

7.使用组件

 可选插件：Path Autocomplete

// 导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    }

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。

组件属性：props:初始值。 props: ['init'], props:{init:{default:0}}

防止样式冲突，style里面添加scoped

当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/

组件生命周期：组件创建、组件运行、组件销毁：new vue()-beforeCreat-created-beforeMount-mounted,beforeUpdate-updated,beforeDistroy-distroyed,以上依次执行

 

数据共享：父组件向子组件共享数据需要使用自定义属性；

 子组件向父组件共享数据使用自定义事件。

在vue2.x中，兄弟组件之间数据共享的方案是EventBus

Dom引用：$refs，$nextTick(cb)

数组方法：arr.some((item, index) => { }): 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环；arr.every(item => item.state)循环判断状态；arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值) 累加器

安装axios包：npm i axios -S

动态组件：<component :is="comName"> 外层使用<keep-alive>标签，具备两个生命周期 

keep-alive属性include：指定需要缓存的组件；属性exclude 指定哪些组件不需要被缓存。二者不能同时使用。

组件可定义属性：name:'xx'

插槽(slot)：<slot name="default"> 如果省略了 slot 的 name 属性，则有一个默认名称叫做 default。v-slot can only be used on components or <template>

在调用插槽时默认情况下，在使用组件的时候，提供的内容都会被填充到名字为 default 的插槽之中，如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令。 v-slot: 指令的简写形式是#，带名字的插槽叫做具名插槽。在封装组件时，为预留的 <slot> 提供属性对应的值，这种用法，叫做 “作用域插槽”。

子组件
<slot name="default">
   <h6>插槽的默认内容(插槽的后备内容)</h6>
</slot>

父组件
<template #default>
    <p>插槽内容</p>
</template>

自定义指令：

私有指令：在Vue组件里面，可以使用directives节点，声明私有自定义指令。

directives: {
    //   color: {
    //     bind(el, binding, vnode) {
    //       el.style.color = binding.value;
    //     },
    //     update(el, binding, vnode, oldVnode) {
    //       el.style.color = binding.value;
    //     }
    //   }
    //如果bind和uodate的逻辑完全相同，可以采用对象格式简化自定义指令。
    color(el, binding) {
      el.style.color = binding.value;
    }
  }

全局自定义指令：在main.js里面使用Vue.directive定义。

//全局自定义指令
Vue.directive('color',function(el,binding){
  el.style.color=binding.value
})

main.js：Vue.config.productionTip = false 温馨提示，提示生产模式和开发模式。

Eslint：设置，搜索tabsize,都改成2；设置，文本编辑器，搜索format，Editor：format on save勾上；创建工程勾选Linter/Formatter，Eslint+Standard config，Lint on save

.eslintrc.js的rules设置规则。

axios配置：main.js配置，在每个 .vue 组件中要发起请求，直接调用 this.$http.xxx

import axios from 'axios'

// 全局配置 axios 的请求根路径
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 把 axios 挂载到 Vue.prototype 上，供每个 .vue 组件的实例直接使用
Vue.prototype.$http = axios

锚链接：哈希地址。前端路由：Hash地址与组件之间的对应关系

eg：window.onhashchange = ()=>{console.log(location.hash)}

Vue提供了一个官方的解决办法：vue-router

①安装vue-router包：npm i vue-router@3.5.2 -S

②创建路由模块：在src源代码目录下，新建router/index.js路由模块，

//router/index.js
//1. 导入Vue 和 VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router';
//2. 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)
//3. 创建路由的实例对象
const router = new VueRouter();
//4. 向外共享路由的实例对象
export default router

③导入并挂载路由模块：

//main.js
//导入路由模块，得到路由的实例对象
//在进行模块化导入的时候，如果给定的是文件夹，则默认导入该文件夹下的index.js
import router from '@/router';

new Vue({
  render: h => h(App),
  //vue项目，需要把路由实例对象进行挂载
  router
}).$mount('#app')

④声明路由链接和占位符

在App页面加入<router-view></router-view>作为占位符；使用<router-link to="/home">首页</router-link>设置链接

在路由模块(router/index.js)修改，导入需要的组件，设置routes。其中routes是一个数组，定义hash地址和组件之间的对应关系。其中redirect是路由重定向

//1. 导入Vue 和 VueRouter包
import Vue from 'vue'
import VueRouter from 'vue-router';

//导入需要的组件
import Home from '@/components/Home';
import About from '@/components/About';
import Movie from '@/components/Movie';


//2. 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

//3. 创建路由的实例对象
const router = new VueRouter({
  //routes是一个数组，定义hash地址和组件之间的对应关系
  routes: [{
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/movie',
      component: Movie
    },
  ]
});
//4. 向外共享路由的实例对象
export default router

嵌套路由：通过路由实现组件的嵌套展示，叫做嵌套路由

①模板内容中又有子级路由链接、②点击子级路由链接显示子级模板内容

在模板里面添加路由链接和路由占位符；在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则。

默认子路由：如果children数组中，某个路由规则的path值为空字符串，则这条路由规则，叫做“默认子路由”。同时将路由链接的tab1删掉。类似于于父路由直接添加redirect

children: [{
          path: '',
          component: Tab1
        },

<router-link to='/about'>tab1</router-link>

动态路由：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在vue-router中使用英文的冒号(:) 来定义路由的参数项。传到组件的this参数项里面，$route.params.id获取

this.$route:路由的参数对象；this.$router：路由的导航对象

可以为理由规则开启props传参：{path: '/movie/:id',component: Movie,props: true},

在组件的vue里面添加props: ['id']属性

this.$route.fupath：完整路径;path：不包含查询参数；query：查询参数

导航：在浏览器中，点击链接实现导航的方式，叫做声明式导航，例如:普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航；在浏览器中，调用API方法实现导航的方式，叫做编程式导航，例如:普通网页中调用location.href跳转到新页面的方式，属于编程式导航。
编程式导航：常用的API有

①this.$router.push('hash地址)：跳转到指定hash地址，并增加一条历史记录②this.$router.replace('hash 地址')：跳转到指定的hash地址，并替换掉当前的历史记录
③this.$router.go(数值 n)：调用this. $router.go()方法，可以在浏览历史中前进和后退，比如

this.$router.go(-1);但是如果后退的层数超过上限，则原地不动。➊$router.back()
在历史记录中 后退到.上一一个页面、②$router.forward() 在历史记录中前进到下一个页面。在行内使用编程式导航跳转的时候，this 必须要省略。

导航守卫：导航守卫可以控制路由的访问权限。

全局前置守卫：router.beforeEach(function(to, from, next) {}，其中/ to 表示将要访问的路由的信息对象、from 表示将要离开的路由的信息对象、next() 函数表示放行。

主题：修改main.js里面的vant引入方式（css->less）

import Vant from 'vant'
import 'vant/lib/index.less'

修改vue.config.js

const path = require('path')
const coverPath = path.join(__dirname, './src/assets/cover.less')

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        modifyVars: {
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${coverPath}";`
        }
      }
    }
  }
}

新建./src/assets/cover.less文件

@nav-bar-background-color: #007bff;
@nav-bar-title-text-color: white;
@nav-bar-title-font-size: 12px;

---------------------------------------------------------------------------------------------------------------------------------

更新2022年2月17日

切换镜像的工具nrm：

⑴安装：npm install nrm -g ，安装完成重启下电脑

⑵查看仓库nrm ls，带*的就是当前选中的镜像仓库

⑶指定镜像源：nrm use taobao

⑷测速：nrm test npm

命令使用：

# 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

使用v-text和v-html指令来替代`{{}}`,不会出现插值闪烁，当没有数据时，会显示空白

- v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染