Vue基础知识微笔记

一.建立搭建Vue 项目

1.在项目路径下输入命令行   npm install -g live-server

安装npm及服务

2.输入 live-server 启动服务器

 

3. 在项目路径下输入 npm init

4.按步骤输入实例项目内容（创建npm）

     1）package name: vue

     2)  description: Vue demo

     3)  author:  Zidee

     4）确认黄色部分无误

     5）Yes,成功创建并生成   package.json  文件

书写格式demo

 

5. 输入 live-server   启动服务器

6.v-if

7.v-show

8.v-if and v-show区别

     1.v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。

     2.v-show：调整css display属性，可以使客户端操作更加流畅。

9.v-for

10.computed中调用方法。并且赋给新的sortItems，不能改变data数据，需要重新命名

11.给对象赋值方式

12.v-text

  v-text="message"，取代双括号，优点在于用户体验，当网速不好时，不会先加载出{{message}}标签后加载。

13.v-html(不建议使用)

14.v-on

键盘码

http://blog.csdn.net/zhaozhbcn/article/details/38852583

 

15.v-model

1）简单的双向绑定

2）v-model.lazy     失去焦点触发双向绑定

3）v-model.number     必须为数字

4）v-model.trim     去空格

5）多选框绑定数组

6）单选框绑定   需要在data中定义sex属性

 

16.v-bind      可简写为“：”

     1）

     2）双向数据绑定+bind绑定class属性

     3）:class，：style

 

17.v-cloak，渲染完成后，才显示

18.v-pre，原样输出，不进行渲染

19.v-once，只进行一次渲染

20.Vue.directive    自定义指令

多个函数同时自定义

 

21.Vue.extend  扩展实例构造器

22.Vue.set

23.生命周期

     1）     beforeCreate:function(){

                     console.log("1. beforeCreate   初始化之前")；

}

     2）     created:function(){

                     console.log("2. created   创建完成")；

}

     3）     beforeMount:function(){

                     console.log("3. beforeMount   挂载之前")；

}

     4）     mounted:function(){

                     console.log("4. mounted   在挂载之后")；

}

     5）     beforeUpdate:function(){

                     console.log("5. beforeUpdate   数据更新之前")；

}

     6）     updated:function(){

                     console.log("6.updated   被更新后")；

}

     7）     beforeDestory:function(){

                     console.log("7. beforeDestor   销毁之前")；

}

     8）     destoryed:function(){

                     console.log("8. destoryed   销毁之后")；

}

     9)   

 

24.Template模板（当前介绍3种方式）

25.component  组件

1）必须在vue作用域内才能生效，全局，当前只能创建一个

2）局部，可创建多个

3）

4）

5）

6）父子

7）

26.propsDataOption

27.computed option

28.methodsoption

29.watchoption 监控数据方法一二

方法二

30.mixinsOption   不改变构造函器，在构造器进行混入

全局混入最先执行，混入后执行，原生最后执行

31.改变“{{ }}”   变为“${ }”

32.扩展方法：

     1）$mount（），挂载方法

     2）$destroy，卸载方法

     3）$forceUpdate()更新方法（刷新）

     4）$nextTick数据修改方法

33.slot

四.VUE-cli

目录讲解

1.使用命令生成dist目录。随后可以上传到服务器

2.css只对当前文件起作用+scoped属性

五、vue-router

1.如没安装vue-router

2.开启服务

3.新建新的页面

4.在index.js中引入

5.在APP.vue中添加对应导航router-link，类似a标签

6.子页面的嵌套，Hi的子页面Hi1,Hi2

1）新建Hi1，Hi2页面

2）Hi页面中加上router-view标签

3）在APP.vue 中加入导航属性

4）在index.js中加入

7.router传参

1）单纯传name值（很少用）

2）通过name传参（name需一样）

3）多个router-view使用，用name识别

8.通过URL传参

1）

2）在APP.vue下传参

3）在params下接收

4）添加正直表达式在后面直接加（）

9.路由重定向 redirect

1）

2）返回时带参数

10.别名

1）注意：根目录不能用别名只能用重定向

11.过度效果 transition，out-in 先退出后进入，    in-out 先进入后退出

12、去掉路径上的#（默认是有#的，hash）（去掉时用history）

13.引出404页面（自定义404）

14.路由的两个钩子函数{     next()必须写，不写不会跳转，next()中可以直接填入跳转的路径path:'/'     }

1）在index.js中写入

2）在模板.vue中写入

15.vue前进+后退+指定页

六.Vuex

1.安装vuex     npm install vuex --save

2.数据仓库 store.js

3.简化为“count”

1）方法一

2）方法二

3）方法三（推荐，最简洁）

4.简化函数

5.过滤属性getters，在进行操作时先执行过滤

6.异步执行 actions

7.axios   与后端交互，推荐

8.模块组A    module

 

七.重要掌握

https://blog.csdn.net/qq_40646960/article/details/82774679

 

最新安装步骤