Vue全套精品课笔记

Vue官方文档：https://cn.vuejs.org/v2/guide/syntax.html

1. Vue环境搭建

（1）为什么用框架（Angular,React,Vue)

很多业务逻辑移动到前段实现，Javascript文件会 越来越多，处理也胡变得更加复杂

（2）为什么选择Vue

1.渐进式框架
2.双向数据绑定
3.不需要操作DOM，状态机，状态的改变会引起试图的更新
4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能实现
5.Vue环境构建非常方便，vue-clie指令
6.Vue单文件组成，组件化开发
7.社区非常强大，提供各种各样的插件供我们使用

（3）安装

• 下载并安装nodejs：http://nodejs.cn/download/
• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
• 安装vue脚手架：npm install --global vue-cli

要安装vue-cli（可以不用安装vue），不然提示vue不是本地命令

（4）新建项目

• 初始化项目
  vue init webpack my-project
• 填写项目信息
  • Project name vb
  • Project description A Vue.js project
  • Author hanzhichao
  • Vue build standanlone
  • Install vue-router No
  • Use ESLint to lint you code No
  • Set to unit test No
  • Setup e3e tets with Nightwatch No
  • Yes use NPM
• 安装依赖
  cd my-project
  npm install
• 运行开发环境
  npm run dev

什么是npm？
npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

什么是webpack？
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
https://www.cnblogs.com/-walker/p/6056529.html

2. Vue项目结构

入门示例

** main.js入口解释**
src/main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件

模板语法

• 文本：模板 {{ 变量 }} （Mustache语法 ）
• 原始html：v-html="变量" 可以解析DOM

示例：
src/App.vue

<template>
  <div id="app">
    {{ demo }}  <!--只能展示文本-->
    <div v-html="demo"></div>  <!--可以展示html-->
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return { demo: "<h1>第一个Vue Demo</h1>" }
  }, 
  components: {
  }
}
</script>

<style>

</style>

Vue的组件结构

<template>
    html模板区
</template>
<script>
    数据逻辑区
</script>
<style>
    样式区
</style>

项目结构

build/  --- 构建配置文件目录
config/  --- 不同环境配置文件目录
node_modules/  --- 依赖包
src/  --- 源码
    assets/  --- 资源文件目录
    conponents  ---  组件目录
    App.vue  --- Vue的单文件组件 
    main.js  --- 入口函数
static/  --- 静态文件目录
.babelrc  --- babel配置文件
.editorconfig
.gitignore  --- git忽略文件
.postcssrc.js  --- postcss配置文件
index.html  --- 项目根视图
package-lock.json
package.json  --- 依赖包配置
README.md  --- 项目说明

什么是babel？
babel是一个工具链，主要用于将ES6及以上版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

什么是postcss?
postcss是一种基于插件的css编译的工具，类似babel对js的处理，常见的功能如：
1.使用下一代css语法
2.自动补全浏览器前缀
3.自动把px代为转换成rem
4.css代码压缩等等
https://jianshu.com/p/288963680642

什么是ES6?
ES即ECMAScript，是JavaScript中的语法规范。ES6即ECMAScript 6标准语法。

3. Vue基本指令

• 文本：{{ }}
• 原始html：v-html
• 绑定属性：v-bind
• 表达式：{{ Javascript表达式 }} （只支持单行表达式语句）
• 条件渲染：
  • v-if v-else v-else-if
  • v-show
• 列表渲染：v-for 支持索引(item,index) 支持遍历数[…]和对象{…} 一般要给出索引v-bind:key="index"来维护顺序状态。

v-if和v-show的区别：v-if是添加移除节点，v-show是控制节点的display。
v-if有更改的切换开销，而v-show有更改的初始渲染开销。如果需要频繁切换用v-show较好。如果运行时改变较少，用v-if较好。

示例：
src/App.vue

<template>
  <div id="app">
    {{ demo }}  <!--只能展示文本-->
    <div v-html="demo"></div>  <!--可以展示html-->
    <div class="white" v-bind:class="active" v-bind:data-id="id">Hello</div>  <!--绑定属性-->
    {{ 1+1 }}  <!--使用Javascript表达式-->
    {{ 10>9?'对了':'错了'}}
    {{ [1,2,3].toString() }}
    {{ [1,2,3].push(4) }}
    <div v-if="flag">
      我是条件渲染    <!--条件渲染-->
    </div>
    <template v-if="flag2">  <!--template不会被渲染-->
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </template>
    <template v-else> <!--自动匹配上一个v-if-->
      <p>4</p>
    </template>
    <div v-show="flag2">我是v-show</div>
    <ul>
      <li v-for="item in names">{{ item }}</li> <!--列表渲染-->
    </ul>
    <ul>
      <li v-bind:key="index" v-for="(item,index) in names">{{ index+1 }} - {{ item }}</li> <!--支持使用索引-->
    </ul>
    <ul>
      <li v-bind:key="index" v-for="(obj,key,index) in objs">{{ index+1 }} - {{ key}} : {{ obj }}</li> <!--支持对象遍历-->
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return { 
      demo: "<h1>第一个Vue Demo</h1>",
      active: "active",
      id: 19,
      flag: false,
      flag2: true,
      names: ['kevin', 'eric', 'lily'],
      objs: {"name": "kevin", "age": 18},
  }
  }, 
  components: {
  }
}
</script>

<style lang="css">
  .white {
    color: white
  }
  .active {
    background-color: red
  }
</style>

4. Vue事件应用

• 监听事件： v-on:click=“counter += 1”
• 调用事件函数：v-on:click=“func”

export default {
    ...
    data(): {
        msg: "hello"
    }
    methods: {
        func(event) {
            this.msg="world";
        }
    }

• 传递参数：v-on:click=“func2(‘vue’)”

export default {
    ...
    methods: {
        ...,
        func2(text) {
            console.log(text);
        }
}

• 事件修饰符（修饰符可以串联）
  • .stop：阻止单击事件继续传播
  • .prevent：提交事件不再重载页面
  • .capture：内部元素触发的事件先在此处理，然后才交由内部元素进行处理
  • .self：只对当前元素生效
  • .once：点击事件将只会触发一次
  • .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发
• 按键修饰符 <input v-on=keyup.enter=“submit”/>
  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

监听事件示例：

<template>
  <div id="app">
    <button v-on:click="counter += 1" type="button" name="button">按钮</button> 
    {{ counter }}
    <div>
      <button v-on:click="clickHandler" type="button" name="button">第二按钮</button>
      {{ eventShow }}
    </div>
    <button v-on:click="dataevent(content,$event)" type="button" name="button">第三按钮</button>
    <input v-on:keyup.enter="getInfo"/>
  </div>

</template>

<script>

export default {
  name: 'App',
  data(){
    return { 
      counter: 1,
      eventShow: "我是孙悟空",
      content: "为师寂寞了"
  }
  }, 
  components: {
  },
  methods: {
    clickHandler(event){
        console.log('事件');
        this.eventShow="我是六耳猕猴";
    },
    dataevent(data){
      console.log(data);
    },
    getInfo(event){
      // if(event.keyCode === 13) {
      //   console.log('你按了回车键');
      // }
      console.log('你按了回车键');
      
    }
  }
}
</script>

<style lang="css">

</style>

5. Vue双向数据绑定

6. Vue组件基础

7. Vue组件交互父传子

8. Vue组件交互子传父

9. Vue插槽功能

10. Vue-组件缓存

11. Vue动画效果

12. Vue-自定义指令与过滤器

13. Vue-axios基础Get请求

14. Vue-axios基础Post请求

15. Vue-axios全局配置与拦截器

16. Vue-axios跨域处理

17. Vue-axios操作原始DOM

18. Vue-路由基础

19. Vue-路由跳转

20. Vue-路由嵌套

21. Vue-路由参数传递

22. Vue-路由高亮

23. Vue-element-ui组件

24. Vue-常用组件只swiper

25. Vue-实例-音乐列表

26. Vue-实例-歌手信息

27. Vue-实例-歌曲播放

28. Vue-示例-歌曲播放与歌词

29. Vue-实例-搜索发现

30. Vue-实例-上拉加载

9. props

10. emit

11. 插槽与缓存

12. 过渡与动画

13. 自定义字段

14. 过滤

15. axios get请求

中文: https://www.kancloud.cn/yunye/axios/234845
github: https/github.com/axios/axios

安装 npm install axios

引入加载import Axios form "axios";Vue.prototype.$axios = Axios

请求

get 请求:

this.$axios("http://127.0.0.1/add/",{
    params: {
        a: "1",
        b: "2"
    }})
    .then(res=> {
        this.result = res.data;
    })
    .catch(error=> {
        console.log(error);
    })

axios post 请求

form-data: ?a=1&b=2
x-www-form-urlencoded:
axios接受的post参数的格式的是form-data格式

import qs from "qs"
this.$axios.post("http://127.0.0.1:5000/add/", qs.stringify({
        a: 5,
        b: 3
      }))
    .then(res => {
      this.sum = res.data;
      console.log(res.data);
    })
    .catch(error =>{
      console.log(error);
    })
  }

全局的axios默认值

main.js中, Vue.prototype.$axios = Axios;后

Axios.defaults.baseURL = 'http://127.0.0.1:5000';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Axios.defaults.headers.comont['Authorization'] = AUTH_TOKEN;

17. axios 拦截器

main.js中

// 添加请求拦截器
Axios.interceptors.request.use(function(config) {
    if (config.method == "post") {
        config.data = qs.stringify(config.data);
    }
    return config;

}, function(error) {
    //对请求错误做些什么
    return Promise.reject(error);

});

// 添加响应拦截器
Axios.interceptors.response.use(function(response) {
    return response;

}, function(error){
    //对响应错误做点什么
    return Promist.reject(error);
}
)

跨域解决方案

1. 修改config index.js文件 // build后不再生效
   // 解决跨域问题
   proxyTable:{
   “/api”: {
   target: “http://127.0.0.1:5000”,
   changeOrigin: true,
   pathRewrite: {
   “^/api”: “”
   }
   }
   },
2. 添加host
   Vue.prototype.HOST = '/api';
3. 重新组装url
   var url = this.HOST + "/add/";

19. mock

模拟数据

1. 自己创建JSON文件, 使用get请求形式访问数据
   1. 优点: 方便,快捷
   2. 缺点: 只能存在get请求
2. 项目中集成服务器, 模拟各种接口
   1. 优点: 模拟真实线上环境
   2. 缺点: 增加开发成本
3. 直接使用线上数据
   1. 优点: 使用
   2. 不一定每个项目都存在

20. 路由基本加载

21. 路由跳转

22. 路由嵌套

23. 路由传递参数

24. 路由高亮效果

25. Element组件库

1. 安装element-ui: `npm i element-ui -S
2. 安装按需加载的依赖: npm install babel-plugin-component -D
3. 修改.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk "
      }
    ]]
}

4. 引入组件(main.js)

import { Button } from 'element-ui'

Vue.use(Button)

问题: throttle-debounce/throttle 安装不上

26. swiper

27. lazyload

28. REM与Less

29. Vuex之Store

30. Vuex相关操作

31. npm发布组件

32-40. Project

41. vue-resource

42. git

最后

以上就是彩色月饼为你收集整理的Vue全套精品课笔记Vue全套精品课笔记的全部内容，希望文章能够帮你解决Vue全套精品课笔记Vue全套精品课笔记所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。