前端与后端是什么？
依赖包从哪里来？
框架是什么？
html属性是什么？
什么是vue
指令
watch监听器
计算属性 computed
事件对象
修饰符
- 按键修饰符
- 事件修饰符
生命周期的钩子函数
过滤器
- 自定义过滤器
脚手架
扩展—- 自动开启浏览器
组件

前端与后端是什么？

前端：数据展示
后端：数据处理

依赖包从哪里来？

npm管理
npm 的服务器是在国外的国内下载很慢
淘宝镜像： npm i -g cnpm —registry=https://registry.npm.taobao.org
jquery :
1.cd 到你要下载是的文件夹下
2.初始化 npm init -y
3.下载 npm install —save jquery
4.修改下载版本
4-1 在下载的时候直接指定版本 npm install —save jquery@版本号
4-2 可以在项目的package.json文件进行修改在项目下使用 npm install 进行重新下载

框架是什么？

与业务无关的代码块
业务：就是项目的功能
框架优缺点
简化了项目的复杂度提高了项目的价值
缺点：你要学习一套新的语法

html属性是什么？

扩展html标签的功能
语法：
属性写在html的开标签中属性=“属性值 ” 多个属性用空格隔开

什么是vue

vue.js是现今最为主流的前端 MVVM框架（更简单的来展示数据）

MVVM是什么？

M Model 模型——-》数据
V View 视图——-》用户可以看见的界面
Vm ViewModel 视图模型——-》数据与展示相分离视图于模型之间的桥梁用来关联

helloword

1.下载vue依赖
npm install —save vue
2.编写代码


    <script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <!-- M 模型
    V 视图
    VM 视图模型 -->
        <!-- 1.创建v层 -->
        <div id="demoDiv">
            {{text}}
        </div>
        <script>
            // 2.vm层  就是vue实例
            new Vue({
                // 3.创建m层
                data:{
                    text:"你好么么哒"
                },
                el:"#demoDiv"
            })
        </script>
</body>

{{}}是什么？

{{}} 模板语法/双大括号表达式/双大括号赋值法

语法

{{ 表达式 }} 表达式 —-》通过计算可以得到结果的公式

<script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <div id="demoDiv">
        <h1>{{name}}</h1>
        <h1>{{age+2}}</h1>
        <h1>{{sex?"你好":"你坏"}}</h1>
        <h1>{{arr[2]}}</h1>
        <h1>{{love.userb}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text.toUpperCase()}}</h1>
        <h1>{{text.toUpperCase().substr(1,4)}}</h1>
    </div>
    <script>
        new Vue({
            data:{
                name:"xixi",
                age:18,
                sex:false,
                arr:[1111,22222,33333,44444],
                love:{
                    usera:"aaaa",
                    userb:"bbbbb"
                },
                text:"abcdefghijk"
            },
            el:"#demoDiv"
        })
    </script>
</body>

渲染分类

vue 的核心就是可以使用简单简洁的模板语法来声明式的对数据进行展示。
原生js ：命令式渲染我们需要去命令我们的程序你应该一步一步怎么走
vue框架：声明式渲染我们只需要告诉程序你要干什么他就自己完成了

指令

指令概念

就是用v- 前缀的html特殊属性

指令的作用是什么？

在vue中扩展html标签的功能

指令的语法

写在html的开标签中并且 v-指令=“指令值” 多个指令用空格隔开

v-show

作用：控制元素的显示和隐藏
使用css的display来进行css的设置
true 显示 false 隐藏

    <script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <div id="demoDiv">
        <h1>v-show</h1>
        <!-- 作用：控制元素的显示和隐藏
        使用css的display来进行css的设置
        true   显示       false  隐藏 -->
        <h1 v-show="bool">看我的显示和隐藏</h1>
    </div>
    <script>
        new Vue({
            data:{
                bool:true
            },
            el:"#demoDiv"
        })
    </script>
</body>

v-model

用于在表单元素上进行数据的双向绑定

    <script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <div id="demoDiv">
       <h1>v-model</h1>
       <!-- 表单元素上双向绑定 -->
       <!-- 双向绑定  模型变视图变  视图变模型也会变-->
       <!-- 1.模型数据绑定到了视图之上 -->
       <!-- 2.视图的数据改变了 模型也会跟着变 -->
       <input type="text" v-model="text"/>
       <p>{{text}}</p>
    </div>
    <script>
        new Vue({
            data:{
               text:"你好么么哒"
            },
            el:"#demoDiv"
        })
    </script>
</body>

双向绑定的原理

双向绑定是通过 数据劫持与发布者订阅者模式来实现的

数据劫持：数据拦截数据阻断就是vm层会时时刻刻的监听者模型和视图中的数据当其中一个改变了 vm层就会收到通知（vm怎么收到的通知通过数据劫持 Object.defineProperty() 他可以拦截所绑定的对象数据然后通过其中是的getter和setter方法来实现读取与修改）
发布者订阅者就是一个一对多的关系

v-on

就是在vue中绑定事件的指令（在vue中不能直接使用事件必须使用v-on修饰才能使用）

   <script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <div id="demoDiv">
        <h1>v-on</h1>
        <button v-on:click="fun()">点我打印你好</button>
        <!-- 简写 -->
        <button @click="fun()">简写方式绑定事件</button>
    </div>
    <script>
        new Vue({
            data:{
            },
            el:"#demoDiv",
            // 函数需要写在与el  data同级的位置 使用methods来表示
            methods:{
              fun(){
                console.error("你好")
              }
            }
        })
    </script>
</body>

v-for

便利data数据并且进行页面数据展示
语法：
v-for=” (v,i) in 你要便利的数据 “
v 就是便利出来的值
i 就是便利出来的下标

    <script src="./node_modules/vue/dist/vue.js"></script>
<body>
    <div id="demoDiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(item,index) in arr">{{item}}------{{index}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            data:{
              arr:["VN","EZ","NOC","MF"]
            },
            el:"#demoDiv"
        })
    </script>
</body>

便利复杂数据

<body>
    <div id="demoDiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(item,index) in arr">{{item}}------{{index}}</li>
        </ul>
        <table border="1">
            <tr v-for="(v,i) in obj">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            data:{
              arr:["VN","EZ","NOC","MF"],
              obj:[
                  {name:"xixi1",age:181},
                  {name:"xixi2",age:182},
                  {name:"xixi3",age:183},
                  {name:"xixi4",age:184},
                  {name:"xixi5",age:185}
              ]
            },
            el:"#demoDiv"
        })
    </script>
</body>

v-bind 初学者最容易忘记的一个

给html标签的属性绑定变量

<body>
    <div id="demoDiv">
        <h1>v-bind</h1>
        <a v-bind:href="ahref">{{atext}}</a>
        <!-- 简写 -->
        <a :href="ahref">{{atext}}</a>
    </div>
    <script>
        new Vue({
            data:{
                atext:"点我去百度",
                ahref:"http://www.baidu.com"
            },
            el:"#demoDiv"
        })
    </script>
</body>

v-if v-else v-else-if

v-if 判断当前内容是否加载
指令值：true 加载 false不加载

<body>
    <div id="demoDiv">
        <h1>v-if</h1>
        <input type="checkbox" v-model="bool"/>
        <h1 v-show="bool">看我是否显示v-show</h1>
        <h1 v-if="bool">看我是否显示v-if</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                bool:true
            },
            methods:{
            }
        })
    </script>
</body>

v-if 与 v-show的区别

相同点 : 从用户的角度都是对内容可以隐藏
不同点：v-show 是通过css来对元素进行显示和隐藏但是v-if 是对dom进行添加和删除
v-show 通常使用在对安全性不高的地方它在初始化的时候对性能有影响在频繁切换的时候对性能比较友好
v-if 用在对安全性较高的地方对初始化的性能比较友好在频繁切换的时候对性能比较差
v-else
必须配合v-if来使用不能单独使用
当v-if不符合的时候 v-else的内容显示

<body>
    <div id="demoDiv">
        <h1>v-else</h1>
        <h1 v-if="bool">请登录</h1>
        <!-- <p>我是站位的一个没用的内容</p> -->
        <h1 v-else>欢迎您尊敬的vip</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
               bool:false
            },
            methods:{
            }
        })
    </script>
</body>

v-else-if
当其中一项成立的时候就加载那个元素显示

<body>
    <div id="demoDiv">
        <h1>v-else-if</h1>
        <h1 v-if="num==1">111111111</h1>
        <h1 v-else-if="num==2">111111112</h1>
        <h1 v-else-if="num==3">111111113</h1>
        <h1 v-else>111111114</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              num:222222
            },
            methods:{
            }
        })
    </script>
</body>

v-text

向网页中插入纯文本 {{}} 和v-text的作用基本相同

<body>
    <div id="demoDiv">
        <h1>v-text</h1>
        <h1 v-text="text"></h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              text:"我是一段字符串"
            },
            methods:{
            }
        })
    </script>
</body>

小扩展—-屏幕闪烁/屏幕闪动

就是因为网速或者是用户的设备加载过慢在vue还没有渲染内容的是时候页面就显示了可能在用户的界面中出现很多{{}}然后突然间加载出来了页面由变得正常了
解决方式
1.v-text
2.v-cloak 在vue关联处理完数据之后进行加载

<body>
    <div id="demoDiv" v-cloak>
        <h1>v-text</h1>
        <h1 v-text="text"></h1>
        <h1>{{text}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
              text:"我是一段字符串"
            },
            methods:{
            }
        })
    </script>
</body>

v-html

把字符串标签解析到页面中

<body>
    <div id="demoDiv">
        <h1>v-html</h1>
        <div>
            {{demohtml}}
        </div>
        <div v-html="demohtml"></div>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                demohtml:"<em>我是斜体</em>"
            },
            methods:{
            }
        })
    </script>
</body>

v-once

数据一次性绑定

<body>
    <div id="demoDiv">
        <h1>v-once</h1>
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1 v-once>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
        <h1>{{text}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"我是数据"
            },
            methods:{
            }
        })
    </script>
</body>

watch监听器

watch就是用来监听data中的数据的当监听的data数据改变了那么watch就会自动触发
watch在初始化不会执行
语法：
写在与el data methods等同级的位置
watch:{
你要监听的数据(newval,oldval){
当监听的数据改变了你要操作的逻辑
}
}

计算属性 computed

引子
在没有计算属性的时候如果我们需要对数据进行一些操作那么我们可以把这些操作放到{{}}中进行处理

<body>
    <div id="demoDiv">
        <h1>正常展示:{{text}}</h1>
        <h1>大写展示:{{text.toUpperCase()}}</h1>
        <h1>大写加截取展示:{{text.toUpperCase().substr(1,4)}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"abcdefghijk"
            },
            methods:{
            },
            watch:{
            }
        })
    </script>
</body>

注意：
上面的写法没有问题但是我们把大量的逻辑放到了{{}}中会导致后期代码可读性和可维护性非常低而且{{}}中在实际开发中主要就是用来展示数据的并不是用来处理数据的
其实我们可以把一条数据在不同位置展示不同形态计算属性中来完成

什么是计算属性 computed？

计算（处理数据）属性（就是vue实例中的一个属性） vue实例中可以计算数据处理数据的一个属性计算属性他是依赖data数据的当依赖的数据改变了计算属性会重新计算这个数据并且返回计算之后的新结果
语法：
写在与 el data methods watch等同级位置
computed:{
你计算之后返回结果的变量(){
必须有return 你处理数据的逻辑
}
}

<body>
    <div id="demoDiv">
        <h1>正常展示:{{text}}</h1>
        <h1>大写展示:{{text.toUpperCase()}}</h1>
        <h1>大写加截取展示:{{text.toUpperCase().substr(1,4)}}</h1>
        <hr>
        <h1>计算属性来处理上面的业务</h1>
        <h1>正常展示:{{text}}</h1>
        <h1>大写展示:{{uppertext}}</h1>
        <h1>大写加截取展示:{{upperstrtext}}</h1>
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                text:"abcdefghijk"
            },
            methods:{
            },
            watch:{
            },
            // 计算属性
            computed:{
                uppertext(){
                    return this.text.toUpperCase()
                },
                upperstrtext(){
                    return this.text.toUpperCase().substr(1,5)
                }
            }
        })
    </script>
</body>

计算属性与方法的区别

计算属性是基于依赖缓存的也就是说计算属性处理数据只会处理一次如果你多次调用的话那么她只会给你返回第一次处理之后存储在内存中的内容
方法只要被调用那么就执行
计算属性依赖缓存相对于方法来说更加节省资源性能

计算属性与watch有什么区别

计算属性：在computed中他是把data的数据变成自己依赖的数据当这个数据改变了计算属性会重新计算这个依赖的数据并且返回处理之后的结果
watch：在watch中他是监听一个data的数据当这个数据改变了他会完成一些业务操作

事件对象

谁触发了这个事件事件对象就指向谁
$event 事件对象

<body>
    <div id="demoDiv">
      <input type="text" @keydown="fun($event)">
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
            },
            methods:{
                fun(e){
                    console.log(e)
                }
            },
            watch:{
            },
            computed:{
            }
        })
    </script>
</body>

修饰符

就是帮助我们可以更简单的在事件实现的过程中处理一些基本的操作
语法:
@事件.修饰符=“函数（）”

按键修饰符

可以对键盘事件进行简化
.up .down .ctrl .enter .space等等

<body>
    <div id="demoDiv">
      <input type="text" @keydown.ctrl="fun()">
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
            },
            methods:{
              fun(){
                console.log("aaaaaaaa")
              }
            },
            watch:{
            },
            computed:{
            }
        })
    </script>
</body>

事件修饰符

阻止事件默认行为： .prevent
阻止冒泡: .stop
事件捕获: .captrue
事件只触发一次: .once

<body>
    <div id="demoDiv">
            <div class="fu" @click.once="fu()">
                <div class="zi" @click.stop="zi()">
                </div>
            </div>
        </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
            },
            methods:{
              fu(){
                console.log("福福福福福福")
              },
              zi(){
                console.log("滋滋滋滋滋滋滋滋滋")
              }
            },
            watch:{
            },
            computed:{
            }
        })
    </script>
</body>

生命周期的钩子函数

钩子函数
在特定情况下被自定钩起的函数（自动调用的函数）
vue的生命周期
vue实例从创建到销毁的过程
生命周期的钩子函数
vue实例从创建到销毁的过程中被自动调用的函数
生命周期的钩子函数:
1.实例创建前后
实例创建之前： beforeCreate 数据观测和初始化并没有开始
实例创建之后: created 完成了数据的观测属性方法等内容都开始初始化但是这个时候视图层还没有开始渲染
2.模板渲染前后
模板渲染之前: beforeMount 模板开始准备被渲染但是还没有渲染
模板渲染之后: mounted el已经被vue实例挂在并且页面的dom也进行了渲染
3.数据更新前后
数据更新之前: beforeUpdate 在数据更新之前被调用这个时候是准备开始更新
数据更新之后: updated 数据更新之后调用并且页面重新渲染展示修改之后的内容
4.实例销毁前后
实例销毁之前：beforeDestroy
实例销毁之后：destoroyed
vue首次加载的时候之前前两组4个钩子

过滤器

在vue中过滤器使用 filter来表示
在不改变原始数据的情况下格式化（按照我们的需要）展示内容
过滤器本应该分为自定义过滤器和内置过滤器但是在vue2.x之后取消了内置过滤器内置过滤器只停留在1.x之中

自定义过滤器

全局与局部的概念

<body>
    <h1>全局和局部的改变</h1>
    <!-- 全局就是一个内容可以在任意区域都可以使用
    局部只能在局部范围内使用 -->
    <div id="demodiv">
        11111{{text}}
    </div>
    <div id="demodivb">
        22222{{text}}
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"你好么么哒"
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
            }
        })
    </script>
</body>

全局过滤器

全局过滤器在任意位置都可以使用
语法:
定义在vue实例之前
Vue.filter(“当前过滤器的名字”,(你要过滤的数据)=>{
必须return 你过滤这个数据的逻辑
})
定义过滤器

<body>
    <h1>全局过滤器</h1>
    <div id="demodiv">
     <h1>{{num}}</h1>
    </div>
    <div id="demodivb">
       <h1>{{num}}</h1>
    </div>
    <script>
        // 全局过滤器
        Vue.filter("xiaoming",(data)=>{
            return data.substr(0,10)
        })
        new Vue({
            el:"#demodiv",
            data:{
              num:"2017-03-12 22:48:56"
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
                num:"2017-03-14 13:30:39"
            }
        })
    </script>
</body>

使用过滤器
{{变量| 过滤器的名字 }}

<div id="demodiv">
     <h1>{{num|xiaoming}}</h1>
    </div>
    <div id="demodivb">
       <h1>{{num|xiaoming}}</h1>
    </div>

局部过滤器

只能在创建过滤器的这个实例中进行使用
语法:
写在指定实例的el methods watch 等同级位置使用 filters来进行定义
filters:{
过滤器的名字(你要过滤器的数据){
必须return 你过滤的逻辑
}
}

<body>
    <h1>局部的过滤器</h1>
    <div id="demodiv">
        {{num}}
    </div>
    <div id="demodivb">
        {{num|xiaoming}}
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
              num:"2017-03-12 22:48:56"
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
                num:"2017-03-14 13:30:39"
            },
            filters:{
                xiaoming(data){
                    return data.substr(0,10)
                }
            }
        })
    </script>
</body>

脚手架

什么是脚手架

在vue中脚手架使用的是 vue-cli这个技术
脚手架就是一个今后所写项目的一个基本的空框架这个空框架中包含了与项目业务无关的空框框
创建：
前期准备：电脑上必须药有node 建议页安装好淘宝镜像
1.全局安装 npm install -g @vue/cli
2.查看安装之后的脚手架版本 vue —version
3.把cmd cd到你要创建项目的路径下
4.创建项目 vue create 项目名
5 把路径cd到你创建的项目下
6.启动项目 npm run serve

.vue文件——单文件组件

在一个.vue文件中有三个部分
1.template html部分写在template中
2.script 就是用来写js相关的代码 data methods watch computed等等
3.style 就是用来编写组件的样式

拿到空的脚手架项目之后怎么办？

1.点开src文件夹找到components文件夹删除其中的helloword.vue
2.在components文件夹中创建一个属于我们自己的.vue文件在其中把template script style补齐

<template>
  <div>
      <h1>你好我是第一个vue文件1</h1>
      <h1>你好我是第一个vue文件2</h1>
      <h1>你好我是第一个vue文件3</h1>
      <h1>你好我是第一个vue文件4</h1>
      <h1>你好我是第一个vue文件5</h1>
  </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

3.到app.vue（所有组件的老大不能删）中修改原有的配置

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 3.设置成我们自己的 -->
    <Demo/>
  </div>
</template>
<script>
// 1.修改下面的引用 把原来的helloword    路径改成我们自己创建的
// 首字母必须大写
import Demo from './components/demo.vue'
export default {
  name: 'App',
  components: {
    // 2。修改引用的名字为我们创建的
    Demo
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.在app.vue中删除图片与默认样式

<template>
  <div id="app">
    <!-- 4.删除默认欢迎图片 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- 3.设置成我们自己的 -->
    <Demo/>
  </div>
</template>
<script>
// 1.修改下面的引用 把原来的helloword    路径改成我们自己创建的
// 首字母必须大写
import Demo from './components/demo.vue'
export default {
  name: 'App',
  components: {
    // 2。修改引用的名字为我们创建的
    Demo
  }
}
</script>
<style>
/* 5.删除默认样式 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>

扩展—- 自动开启浏览器

1.在vue项目的根路径下根路径下根路径下根路径下根路径下根路径下根路径下创建一个vue.config.js
2.在其中编写

module.exports={
    devServer:{
       open:true 
    }
}

3.重启项目

组件

把页面中多次重现或者是可以复用的内容封装起来在复用的时候只需要重读调用二部需要重写的一个技术叫做组件
组件就是用来提高代码的复用性减少代码量提高开发速度降低后期维护难度
组件的本质是自定义标签

创建组件

全局组件—component

局部组件—components

只能在局部进行使用的组件
创建
1.需要在components文件家中创建一个.vue文件并写入内容
2.使用组件
（1）引用 import 首字母大写 from “引用文件的路径”
（2）调用需要与data methods watch 等同级位置使用components来进行表示
语法：
components:{
给引用的组件起个名字: 你要用的组件
}
（3）使用把组件当做标签在template中进行使用

组件的坑与使用

坑1 组件中有多个标签

在vue的组件中如果你要有多行标签那么必须把这多行标签使用一个父组件包裹(就是在template中只能有一个根节点)

<template>
<div>
    <!-- 多行标签必须要有一个根节点 -->
    <div>
      我是测试组件中有多个标签的例子
    </div>
    <div>
        我是测试组件中有多个标签的例子
    </div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

坑2 组件之间的样式污染—scoped

scoped 当前样式仅对当前组件生效

<style scoped>
/* scoped 当前样式仅对当前组件生效 */
    h1{
        color:red;
    }
</style>

坑3 vue指令v-for需要加key属性

key 是在vue使用v-for的时候添加的一个属性它的作用就是给遍历出来的内容添加一个唯一标识因为有了这个唯一的名字之后 vue在处理这些新遍历出来的数据效率更高

<template>
  <div>
      <h1>测试本地模式学习的属性---{{text}}</h1>
      <ul>
          <li v-for="(v,i) in arr" :key="i">{{v}}</li>
      </ul>
  </div>
</template>

本地模式知识点使用

1.data属性语法有区别

data(){
        return {
            text:"我是字符串",
            num:18
        }
    }

自行查找 vue组件的data为什么是一个函数？

剩下的所有属性写法一模一样
2.methods属性
3.watch属性
4.computed属性
5.8个生命周期钩子
6.filters过滤器
7.components属性

父子组件

组件与组件之间有嵌套关系
就是按照组件使用的语法在一个组件中调用另外一个组件

组件作用域

我在父组件中创建一个变量在子组件中呢直接使用吗？
不能直接用
我在子组件中创建一个变量在父组件中呢直接使用吗？
不能直接用
组件是一个完整的独立的个体数据与数据之间不能直接相互使用父子不行子父不行爷孙更不行

组件传值

正向传值

父组件把数据给子组件
使用props来实现正向传值 props 就是组件中的一个开口可以让数据在父子之间正向传递
语法：
写在与data merhods watch 等同级位置
props:[ “接收数据的变量1”，“接收数据的变量2”,………n ]
使用:
子组件定义接收参数

<template>
  <div>
      ziziz
  </div>
</template>
<script>
export default {
    // 定义正向传值的接收数据
    props:["title","num"],
    data(){
        return {
        }
    }
}
</script>
<style>
</style>

父组件开始传递

   <Zi title="我是父组件传递的title数据" num="18"/>

props验证

就是在正向传值的时候对父组件传递过来的数据进行数据类型默认值等数据的格式效验
props验证不会影响页面的显示（哪怕验证的是错误的都不会影响页面显示）但是会在控制台给我们开发者一个警告的错误提示
props验证上线后需要移除
语法：
props:{
接收参数:数据类型，
//如果我想验证接收参数可以是多个类型怎么办？
接收参数:[数据类型1,数据类型2]
//默认值呢？
接收参数:{
default:”你的默认值”
}
}

props:{
        text:String,
        // num:Number
        // num:[String,Number]
        num:{
            default:"我是num的默认值",
            type:String//设置了默认值之后设置数据类型校验的写法
        }
    }

逆向传值

子组件把数据给父组件

同胞传值

平级组件之间传递数据

跨组件传值

爷孙组件或者更多层级之间的数据传递

数据请求

原生ajax与jquery的方式实现
vue-resource 是vue官方出品 vue2.0之后官方停止维护了
axios

axios

axios是一个第三方的数据请求可以在vuer中使用也可以在原生js中使用也可以在今后学习的react等知识点中使用
axios 就是基于XHR对象使用promise进行异步封装的一个扩展的写法（让他更符合当下的语法要求）
axios.get()
axios.post()
axios({ })
使用:
1.下载 npm install —save axios
2.引用
3.使用

mounted(){
        axios({
            url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
            method:"get"
        }).then((ok)=>{
            console.log(ok)
        }).catch((err)=>{
            console.log(err);
        })
    }

axios拦截器

使用
1.下载axios
2.新建util文件夹工具文件夹
3.新建api文件夹用来封装数据请求的文件夹
4.在util中新建拦截器文件

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();
// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

5.封装数据请求

import service from "@/util/service.js"
// 用来封装数据请求的文件
let getlink=(url)=>{
    // 当我调用这个函数的时候需要让他返回一个promise对象（因为我们使用promise对象来封装我们的异步请求让他的可读性更高并且更符合当下语法主流）
     return new Promise((resolve,reject)=>{
        //  来写你的异步操作
        service.request({
           url,
           method:"GET"
        }).then((ok)=>{
             resolve(ok)
        }).catch((err)=>{
              reject(err)
        })
     })
}
export default getlink

6 在需要使用的组件内调用api的请求进行数据请求

getlink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then((ok)=>{
            console.log(ok)
        }).catch((err)=>{
            console.log(err)
        })

跨域

因为浏览器的安全机制同源策略引起的同端口同域名同协议
如果数据请求出现如下错误表示跨域了

localhost/:1 Access to XMLHttpRequest at 'http://www.weather.com.cn/data/cityinfo/101320101.html' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

使用代理跨域即可解决
我们日常发送数据请求是通过浏览器进行发送的

代理跨域

1.在项目的根路径下新建vue.config.js
2.编写如下内容

module.exports={
    devServer:{
        open:true,
        // 设置跨域
        proxy:{
            "/api":{
                // target:"设置你要帮助跨域的地址"
                target:"http://www.weather.com.cn/",
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    "^/api":""
                }
            }
        }
    }
}

3.在组件的请求中设置/api

getlink("/api/data/cityinfo/101320101.html").then((ok)=>{
            console.log(ok)
        }).catch((err)=>{
            console.log(err);
        })