Vue入门学习课程的笔记

Vue入门——黑马程序员

黑马程序员Vue入门教程视频

一、vue历史介绍

1.1 vue介绍

vue于2014年诞生,作者：尤雨溪

1.2 Vue核心概念：

组件化、双向数据流（基于ES5 defineProperty 来实现的）

Vue代码结构：template、style、script

1.3 Angular核心概念：

模块化、双向数据绑定（脏检测：一个数组 $watch）

1.4 框架对比：学完再看（Vue官网里面）

Vue 对比其他框架

1.5 双向数据流

js内存属性发生变化，影响到页面的变化；页面的变化影响js内存属性的改变；

二、常用指令

2.1 常见指令

v-test 是元素的innerText只能在双标签中使用
v-html 是元素的innerHTML，不能包含插值表达式：
v-if 元素是否移除或是引入
v-show 元素是否显示或隐藏（display属性）
v-model 元素数据的双向绑定
v-bind 数据单项绑定（内存js改变影响页面）

三、服务器启动

修改 package.json 中的 script 标签，dev 中加入端口号：--port 8888

四、v-bind 的使用

v-bind 用于数据的单项绑定，可以绑定元素的属性等内容；

4.1 根据可变的表达式的结果给class赋值，用 v-bind:class= “xxx”；

v-bind:属性名= “表达式”，最终表达式运算结束的结果赋值给该属性名；

class 的结果样式分类（见上面代码）：
- 一个样式：返回字符串（三元表达式和 key 和样式的清单对象）
- 多个样式：返回对象（样式做key，true或false赋值）

<div v-bind:class="isRed? 'red':'green'">
   单个class
 </div>
<div v-bind:class ="{'green':true,'big':true}">
  多个Class
</div>

五、methods 和 v-on 指令

5.1 在MyApp2.vue 上面增加一个 button 按钮，进行测试；例：v-on:click=”change”

v-on 指令四调用格式：v-on:事件名="表达式 || 函数名"，可以简写为：@事件名="表达式 || 函数名"；若函数无参数，可以省略(),只给函数名就行；

声明组件内函数，在 export default 这个对象的根属性上加 methods 属性，其中的对象：key 是函数名，value 值是函数体；而根属性上的 data 属性，其实是一个函数，返回一个对象：对象属性是我们初始化变量的名称；

注意：

理解data属性是一个函数，返回一个对象，而不是直接定义成对象的原因；
只要是在 script 中使用的变量或方法都需要加上 this 关键字；

六、v-for 指令

6.1 可以单独使用操作数组 (item,index)

<!-- student是一个数组对象[{...}, {...}] -->
<li
  v-for="(stu,index) in student"
  v-bind:key="index"
>
  index:{{index}},stu:{{stu.name}}
</li>

6.2 可以使用操作对象 (value,key,index)

<!-- person是一个对象{...} -->
<li
  v-for="(value, key, index) in person"
  v-bind:key="index"
>
  key:{{key}}
  value:{{value}}
  index:{{index}}
</li>

6.3 key 属性必须绑定的原理：

key 类似于 trank by 的一个属性，作用是告诉Vue.js中的元素于页面之间的关联，当识别删除元素时，是单个元素的删除，非全部，所以需要关联关系（key 必须设置）

七、列表的增删

<template>
 <!-- 只有一个根节点 -->
 <div>
   <ul>
     <li
        v-for="(hero,index) in heros"
        v-bind:key="index"
        v-bind:class="{'A':'red','B':'green','C':'blue','D':'pink'}[hero.score]"
     >
      {{hero.name}}:{{hero.score}}
      <button v-on:click= "del(index)">delete</button>
     </li>
   </ul>
   Hero Name: <input type="text" name= "" v-model="name"><br>
   Hero Score: <input type="text" name= ""  v-model="score"><br>
   <button v-on:click= "add" >添加 hero</button>
 </div>
</template>
<script>
//列表的增删功能：类似于 todolist
export default {
  name: "",
  data () {
    return {
      name:'',
      score:'',
      heros:[
        {id:1,name:'aaa',score:'A'},
        {id:2,name:'bbb',score:'B'},
        {id:3,name:'ccc',score:'C'},
        {id:4,name:'ddd',score:'D'},
      ]
    };
  },
  //声明函数,属于组件对象的
  methods:{
    // 包含多个函数，函数名做 key ，函数体做 value
    change(){
      //在script 中能使用的对象，基本上 template 中也能使用
      //但是 script 中使用加 this，template 中不需要
      this.isRed= !this.isRed;
      this.student.push(
        {name:'ccc', score:'B'}
        )
    },
    add(){
      //获取输入框的值，压入heros数据数组 中去；
      this.heros.push(
        {name:this.name,score:this.score}
      );
      this.name= '';
      this.score= '';
    },
    del(index){
      this.heros.splice(index, 1);
    }
  }
}
</script>
<style>
  .red{background-color: red;}
  .green{background-color: green;}
  .blue{background-color: skyblue;}
  .pink{background-color: pink;}
  .big{font-size: 30px;}
</style>

八、父子组件的使用

8.1 Vue工程中使用父子组件

注意谁是使用者，谁是被用者，使用者的组件中需要引用子组件，并进行声明子组件，例：

// 引入自定义的子组件
import Header from './MyApp6-header';
import Footer from './MyApp6-footer';
import Body from './MyApp6-body';
export default {
  // 组件必须在components中注册声明
  components:{
    //组件名（在模板中使用）：组件对象
    Header,
    Body,
    Footer
  }
}

九、全局组件的使用

全局组件不需要声明，可以直接使用，

只需要在入口文件 main.js 中声明一次，声明使用格式为：vue. component('组件名',组件对象);

十、父组件传递值给子组件

10.1 父组件通过子组件的属性将值进行传递，两种方式：

常量传值：prop1= "常量"

变量传值: v-bind:prop= "变量"

10.2 子组件需要声明接收的属性：

根属性（子组件的export default 对象中的props属性），然后直接在页面中使用定义的属性；props可以以数组或对象形式来声明 :

// 数组形式
props: ['prop1', 'prop2']
// 对象形式
props: { prop1: { type: 数据类型(Array, String, Object...), default: (填入默认值) }, }

10.3 父子组件传递数据的例子：

<!-- 在父组件template中引入子组件，其中的people为向子组件传递的变量，test为向子组件传递的常量，父组件中的name变量为传递的值 -->
<template>
  <div>
    <Header v-on:listen="deal" test="test"/>
  </div>
</template>

export default {
  ...
  //子组件Header接收父组件向子组件传递的值
  props:[
    people: {type: String, default: 'lhj'}, 
    test: {type: String,} 
  ],
  ...
}

十一、VueBus的通信，实现子组件通信父组件

11.1 通过 emit 发布订阅模式来子组件向父组件传值；

原理：子组件通过 emit 方法传递一个事件名，还有可以传递一个数据，父组件中通过 v-on 指令监听该事件名，若监听到，则触发其响应函数；

格式：

（子组件）$emit('事件名', prop1,prop2);
（父组件）v-on:事件名= "函数1" 函数1(e){...}

11.2 子组件向父组件传递数据例子

子组件Header中：
export default {
  ...
  data () {
    return {
      // test1:this.test,
      msg:"我是子组件发送的数据"
    };
  },
  methods:{
    // 子组件 Header 的methods方法中通过$emit 方法向父组件传递一个事件名和一个数据
    send(){
      this.$emit("listen",this.msg);
    }
  }
}

父组件中：
<!-- 在父组件template中引入子组件，使用v-on指令监听子组件通过$emit 发布的事件，当事件触发时，调用父组件中后面的deal方法 -->
<template>
 <div>
    <Header v-on:listen="deal"/>
 </div>
</template>
export default {
  ...

十二、Vue 官方API文档中的分类

12.1 全局配置、全局API：

全局是指通过 Vue. 调用；还有 API 配置；

12.2 实例方法/事件：

实例指的是组件内的 this. 和 new Vue(). ;
vm.$once表示只触发一次；
vm.$off 表示取消事件；

12.3 选项（数据、DOM、资源…）：

options/类别；options 和实例相关的，进行配置实例；还有包括 export default{} 中进行配置；

其实 options/选项 就是代表 new Vue() 的参数和 export default{} 里面的属性；

十三、总结

完整的整个项目的文件，例如包含node_modules、package.json等配置文件
创建 index.html 文件，观看配置信息（webpack.config.js),
index.html中 div->id->app，
创建 main.js ,观看其文件和webpack.config.js 文件描述的关系；
main.js 中引入vue和相关的对象
new Vue(选项options),目的地 el 渲染内容 render:c=>(App) 渲染App的节点
编写app.vue文件：script 格式是 export default { 选项options } ;style 加上 scoped 后，变成局部样式；
可能使用组件或者使用函数接收参数：options(根属性)：
- data 是一个函数，return 一个对象；
- methods 是一个对象，key是函数名，value 是函数体；
- components 是一个对象，key 是组件名，值是组件对象；
- props 使用一个数组或对象，数组时元素是多个接收到的参数；对象时，key 是多个接收到的参数，对应的 value 是参数的类型；
套路总结：只要是在上面 template 使用的东西，在 script 中都可以通过this使用

十四、复习

14.1 vue 单文件方式 xxx.vue

准备好配置文件 package.json(包含描述文件以及封装命令)和webpack.config.js 文件(打包的配置文件)
创建 index.html(单页应用的页)
创建 mian.js (入口文件)
引入Vue 和相关的文件 xxx.vue
new Vue(options)
options(选项)：data、methods、components（声明子组件）、props…
实例：在组件内(xxx.vue)中的this；new Vue();事件 this.$on(事件名，回调函数); this.$emit(事件名,数据);this.$once(事件名,回调函数);this.$off(事件名)
全局：Vue.component(‘组件名’,组件对象)
组件传值：父传子（属性作为参数，可以为常量或者变量，通过props 属性传递值）；子传父组件（发布订阅模式，$emit 方法，事件名一定要一致）

十五、过滤器

15.1 Vue中自定义过滤器

15.1.1 组件内的过滤器（局部）：

options选项 中的一个 filters 的属性（一个对象）；多个key就是不同的过滤器名，多个 value 就是与 key 对应的过滤方式函数体，下面为一个组件内的过滤器定义和使用的例子；

<template>
 <!-- 只有一个根节点 -->
 <div>
   请输入内容：
   <input type="text" name="" v-model="text">
   显示：{{ text | myFilter }}
 </div>
</template>

export default {
  data () {
    return {
      text:'',
    };
  },
  filters:{
    myFilter(value){//value 就是text
      //将输入的内容反转，方式是先转换成数组，再反转数组，最后转换成字符串
      return value.split('').reverse().join('');
    }
  },
}

15.1.2 全局过滤器：

Vue.fiter(过滤器名，fn)；//参考上面代码，与局部过滤器使用形式一样

15.2 全局/ 局部过滤器对比：

全局（范围大，若出现同名时，权利小）；
组件内（范围小，若出现同名时，权利大）；

十六、获取 DOM 元素（ref属性）

前端框架是为了减少 DOM操作，但是特定情况下留了后门，在指定元素上，添加 ref= "名称A"，再在获取的地方加入 this.$refs.名称A;

如果ref放在元素的DOM元素上，获取的数据就是原生DOM对象【可以直接操作】
若ref放在组件对象上，获取的就是组件对象【获取到DOM对象，通过 this.$refs.组件名.$el 进行操作】

十七、饿了么_mint-ui

mint-ui 官方文档

十八、获取网站技术的插件

wappalyzer插件：获取当前网站使用的技术

十九、mint_ui 介绍

根据官网，先下载 mint-ui 的包，然后在入口文件里面进行组件的全部引入：import MintUi from ‘mint-ui’;再引入样式文件：import ‘mint-ui/lib/style.css’;在进行插件安装：Vue.use(MintUi);
注意在js部分（script）所有的变量都是模块作用域，所以必须通过 import 来先引入，再使用；而若是全局安装的方式的话，在template中可直接使用组件标签；

二十、vue-router 的基本使用

前端路由的核心就是锚点值的改变，根据不同的值，渲染指定DOM位置的不同；
vue中，模板数据不是通过 ajax 请求来，而是调用函数获取模板内容；
只要是以 vue 开头的，就必须用 Vue.use;
Vue目前的核心插件有：
- vue-router；
- vuex(管理全局共享数据)；
vue-router 使用方式:
- 下载安装： npm i vue-router -S
- 在 main.js 中引入：import VueRouter from 'vue-router'
- 安装插件：Vue.use(插件)：Vue.use(VueRouter)
- 创建路由对象并配置路由规则：let router=new VueRouter({ routes:[ {path:'/', component:MyApp12home} ] })
- 将其路由对象传递给 Vue 的实例，options 中: router:router
- 在 app.vue 中留坑:<router-view></router-view>

二一、vue 的学习方式

vue框架的使用，多练习敲代码，了解书写格式，掌握应用；
组件的内容：结构、样式、动态效果；
学习打包的操作，webpack的使用与搭建，webpack核心：最终理解打包的好处；

二二、路由命名方式使用 router-link

需求：通过点击标签，进行页面跳转；
Vue项目中使用路由导航步骤：
- 先创建Vue组件;
- 在入口文件中导入;
- 对路由规则进行配置，例如:{path:'/movie', name:'movie',component:MyApp13movie}, {path:'/mymusic', name:'music',component:MyApp13music});
- 在具体文件中进行配置:
有三种方式进行路由导航：
- a 标签导航：例: <a href="#/music">music1</a>
- router-link 命名式导航(一定要掌握书写格式，注意在入口文件规则设置中加入 name 属性)：例: <router-link :to="{name:'music'}">音乐1</router-link>
- router-link 路径式导航：例: <router-link to="/movie">电影4</router-link>

二三、router-link 对象方式传递参数

23.1 使用 router-link 标签：

方式1：<router-link to="/movie">电影4</router-link>
方式2：<router-link :to="{name:'music'}">音乐1</router-link>

23.2 页面之间进行通信

在 vue-router中，共有两大对象被挂载到了实例 this：$route(只读，具备路由的信息的对象) 和 $router(具备路由的功能函数对象)

23.3 查询字符串方式导航：

去哪里：<router-link :to= "{name:'detail',query:{id: 1}}">xxx</router-link>
路由规则、导航(查询字符串 path 不用改)：{name:'detail', path:'/detail', component:组件名}
去了干嘛，获取路由参数（注意是query 还是params和对应的 id 名）：this.$route.query.id

path 路径方式导航：

去哪里：<router-link :to= "{name:'detail',params:{name: 1}}">xxx</router-link>
路由规则、导航( path 方式需要在路由规则上加上 /:xxx)：{name:'detail', path:'/detail/:name', component:组件名}
去了干嘛，获取路由参数（注意是query 还是params和对应的 id 名）：this.$route.params.name

二四、编程导航参数

编程导航参数用于不能保证用户一定会点击某些按钮，并且当前操作，处理路由跳转以外，还有一些别的附加操作；例如通过：

this.$router.go 根据浏览器记录前进1 或后退-1 ;
this.$router.push(直接跳转到某个页面显示): 其中的push参数为：字符串/xxx、对象{name:'xxx',query{id:1},params{name:1}};【注意使用 params 传递参数一定要修改路由规则routes.js，在对应的路由规则上加上 /:xxx】

二五、前端路由的原生代码实现

路由的原生书写方式： window.addEventListener('hashchange', fn)

25.1 复习之前的学习：

过滤器：定义全局过滤器或者组件内过滤器；
获取 DOM 元素: 在元素上面加入 ref="xxx"，代码中通过this.$refs.xxx 获取其元素（原生 DOM 标签获取的就是原生 DOM 对象，而组件标签获取的是组件对象，通过 $el 继续再获取DOM 元素）
生命周期事件（钩子）回调函数：
- created: 数据初始化，DOM还没生成；
- mounted: 将数据装载到 DOM 元素上，DOM 已经生成；

25.1 路由的原生代码实现：

window.addEventListener('hashchange', fn)
根据你放 <router-view></router-view>作为一个 DOM 上的标识
最终当锚点值改变时，触发 hashchange 的回调函数，将指定的模板数据插入到之前 router-view 标签作为的 DOM 标识上；

二六、重定向和404

26.1 重定向

重定向的书写格式：

{path:'/',redirect:'/home'}
{path:'/',redirect:{name:'home'}}

26.2 404页面:

在路由规则的最后一个规则，写一个很强大的匹配：{path:'*',component:NotFoundVue}

二七、多视图

多个坑对应加一个路由加多个组件（注意路由规则书写中为：components）

多个 router-view 标签，让页面更加细化;
components 多视图：是一个对象，对象中包含多个 key 和 value, key 对应视图的 name 属性，value 是要显示的组件对象；还有多个 router-view，包含 name属性，默认为 default；

// 在组件中留坑的地方加入下面的代码
<!-- 留坑【十分重要】 每个坑都有各自的坑名 -->
<router-view class="router-bg" name="header"></router-view>
<router-view class="router-bg"></router-view>
<router-view class="router-bg" name="footer"></router-view>

1 2	// 配置路由规则routes中的components对象，对应上面的坑中的命名 {path:'/', components: {header:Header,default:Body,footer:Footer}}

二八、嵌套路由（children属性）

在路由规则里面加入children，若果写上 /xxx 就是绝对路径，如果不写 / 就是相对路径，匹配到上一级目录下，然后必须记住要在含有嵌套组件中加坑<router-view></router-view>；

二九、嵌套路由（暂时没有代码）

用单页去实现多页应用，就是复杂的嵌套路由，开发中会使用；
视图包含视图：注意规则中是 components
路由父子级关系路由：

{
  name:'music',
  path:'/music',
  component:Music,
  //子路由中加入 / 就是绝对路径,不加 / 就是相对父级路径
  children:[
    {name:'oumei',path:'oumei',component:Oumei},
    {name:'guochan',path:'guochan',component:Guochan},
  ]
}

三十、路由总结

多进行路由代码练习，练习配置路由规则；
SPA 头中（变化）尾变化中必须填坑<router-view></router-view>
在 url 中做手脚：
- 查询字符串方式/path 路径方式：（注意两者区别：query 和 params；path 路径方式在路由规则中加入 params 中的 key 名）
- 去哪里：<router-link> :to= "name:'xxx',query:{id:1}"></router-link>;
- 路由规则：{name:'xxx',path:'/xxx',component:组件名}或者{name:'detail', path:'/detail/:name', component:组件名};
- 去了干嘛，获取路由参数（注意是query 还是params 和对应的 id 名）：this.$route.query.id或者this.$route.params.id;
编程式导航：this.$router.push(去哪里,路由名称)
- 页面前进/后退：this.$router.go(1 |-1)
路由的原生写法：锚点监视+ 模板替换
路由匹配规则按照规则顺序执行， * 是通配符去404页面，重定向；
vue-router是什么都可以写字符串匹配，也可以通过名称匹配；
让视图填充更加灵活，视图是通过使用多个 router-view ，用名称匹配，路由是 components 对象来标识；
嵌套路由：节约不变数据的重复渲染；适用于多页应用开发；

三一、vue-resource 介绍

安装插件，之前为vue 团队开发，现已经停止维护，推荐使用 axios 来异步获取数据；（去GitHub上面查看文档）

三二、vue-resource（暂无代码）

下载插件：npm install vue-resource -S
引入插件：import VueResource from ‘vue-resource’;
安装插件：Vue.use(VueResource)//插件都是挂载属性，挂载在原型上
- 以后都通过 this。$http 来使用，原理为：Vue是所有实例对象的构造函数，因而 Vue.prototype.$http 可以用实例的 this 替换为 this.$http;
获取URL地址的数据：
- get请求：this.$http.get('url').then(res=>{},err=>{})
- post请求：this.$http.post('url',{data对象},{options对象}).then(res=>{},err=>{})
- post请求出现bug：options 预检请求是当浏览器发现跨域 +application/json的请求，并且发起的时候带了一个 ContentType 的请求头，服务器无法识别，则出错；解决方式是换 application/json 为键值对的形式，将options 预检请求忽略；

三三、axios简单使用【十分重要】

axios官方文档

下载包：npm i axios
引入插件：import Axios from 'axios'
给Vue原型链挂载一个属性：Vue.prototype.$axios= Axios
在app.vue 文件中可以通过 this.$axios 获取get/post请求数据，例：
- this.$axios.get('url').then(res=>{console.log(res)}).catch(err=>{console.log(err)})
- this.$axios.post('url',{data对象},{options设置——设置headers}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})
- 上面的有问题，服务器端将无法正常获取数据，而是通过以下方式，不用对象进行数据传输，用字符串方式传输数据；【注意：必须知道传递的数据 Form Data 是什么样的数据形式】
简化Axios 获取的URL参数，通过 Axios.defaults.baseUrl= 'url'; 提前设置就行了；
小结：post请求时，若数据时字符串，默认的头就是键值对，否则对象就是 application/json;
- this.$axios.get(url, options)
- this.$axios.post(url, data, options)
- 针对当前的一次请求的相关设置：options:{params:{id:1}//查询字符串,headers:{'content-type':'xxx'}，baseURL:'' }
- 全局默认设置：Axios.defaults.baseURL = 'xxxx';

三四、总结

34.1 路由是核心，以下重点：

路由的基本使用，整体框架的搭建；
任选一种路由参数的方式（查询字符串方式最重要）；
404 页面（路由匹配规则）；
嵌套路由的使用（重要）；
编程导航的使用（重要）；

34.2 http 请求：

axios 发起 get 、post请求
axios 挂载属性的方式（Vue.prototype的方式）