
 
    <!--希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部-->
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
        <hr/>
        <!--vue规定v-bind：指令可以简写为：-->
        <img :src="photo" style="width: 150px;">
    </div>
    <!--1.导入Vue的库文件-->
    <script src="./lib/vue-2.6.12.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        //创建Vue的实例对象
        const vm=new Vue({
            //el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接受的值是一个选择器
            el:'#app',
            //data对象就是要渲染到页面上的数据
            data:{
                tips:'请输入用户名',
                photo:'https://img-home.csdnimg.cn/images/20201124032511.png'
            }
        });
    </script>

在vue中，可以使用v-bind:指令，为元素的属性动态绑定值；

简写是:

使用Javascript表达式

在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持javascript表达式的运算，例如：

1.3事件绑定

vue提供了v-on时间绑定指令，用来赋值程序员为DOM元素绑定事件监听。语法格式如下：

1.v-on:简写是@

2.语法格式为：


<button @click="add"></button>
 
methods:{
    add(){
        //如果在方法中要修改data中的数据，可以通过this访问到
        this.count+=1
    }
}

3.$event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event。例如:


<button @click="add(1,$event)"></button>
 
methods:{
    add(n,e){
        //如果在方法中要修改data中的数据，可以通过this访问到
        this.count+=1
    }
}

1.4事件修饰符

.prevent

<a @click.prevent="xxx">链接</a>

.stop

<button @click.stop="xxx"></button>

1.5键盘修饰符

1.6双向绑定指令

v-model指令

1.input

2.textarea

3.select

v-model指令的修饰符

1.7条件渲染指令

1.v-show的原理是：动态为元素添加或移除 display：none样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用v-show会更好

2.v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好

3.在实际开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了

v-else

v-else-if

1.8列表渲染指令


 <!--希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部-->
    <div id="app">
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>Id</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <!--官方建议：只要用到了v-for指令，那么一定要绑定一个:key属性-->
                <!--而且，尽量把id作为key的值-->
                <!--官方对key的值类型，室友要求的：字符串或数字类型-->
                <!--key的值千万不能重复的，否则会终端报错：Duplicate keys detected-->
                <tr v-for="(item,index) in list" :key="item.id" :title="item.name">
                    <td>{{index}}</td>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
 <!--1.导入Vue的库文件-->
    <script src="./lib/vue-2.6.12.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        //创建Vue的实例对象
        const vm = new Vue({
            //el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接受的值是一个选择器
            el: '#app',
            //data对象就是要渲染到页面上的数据
            data: {
                list: [
                    { id: 1, name: '张三' },
                    { id: 2, name: '李四' },
                    { id: 3, name: '王五' }
                ]
            }
        });
    </script>

2.过滤器

2. 1过滤器的注意点

1.要定义到filters节点下，本质是一个函数

2.在过滤器函数中，一定要有return值

3.在过滤器的形参中，就可以获取到“管道符”前面待处理的那个值

4.如果全局过滤器和私有过滤器名字一致，此时安装“就近原则”，调用的是私有过滤器

2.2私有过滤器和全局过滤器

2.3过滤器传参

vue基础入门

1.什么是watch监听器

监听器的格式

1.方法格式的侦听器

缺点1:无法在刚进入页面的时候,自动触发
缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器

2.对象格式的侦听器

好处1:可以通过immediate选项,让侦听器自动触发
好处2:可以通过deep选项,让侦听器深度侦听对象中每个属性的彼岸花

immediate选项

deep选项

监听对象单个属性的变化

2.什么是计算属性

1.什么是计算属性

特点:

定义的时候,要被定义为"方法"
在使用计算属性的时候,当普通的属性使用即可

好处:

实现了代码的复用
只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值

3.axios

axios是一个专注于网络请求的库

axios的基础语法

axios的基本使用


<script src="./lib/axios.js"></script>
    <script>
        //http://www.liulongbin.top:3006/api/getbooks
 
        //1.调用axios方法得到的返回值是Promise对象
        const result = axios({
            //请求方式
            method: 'GET',
            //请求的地址
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            //URL中的查询参数
            params: {
                id: 1
            },
            //请求体参数
            data: {}
        }).then(function (result) {
            console.log(result);
        })
 
    </script>

axios的扩展


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
 
    <button id="btnPost">发起POST请求</button>
    <button id="btnGet">发起GET请求</button>
    <script src="./lib/axios.js"></script>
    <script>
        //http://www.liulongbin.top:3006/api/getbooks
 
        document.querySelector('#btnPost').addEventListener('click', async function () {
            //1.调用axios方法得到的返回值是Promise对象
            //如果调用某个方法的返回值是Promise实例,则前面可以添加await
            //await 只能用在背async"修饰"的方法中
            const { data: res } = await axios({
                //请求方式
                method: 'POST',
                //请求的地址
                url: 'http://www.liulongbin.top:3006/api/post',
                //请求体参数
                data: {
                    name: 'zs',
                    age: 20
                }
            })
 
            console.log(res);
        })
 
        document.querySelector("#btnGet").addEventListener('click', async function () {
            //结构赋值的时候,使用:进行重命名
            //1.调用axios之后,使用async/await进行简化
            //2.使用解构赋值,从axios封装的大对象中,把data属性解构出来
            //3.把解构出来的data属性,使用冒号 进行命名,一般都重命名为{data : res}
            //1.调用axios方法得到的返回值是Promise对象
            const { data: res } = await axios({
                //请求方式
                method: 'GET',
                //请求的地址
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                //URL中的查询参数
                params: {
                    // id: 825
                }
            })
 
            console.log(res);
 
        })
    </script>
</body>
 
</html>

4.vue-cli

1.什么是单页面应用程序

2.什么是vue-cli

3.vue-cli的使用

1.在终端下运行如下的命令,创建指定名称的项目:

vue create 项目名称

2.vue项目中src目录的构成:

assets 文件夹:存放项目钟用到的静态资源文件,例如:css样式表图片资源

components 文件夹:程序员封装的可复用的组件,都要放到components目录下

main.js 是项目的入口文件,整个项目的运行,要先执行main.js

App.vue 是项目的根组件

4.vue项目的运行流程

5.vue组件

1.什么是组件化开发

2.vue中的组件化开发

3.vue组件的三个组成部分


<template>
    <div class=".test-box">
        <h3>这是用户自定义的 Test.vue --- {{username}}</h3>
    </div>
</template>
 
<script>
//默认导出,这是固定写法
export default {
    //默认导出 这是固定写法
    //data 数据源
    //注意 .vue组件中的data不能像之前一样,不能指向对象
    //注意:组件中的data必须是一个函数
    data(){
        //这个return出去的{ }中,可以定义数据
        return {
            username:'admin'
        }
    }
}
</script>
 
<style>
    .test-box{
        background-color: pink;
    }
</style>

4.组件之间的父子关系

4.1使用组件的三个步骤

4.2注册全局组件

5.组件的props

5.1props是只读的

5.2props的default默认值

5.3props的type值类型

5.4props的require

6.组件之间的样式冲突问题

6.1解决组件之间的样式冲突

<style lang="less" scoped>

6.2 /deep/样式穿透


// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}

6.组件的生命周期

1.生命周期&生命周期函数

2.组件的生命周期函数的分类

7.组件之间的数据共享

1.组件之间的关系

2.父组件向子组件共享数据

3.子组件向父组件共享数据

4.兄弟组件之间的数据共享

5.EventBus的使用步骤

8.ref

1.什么是ref引用

2.使用ref引用DOM


<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="showThis">更新h1</button>
    <hr />
  </div>
</template>
 
<script>
 
 
export default {
 methods: {
    showThis() { 
      //当前App组件的实例对象
      this.$refs.myh1.style.color = 'red'
      console.log(this);
    }
  }
}
</script>

3.使用ref引用组件

app.vue如下:


<template>
  <div class="app-container">
    <button @click="onReset">重复Left组件的count值为0</button>
    <hr />
 
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
    <button v-else @click="showInput">展示输入框</button>
 
    <hr/>
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3. 以标签形式，使用注册好的组件 -->
      <Left ref="comLeft"></Left>
    </div>
  </div>
</template>
 
<script>
 
//1.导入需要使用的.vue组件
import Left from '@/components/Left.vue'
 
export default {
  //2.注册组件
  components: {
    Left
  }, methods: {
    onReset() { 
      this.$refs.comLeft.resetCount()
    }
  }
}
</script>

Left.vue如下:


<template>
  <div class="left-container">
    <h3>Left 组件 --- {{count}}</h3>
    <button @click="count+=1">+1</button>
    <button @click="resetCount">重置</button>
  </div>
</template>
 
<script>
 
export default {
  data() { 
    return {
      count:0
    }
  }, methods: {
    resetCount() {
      this.count=0
    }
  }
}
</script>
 
<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
 
h3 {
  color: red;
}
 
// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5
 
// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}
</style>

4.this.$nextTick的应用场景


<template>
  <div class="app-container">
   
 
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef"/>
    <button v-else @click="showInput">展示输入框</button>
 
    <hr/>
   
  </div>
</template>
 
<script>
 
//1.导入需要使用的.vue组件
import Left from '@/components/Left.vue'
 
export default {
  //2.注册组件
  components: {
    Left
  }, methods: {
    //点击按钮,展示输入框
    showInput() { 
      //1.切换布尔值,把文本框展示出来
      this.inputVisible = true
      //2.让展示出来的文本框,自动获取焦点
      this.$nextTick(() => { 
        this.$refs.iptRef.focus()
      })
      
    },
    //输入框失去焦点,显示按钮
    showButton() { 
      this.inputVisible=false
    }
  },
  data() { 
    return {
      //控制输入框和按钮的按需切换
      inputVisible: false
    }
  }
}
</script>

9.动态组件

1.什么是动态组件

2.如何实现动态组件渲染

3.使用keep-alive保持状态

4.keep-alive对应的生命周期函数

5.keep-alive的include属性

10.插槽

1.什么是插槽


<template>
  <div class="app-container">
    <h1>App 根组件</h1>
 
    <hr/>
    
    <div class="box">
      <Left>
        <!--默认情况下,在使用组件的时候,提供的内容都会被填充到名称为default的插槽之中-->
        <!--1.如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令-->
        <!--2.v-slot:后面要跟上插槽的名称-->
        <!--3.v-slot:指令不能直接使用在元素身上,必须用在template标签上-->
        <!--4.template这个标签,它是一个虚拟的标签,只起到包裹性质的作用,但是,不会被渲染为任何实质性的html元素-->
        <!--5.v-slot:指令的简写形式是#-->
        <template #defalut><p>这是在Left组件的内容区域,声明的p标签</p></template>
      </Left>
    
    </div>
  </div>
</template>
 
<script>
 
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
 
export default {
  data() { 
    return {
      //comName 表示要展示的组件的名字
      comName:'Left'
    }
  },
  components: {
    //如果在"声明组件"的时候,没有为组件指定name名称,则组件的名称默认就是"注册时候的名称"
    Left,
    Right
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>


<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    
    <hr />
    <!--声明一个插槽区域-->
    <!--vue官方规定:每一个slot插槽,都要有一个name名称-->
    <!--如果省略了slot的name属性,择优一个默认名称叫做default-->
    <slot name="default"></slot>
  </div>
</template>
 
<script>
export default {
  
  name:'MyLeft'
}
</script>
 
<style lang="less" scoped>
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
 
h3 {
  color: red;
}
 
// h5[data-v-3c83f0b7]
// [data-v-3c83f0b7] h5
 
// 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/
/deep/ h5 {
  color: pink;
}
</style>

2.后备内容

3.具名插槽


<template>
  <div class="article-container">
    <!--渲染文章的标题-->
    <div class="header-box">
        <slot name="title"></slot>
    </div>
 
    <!--文章的内容-->
    <div class="content-box">
        <slot name="content"></slot>
    </div>
 
    <!--文章的作者-->
    <div class="footer-box">
        <slot name="author"></slot>
    </div>
 
  </div>
</template>

4.作用域插槽


<template>
  <div class="app-container">
    <h1>App 根组件</h1>
 
    <hr/>
    
    <Article>
      <template #title>
        <h3>一首诗</h3>
      </template>
      
      <template #content="scope">
        <p>啊,大海,全是水.</p>
        <p>啊,蜈蚣,全是腿</p>
        <p>啊,辣椒,净辣嘴</p>
        <p>{{ scope }}</p>
      </template>
 
      <template #author>
        <div>作者:彬果锅</div>
      </template>
 
    </Article>
</template>


<template>
  <div class="article-container">
 
    <!--文章的内容-->
    <div class="content-box">
        <!--在封装组件时,为预留的<slot>提供属性对应的值,这种用法,叫做"作用域插槽"-->
        <slot name="content" msg="hello.vue.js" :user="userInfo"></slot>
    </div>
 
  </div>
</template>
 
<script>
export default {
    //首字母要大写
    name: 'Article',
    data() { 
        return {
            userInfo: {
                name: 'zs',
                age:20
            }
            
        }
    }
}
</script>

11.自定义指令

1.什么是自定义指令

2.自定义指令的分类

3.私有自定义指令


<template>
  <div class="app-container">
    <h1 v-color="color">App 根组件</h1>
    <p v-color="'red'">测试</p>
</template>
 
<script>
export default {
  data() { 
    return {
      color:'blue'
    }
  },
  directives: {
    //定义名为color的指令,指向一个配置对象
    color: {
      //当指令第一次被绑定到元素上的时候,会立即触发bind函数
      //形参中的el表示当前指令锁绑定到的那个DOM对象
      bind(el,binding) { 
        console.log("触发了v-color的bind函数");
        el.style.color = binding.value
 
        console.log(binding);
 
      }
    }
  }
}
</script>

4.update函数

5.函数简写

6.全局自定义指令

7.配置全局axios

main.js中配置


import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
 
Vue.config.productionTip = false
 
// 全局配置axios的请求根路径
axios.defaults.baseURL = '请求根路径'
// 把axios 挂载到 Vue.prototype上,供每个 .vue组件的实例直接使用
Vue.prototype.$http = axios
 
// 今后,在每个 .vue组件中药发起请求,直接调用 this.$http.xxx
 
new Vue({
  render: (h) => h(App)
}).$mount('#app')

12.路由

1.什么是路由

2.SPA与前端路由

3.什么是前端路由

4.前端理由的工作方式


<template>
  <div class="app-container">
    <h1>App 根组件</h1>
 
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
 
    <component :is="comName"></component>
  </div>
</template>
 
<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
 
export default {
  name: 'App',
  data() {
    return {
      // 在动态组件的位置,要展示的组件的名字,值必须是字符串
      comName: 'Home'
    }
  },
  created() {
    // 只要当前的App组件一被创建,就立即监听window对象的onhashchange事件
    window.onhashchange = () => {
      console.log('监听到了 hash 地址的变化', location.hash)
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>
 
<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

13.vue-router的基本用法

1.什么是vue-router

2.vue-router安装和配置的步骤

2.1在项目中安装vue-router

2.2创建路由模块


// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
 
//导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
 
Vue.use(VueRouter)
 
// 创建路由的实例对象
const router = new VueRouter({
  //路由规则
  routes: [
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About}
  ]
})
 
export default router

2.3导入并挂载路由模块


import Vue from 'vue'
import App from './App.vue'
// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js 的文件
import router from '@/router/index.js'
 
// 导入 bootstrap 样式
import 'bootstrap/dist/css/bootstrap.min.css'
// 全局样式
import '@/assets/global.css'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  // 在Vue项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载
  // router: 路由的实例对象
  router: router
}).$mount('#app')

2.4声明路由连接和占位符


<template>
  <div class="app-container">
    <h1>App2 组件</h1>
 
    <!--当安装和配置了vue-router后,就可以使用router-link来替代普通的a链接了-->
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
 
    <hr />
 
    <!--只要在项目中安装和配置了 vue-router,就可以使用router-view这个组件了-->
    <!--它的作用很单纯:占位符-->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>

14.vue-router的常见用法

1.路由重定向


Vue.use(VueRouter)
 
// 创建路由的实例对象
const router = new VueRouter({
  //路由规则
  routes: [
    //当用户访问/的时候,通过redirect属性跳转到/home对应的路由规则
    { path: '/',redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About}
  ]
})

2.嵌套路由

3.通过children属性声明子路由规则


<template>
  <div class="about-container">
    <h3>About 组件</h3>
 
    <!--子集路由链接-->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr />
 
    <!--子集路由占位符-->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'About'
}
</script>
 
<style lang="less" scoped>
.about-container {
  min-height: 200px;
  background-color: skyblue;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>


// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
 
//导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'
 
import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'
 
 
Vue.use(VueRouter)
 
// 创建路由的实例对象
const router = new VueRouter({
  //路由规则
  routes: [
    //当用户访问/的时候,通过redirect属性跳转到/home对应的路由规则
    { path: '/',redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    {
      path: '/about', component: About, children: [
        //子路由规则
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})
 
export default router

4.默认子路由

使用redirect设置当前默认显示的子路由,不加默认不显示


// 创建路由的实例对象
const router = new VueRouter({
  //路由规则
  routes: [
    {
      path: '/about',
      component: About,
      //默认子路由
      redirect: '/about/tab1',
      children: [
        //子路由规则
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

5.动态路由匹配

6.声明式导航&编程式导航

6.1vue-roter中的编程式导航API

6.2$router.push

this.$router.push('/movie/1')

6.3$router.repalce

this.$router.replace('/movie/1')

6.4$router.go

// go(-1) 表示后退一层

// 如果后退的层数超过上限，则原地不动

this.$router.go(-1)

6.5$router.go的简化用法

<button @click="$router.back()">back 后退</button>

<button @click="$router.forward()">forward 前进</button>

7.导航守卫

7.1全局前置守卫

7.2守卫方法的3个形参

7.3next函数的3种调用方式

7.4控制后台主页的访问权限

扩展

1.封装utils目录下的request模块

用于给不同的api调用不同的地址

在src新建utils文件夹并创建request.js


import axios from 'axios'
 
const request = axios.create({
  // 指定请求的根路径
  baseURL: 'https://www.escook.cn'
})
 
export default request

假设有多个地址,可以创建多个mini axios 调用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/269273