Navicat Premium 11.2.17激活(VUE 知识点总结)

一 vue 特色 https://cn.vuejs.org/v2/guide/

双向数据绑定

优点：

二. vue指令

2.1. v-model 双向数据绑定

2.2.v-for 数组，对象，数值 最后一位是索引

2.3.v-bind 绑定属性

简写：

2.3.1样式的使用

使用class样式

使用内联样式

注意：font-size这样的一定要加 （‘ ’）

1. 直接在素上通过 的形式，书写样式对象

2. 将样式对象，定义到 中，并直接引用到 中

3. 在 中通过数组，引用多个 上的样式对象+ 在data上定义样式：

2.4.v-html 将含有标签的字符串转化成为标签

2.5.v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容，会被覆盖

2.6.v-show 显示和隐藏（） true显示 false 隐藏 可以判断 可以赋值

2.7.v-if 隐藏：不会渲染该标签 相当于js中的if

2.8.v-once 不会跟着改变的值

2.9.v-cloak {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容

2.10 v-on 事件

简写：

用 KeyCode

可以直接写键盘码值或用自己的名称，替换可以keyCode

组合版（单按a,b，c）

鼠标修饰符：

右键单击不出菜单栏，出效果

3.表单

表单修饰符：

4.网址

4.1. vue-resource发送请求步骤

4.2.

//可以代替get和post

全局配置 htpp://…/api/1.html

4.3.

4.3.1.

4.3.2. axios

// 发送 GET 请求（默认的方法）

// 为给定 ID 的 user 创建请求

// 可选地，上面的请求可以这样做

4.3.3.

4.3.4.在请求或响应被 then 或 catch 处理前拦截它们。

如何使用proxyTable

5.生命周期函数（钩子函数）

八个钩子函数

执行了destroy操作，原来样式保留，后续就不再受vue控制了。

6.computed和watch，methods

、和之间的对比

1. (多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作属性来使用，逻辑简单。

2. 方法表示一个具体的操作，主要书写业务逻辑；

3. (一个值变化，影响到多个结果改变)一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化（watch监控路由对象‘$route’），从而进行某些具体的业务逻辑操作；可以看作是和的结合体；

计算属性 computed (多个值变化，影响到一个结果) 原来没有属性（结果），创建可计算属性（get/set,一个默认get体）

侦听属性 watch（变化的值） (一个值变化，影响到多个结果改变) 检测以有属性

7.vue实例的简单属性和方法

属性

方法

1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

其他属性和方法（组件）

8.自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定

1.0版 vue过滤器

2.0版本后，1.0过滤器都废弃，都需自定义
自定义过滤器

注意：过滤器不能用于v-model 等

自定义指令

8.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项注册局部自定义指令。

简写指令：

8.2、钩子函数：

指令定义函数提供了几个钩子函数（可选）：

8.3、钩子函数的参数：(el, binding, vnode, oldVnode)

全局 简写：（bind update）

局部

自定义键盘信息 只有全局

vue.js怎样移除绑定的事件

第一种方法一定要加（）

第二种方法

然后在data里添加unbind=false属性，需要解绑的时候将其设置为true

9.组件（创建的时候可以用驼峰，使用的时候用- myCom ）
组件除了没有el 和 data 变成函数之外,其他的跟new vue一样，还多了一个template,template就相当于new vue的视图

9.1 全局组件

创建模板 ：template(如果tempalte内容复杂，可以创建模板）

9.2 局部组件(也可以创建模板,这里没有演示，更全局方法一样）局部组件创建 方法1 Vue.extend({})

局部组件简写应用：

2.局部组件创建 方法2 直接写在compontents里面

3.局部组件创建 方法3 使用{}

局部组件简写应用：

9.2.1名称的使用
组件挂载名称========>页面使用
myCom

mycom

9.3组件传参

https://segmentfault.com/q/79096

如果你想看到错误，你要用vue的非压缩版

2.子组件向父组件传递参数（还可以传递函数）===》$emit/自定义事件方式

事件绑定机制：父组件通过自定义事件的方式向子组件传递方法（@mymsg=“show”），子组件用this.$emit()接受(this.$emit(fun,参数1，参数2))，参数可以是子组件的，顺便传给父组件，实现子组件向父组件传值

}
})

3.组件之间相互传参 原生事件法

5. native 子组件上添加事件（父组件），触发事件，没有.native无法触发无法在组件直接使用事件，需要加修饰符来实现 根素上监听原生事件
   （把vue组件转化成一个普通的HTML标签，并且对普通的HTML标签是没有任何作用的）

6.为什么组件里的data是函数？
在组件中，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。
data为对象的话会报错，为了理解这种机制，我们假设data为一个对象，那么这同一个对象有可能被很多实例共享，一个实例改变其它也会跟着变，这明显是不对的。而通过data函数，每新建一个实例，都会调用data来return一组新的原始数据。

7. 插槽v-sort （3种）https://segmentfault.com/a/96217?utm_source=tag-newest

   slot以前2.6.0以后v-slot,vue3以前的slot被废弃

10.组件的切换效果

10.动画

10.1使用过渡类名

1. HTML结构：
   使用name=”fade”属性，来设置多个动画的名称

2. VM 实例：
   // 创建 Vue 实例，得到 ViewModel
   var vm = new Vue({
   el: ‘#app’,
   data: {
   isshow: false
   },
   methods: {
   myAnimate() {
   this.isshow = !this.isshow;
   }
   }
   });
   2.定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
transition: all 0.2s ease;
position: absolute;
}

10.2 使用第三方 CSS 动画库
duration：过渡持续时间 (以毫秒计)

https://www.cnblogs.com/cntian/p/13292041.html
注意：vue 和 animate.css 版本兼容性问题导致动画不起作用
Vue 官网引用的是 animate.css 3.5 版本
不能引用 animate.css 最新版本 例如：(4.0)

yarn add animate.css（添加）/ yarn remove animate.css(删除）
https://blog.csdn.net/yunchong_zhao/article/details/

Vue-cli

1. 安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2

2. 导入
   //引入animate.css
   import animated from ‘animate.css’
   //使用animated
   Vue.use(animated)

   3.重新启动项目 npm run serve / yarn serve

   4.按官网规则使用

https://www.worldlink.com.cn/osdir/animatecss.html
https://www.cnblogs.com/fang-1207/p/animationfang.html

1. 导入动画类库：

2. 定义 transition 及属性：

注意：同时使用过渡和动画

但是，在一些场景中，你需要给同一个素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
https://www.haoht123.com/2330.html

10.3使用动画钩子函数（半场动画）
https://blog.csdn.net/weixin_/article/details/
v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
v-on:enter=“enter”入场过程中执行的方法
v-on:after-enter=“afterEnter”入场后执行的方法
v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消）进入过渡被打断时
v-on:before-leave=“beforeLeave”离场动画之前执行beforeLeave方法
v-on:leave=“leave”离场动画过程中执行的方法
v-on:after-leave=“afterLeave”离场结束后执行的方法
v-on:leave-cancelled=“leaveCancelled”离场动画取消时执行的方法离开过渡被打断时

1. 定义 transition 组件以及三个钩子函数：

10.4 可以通过 appear 特性设置节点在初始渲染的过渡（页面入场效果）

• {{item}}
• 10.5 过渡模式 in-out：新素先进行过渡，完成之后当前素过渡离开。 out-in：当前素先进行过渡，完成之后新素过渡进入。

  <button @click=“md=‘aa’”>a
  <button @click=“md=‘bb’”>b
  <button @click=“md=‘cc’”>c

  10.6 v-for 的列表过渡

  1. 定义过渡样式：
  2. 定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

  3. 定义 VM中的结构： // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: ‘#app’, data: { txt: ”, list: [1, 2, 3, 4] }, methods: { add() { this.list.push(this.txt); this.txt = ”; } } });

  10.7 列表的排序过渡

  默认转化为span，通过tag属性转化成为其他标签

  组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 特性，它会在素的改变定位的过程中应用。
  和 结合使用，能够让列表的过渡更加平缓柔和：
  .v-move{
  transition: all 0.8s ease;
  }
  .v-leave-active{
  position: absolute;
  }

  11.路由 https://router.vuejs.org/zh/

  什么是路由（https://blog.csdn.net/aaaaa1994/article/details/）

  1. 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

  2. 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现.

  3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

  11.1在 vue 中使用 vue-router

  1. 导入 vue-router 组件类库：
  2. 使用 router-link 组件来导航

  登录
  注册

  3. 使用 router-view 组件来显示匹配到的组件

  4. 创建使用创建组件
     // 4.1 使用 Vue.extend 来创建登录组件
     var login = Vue.extend({
     template: ‘

     登录组件

     ’
     });

     // 4.2 使用 Vue.extend 来创建注册组件
     var register = Vue.extend({
     template: ‘

     注册组件

     ’
     });

  5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
     // 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
     var router = new VueRouter({
     routes: [
     { path: ‘/login’, component: login },
     { path: ‘/register’, component: register }
     ]
     });

  6. 使用 router 属性来使用路由规则
     // 6. 创建 Vue 实例，得到 ViewModel
     var vm = new Vue({
     el: ‘#app’,
     router: router // 使用 router 属性来使用路由规则

  简写：router
  });

  11.2 设置路由高亮和重定向

  1. .router-link-active{
     color: red;
     font-weight: 800;
     font-style: italic;
     font-size: 80px;
     text-decoration: underline;
     background-color: green;
     }
     2…myactive {
     color: red;
     font-weight: 800;
     font-style: italic;
     font-size: 80px;
     text-decoration: underline;
     background-color: green;
     }

  var routerObj = new VueRouter({
  routes: [
  // { path: ‘/’, component: login },
  { path: ‘/’, redirect: ‘/login’ }, //路由重定向/的页面
  { path: ‘*’, redirect: ‘/login’ }, //路由重定向所有页面
  { path: ‘/login’, component: login },
  { path: ‘/register’, component: register }
  ],
  linkActiveClass: ‘myactive’//统一设置一个class,二级路由也可以用
  })

  3. const router = new Router({
     routes: [
     {
     path: “/”,
     name: “首页”,
     redirect: ‘/home’
     },
     {
     path: ‘/login’,
     name: ‘Login’,
     component: Login
     },
     { path: ‘*’, component: NotFoundComponent }
     ],
     linkActiveClass: “active-router”,
     //模糊匹配 /user /user/1 /user/aa=1
     linkExactActiveClass: “exact-router”//精准匹配 /user
     })
     https://blog.csdn.net/meikaied/article/details/

  11.3使用别名(alias)和给router-link修改原来的默认标签

  Alias
  {path:”/login”,component:Login,alias:’/lo’}

  router-link原来的默认标签是,通过 tag=”span” 修改
  登陆页面

  11.4 设置路由切换动效

  11.5 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
  如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
  const router = new VueRouter({
  mode: ‘history’,
  routes: […]
  })

  11.6 在路由规则中定义参数（动态路由）

  Query:
  登录
  1.在规则中定义参数：
  { path: ‘/login’, component: login }

  2. 通过 来获取路由中的参数：
     var register = Vue.extend({
     template: //this可以加可以不加

     });

  //methods里必须加this

  Params:
  登录

  1. 在规则中定义参数：
     { path: ‘/register/:id’, component: register }
  2. 通过 来获取路由中的参数：
     var register = Vue.extend({
     data(){
     return{
     aid:””
     }
     },
     created(){
     this.show();
     },
     methods:{
     show(){
     //console.log(this.$route.params.id);this.aid=this.$route.params.id;//必须加this
     }
     },
     template:
     //this可以加可以不加
     });

  11.7 $route和$router路由跳转https://www.bianchenghao.cn/p/fa0b5d
  https://www.cnblogs.com/hwldyz/p/9204346.html
  1 $route
  1.1 $route表示(当前路由信息对象)表示当前激活的路由的状态信息，包含了当前URL解析得到的信息，还有URL匹配到的routerecords（路由记录）。路由信息对象：即$route会被注入每个组件中，可以利用它进行一些信息的获取。
  1.$route.path\ast \ast 字符串，对应当前路由的路径，总是解析为绝对路径，如“/foo/bar“。\ast \ast 2.$route.params
  一个 key/value 对象，包含了 动态片段 和 全匹配片段，
  如果没有路由参数，就是一个空对象。
  3.$route.query
  一个 key/value 对象，表示 URL 查询参数。
  例如，对于路径 /foo?user=1，则有 $route.query.user==1，如果没有查询参数，则是个空对象。\ast \ast 4.$route.hash
  当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。锚点
  5.$route.fullPath\ast \ast 完成解析后的URL，包含查询参数和hash的完整路径。\ast \ast 6.$route.matched
  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  7.$route.name当前路径名字\ast \ast \ast \ast 8.$route.meta 路由信息

  1.2. route object 出现在多个地方:
  (1)在组件内，即 this.$route
  (2)在 $route 观察者回调内 router.match(location) 的返回值
  (3)导航守卫的参数：
  router.beforeEach((to, from, next) => {
  // to 和 from 都是 路由信息对象
  })
  watch: {
  $route(to, from) {
  // to 和 from 都是 路由信息对象
  }
  }

  2. $router对象
     全局的路由实例，是router构造方法的实例。
     在 Vue 实例内部，你可以通过 $router访问路由实例2.1全局挂载路由实例//全局注册的路由Vue.use(VueRouter)2.2路由实例方法pushhttps://blog.csdn.net/weixi{n}_{3}8199437/article/details/83030010//字符串this.$router.push(‘home’)// 对象
     this.$router.push(path{:}^{\prime }hom{e}^{\prime })//命名的路由this.$router.push({ name: ‘user’, params: { userId: 123 }})// 带查询参数，变成 /register?plan=123
     this.$router.push(path{:}^{\prime }registe{r}^{\prime },query:plan{:}^{\prime }123^{\prime })push方法其实和<router-linkto=“...“>是等同的。注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。2.2路由实例方法go//页面路由跳转前进或者后退this.$router.go(-1) // 后退
     this.$router.go(0)//刷新this.$router.go(1)//前进
     this.$router.go(3)//前进3步
     2.3 路由实例方法replace
     //push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，不会向 history 栈添加一个新的记录

  05

  // 一般使用replace来做404页面
  this.$router.replace(’/’)

  11.8 使用 属性实现路由嵌套（二级路由）
  https://www.cnblogs.com/lwming/p/11282674.html

  Account

  11.9命名路由
  有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

  const router = new VueRouter({
  routes: [
  {
  path: ‘/user/:userId’,
  name: ‘user’,
  component: User
  }
  ]
  })
  要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

  User
  这跟代码调用 router.push() 是一回事：

  router.push({ name: ‘user’, params: { userId: 123 }})
  这两种方式都会把路由导航到 /user/123 路径。

  11.10响应路由参数的变化
  提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

  复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

  const User = {
  template: ‘…’,
  watch: {
  ‘$route’ (to, from) {
  // 对路由变化作出响应…
  }
  }
  }
  或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

  const User = {
  template: ‘…’,
  beforeRouteUpdate (to, from, next) {
  // react to route changes…
  // don’t forget to call next()
  }
  }

  11.11 命名视图实现经典布局（组件复用）

  1. 标签代码结构：
  2. JS代码：
  3. CSS 样式：

  11.12路由进阶https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

  路由懒加载
  https://www.cnblogs.com/yzq-fighting/p/7731545.html https://blog.csdn.net/mzrxLXR/article/details/81484676

  使用Bootstrap
  https://www.cnblogs.com/shengnan-2017/p/8094134.html

  12.vue-cli 2.0
  https://cli.vuejs.org/guide/installation.html—-》3.0
  https://www.cnblogs.com/blcorder/p/12015715.html—》4.0

  1.只在本电脑安装一次
  1.安装nodejs（https://nodejs.org/en/） 验证 node -v(version) 使用npm
  2.安装vue npm install vue
  3.安装vue-cli npm install vue-cli -g 验证 vue -V 使用vue

  2.多次使用 ===>创建工程
  本身集成很多项目模板:
  simple 个人觉得一点用都没有
  webpack 可以使用(大型项目)
  Eslint 检查代码规范，
  单测试
  webpack-simple 个人推荐使用, 没有代码检查 √

  3.想要安装 vue-resource====》使用

  4 vue-cli使用插件
  –save 和 –save -dev 的区别
  https://blog.csdn.net/sunhuaqiang1/article/details/

  1.按装插件 npm install vue-resource –save(生产环境)/–save -dev（开发环境） /空
  2.先引入，在use
  import vueResource from ‘vue-resource’
  Vue.use(vueResource)
  3.看文档，使用

  5.变化
  index.html ====>Index.vue

  axios

  https://www.kancloud.cn/yunye/axios/

  keep-alive https://www.bianchenghao.cn/p/4b55d312d297
  https://juejin.im/post/5a69894ab0f12f2

  时间插件
  http://momentjs.cn/
  Npm install moment -S import moment from “moment”
  import moment from ‘moment’
  Vue.filter(‘dateFormat’, function (dataStr, pattern = “YYYY-MM-DD HH:mm:ss”) {
  return moment(dataStr).format(pattern)
  })

  配置全局请求网址前半部分
  Vue.http.options.root = ‘http://vue.studyit.io’;

  Mock数据
  Iview 主要是写后台管理系统
  Reset-css https://www.npmjs.com/package/reset-css
  import “reset-css”
  初始化样式设置

  环境配置
  1.Nodejs
  2.mySQL https://dev.mysql.com/downloads/mysql/5.1.html#downloads
  配置和安装 https://blog.csdn.net/_/article/details/#%E5%85%88%E5%8E%BB%E5%AE%98%E7%BD%91%E4%B8%8B%E8%BD%BD%E7%82%B9%E5%87%BB%E7%9A%84MySQL%E7%9A%84%E4%B8%8B%E8%BD%BD%E2%80%8B
  初始账号和密码 root@localhost: >arjf*ayq30S

  其他
  设置密码https://blog.csdn.net/numberseven7/article/details/
  查看是否有sql服务 sc query mysql
  删除重新创建https://www.cnblogs.com/zhaocundang/p/8540746.html
  端口占用https://blog.csdn.net/_/article/details/
  2059错误链接https://blog.csdn.net/Long/article/details/

  3.Navicat Premium 12
  4.启动服务node app.js
  5.构建页面 写项目

  安装yarn(https://classic.yarnpkg.com/zh-Hans/docs/usage）
  npm install -g yarn
  查看版本：yarn –version

  Vue 如何使用 swiper
  （npm命令https://blog.csdn.net//article/details/）

  1. 6.0.0 版本以上，会存在一些功能失效的问题
     以下是使用规则：https://github.com/surmon-china/vue-awesome-swiper

  2.换成低版本
  你已经运行了下面命令
  npm install swiper vue-awesome-swiper –save

  or

  yarn add swiper vue-awesome-swiper

  解决：yarn add swiper@^5.2.0 npm install swiper@^5.2.0 –save

  在 main.js中添加
  import VueAwesomeSwiper from ‘vue-awesome-swiper’
  import ‘swiper/css/swiper.css’
  Vue.use(VueAwesomeSwiper, /* { default global options } */)

  使用：

  
  
  

  http://a.itying.com/upload//25.jpg
  循环加载图片https://www.cnblogs.com/SamWeb/p/8519735.html

  Axios
  http://www.axios-js.com/
  https://www.bianchenghao.cn/p/e36956dc78b8
  1.安装
  npm install axios
  cnpm install axios
  yarn add axios
  2.在 mian.js 中引入
  import axios from ‘axios’
  3.在 mian.js 中配置(还有其他配置，这里没讲)
  Vue.prototype. h t t p = a x i o s 4. 使 用 t h i s . http= axios 4.使用 this. http=axios4.使 Navicat Premium 11.2.17激活用this.http
  methods: {
  show() {
  this.$http({
  method: ‘get’,
  url: ‘/user’,
  data: {
  name: ‘virus’
  }
  })
  }

今天的文章
Navicat Premium 11.2.17激活(VUE 知识点总结)分享到此就结束了，感谢您的阅读。