【Vue】Vue基础（2）

最新推荐文章于 2024-06-16 18:09:06 发布

Composition55555

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量70

点赞数

文章标签： vue javascript 过滤器

本文链接：https://blog.csdn.net/weixin_41619240/article/details/110874834

版权

【笔记】2020入门笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

文章目录

VUE
- 二、Vue基础（2）

VUE

二、Vue基础（2）

01.表单操作

（1）获取单选框和复选框的值

解释说明：
- 每一个单选框（复选框）必须要有value属性且value 值不能一样
- 每个单选框（复选框）需要同时通过v-model双向绑定data中的一个数据
- 如果这个数据有默认值，则会让value值相同的单选框（复选框）被选中
- 当某一个单选框（复选框）选中的时候，data中的这个绑定的数据就会改变为当前被选中的value值

语法示例：

<div id="app">
    <input type="radio" id="male" value="1" v-model='gender'>
    <label for="male">男</label>
    <input type="radio" id="female" value="2" v-model='gender'>
    <label for="female">女</label>
    
    <input type="checkbox" id="ball" value="1" v-model='hobby'>
    <label for="ball">篮球</label>
    <input type="checkbox" id="sing" value="2" v-model='hobby'>
    <label for="sing">唱歌</label>
    <input type="checkbox" id="code" value="3" v-model='hobby'>
    <label for="code">写代码</label>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            // 默认会让当前的 value 值为 2 的单选框选中
            gender: 2,  
            hobby: ["1", "2"]
        }
    })
</script>

（2）获取下拉框和文本框的值

解释说明：
- 每一个option必须要有value属性且value值不能一样
- 需要给select通过v-model双向绑定一个值
- 当某一个option选中的时候 v-model 会将绑定的值改变为当前的 value值
  - 当多选时，需要给select添加multiple，然后绑定的值是数组形式
- textarea 是一个双标签，不需要绑定value属性的，用法同input文本框，直接双向绑定数据

语法示例：

<div id="app">
    <select v-model='occupation' multiple>
        <option value="0">请选择职业...</option>
        <option value="1">教师</option>
        <option value="2">软件工程师</option>
        <option value="3">律师</option>
    </select>
    
    <textarea v-model='desc'></textarea>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            occupation: ['2', '3'],
            desc: 'nihao'
        }
    })
</script>

02.自定义指令

（1）注册全局指令

解释说明：通过Vue.directive()来注册全局指令

语法示例：

<script>
    // focus，即自定义指令名称，使用时需要加上v-前缀，即v-focus
	Vue.directive("focus",{
        // 表示将绑定元素插入到DOM中，el表示指令绑定的DOM元素
       inserted: function(el){
           // 设定当前绑定DOM元素的方法事件
           el.focus();
       } 
    });
</script>

带参数

<script>
    // color，即自定义指令名称，使用时需要加上v-前缀，即 v-color="..."
	Vue.directive("color",{
        // 表示将绑定元素插入到DOM中，el表示指令绑定的DOM元素
        // binding为自定义的函数形参，通过自定义属性传递过来的值（参数），存储在binding.value里面
       bind: function(el, binding){
           // 设定当前绑定DOM元素的方法事件
           el.style.backgroundColor = binding.value.color;
       } 
    });
</script>

（2）注册局部指令

解释说明：局部指令需要定义在Vue实例的 directives 选项中

语法示例：

<script>
	let vm = new Vue({
       el: "#app",
       //局部指令，需要定义在  directives 选项中
       directives: {
           color: {
               bind: function(el, binding){
               		el.style.backgroundColor = binding.value.color;
               }
           },
           focus: {
               focus: function(el){
                   el.focus();
               }
           }
       }
    });
</script>

03.计算属性

优势：模板中放入太多的逻辑，会让模板过重且难以维护，使用计算属性可以让模板更加的简洁
计算属性与方法的区别：
- 计算属性是基于它们的响应式依赖进行缓存的
  
  当多次调用计算属性里面的方法： reverseString 的时候
  只要 data 里面的 num 值不改变，它就会把第一次计算的结果直接返回
  直到 data 中的 num 值改变，计算属性才会重新发生计算
- 方法不缓存
  
  调用methods中的方法的时候，每次都会重新调用

computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是有多个变量中的某一个值发生了变化，那么我们监控的这个值也会发生变化

<div id="app">
    <!-- 这里实际上 reverseString 只调用了一次-->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>

    <!-- 调用methods中的方法的时候，每次都会重新调用，即这里调用了两次 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello',
            num: 100
        },
        methods: {
            reverseMessage: function(){
                return this.msg.split('').reverse().join('');
            }
        },
        computed: {
            reverseString: function(){
                let total = 0;
                //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算  
                for(var i=0;i<=this.num;i++){
                    total += i;
                }
                // 这里一定要有return，否则调用 reverseString 的时候无法拿到结果
                return total;
            }
        }
    });
</script>

04.监听器

使用watch来监听响应数据的变化
watch中的属性一定是data 中已经存在的数据

当需要监听一个对象的改变时，普通的watch法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

<script>
	let vm = new Vue({
        el: "#app",
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        watch: {
            // 注意：这里firstName 对应data中的 firstName 
            // 当 firstName 值改变的时候，会自动触发 watch 中的这个方法
            // 这个val就是前面的firstName属性值
            firstName: function(val) {
                this.fullName = val + ' ' + this.lastName;
            },
            //  注意：这里 lastName 对应着 data 中的 lastName 
            lastName: function(val) {
                this.fullName = this.firstName + ' ' + val;
            }
        }
    });
</script>

05.过滤器

Vue允许自定义过滤器，可被用于一些常见的文本格式化
过滤器可以用在两个地方：插值表达式和v-bind表达式
过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号|指示
支持级联操作（同时支持多个过滤器，需要将前一个过滤器的结果返回，以传给后一个过滤器处理）
过滤器不改变真正的data，而是改变渲染的结果，并返回过滤后的结果
全局注册时是filter，没有s的；而局部过滤器是filters，是有s的
- 局部过滤器只在对应Vue实例挂载的元素区间内生效

  <div id="app">
    <input type="text" v-model='msg'>
     <!-- upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到过滤函数 upper 中 -->
    <div>{{msg | upper}}</div>
      
    <!--  支持级联操作 -->
    <div>{{msg | upper | lower}}</div>
      
  </div>
<script>
    // 定义全局过滤器,第一个参数为过滤器的名称
	Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });

    let vm = new Vue({
        el: "#app",
        data: {
            firstName: 'Jim',
            lastName: 'Green',
            fullName: 'Jim Green'
        },
        //  定义局部过滤器，filters
        filters: {
            //   upper为自定义的过滤器名字 
            upper: function(val) {
                //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
                return val.charAt(0).toUpperCase() + val.slice(1);
            }
        }
    });
</script>

过滤器参数

<div id="box">
    <!--
    filterA 被定义为接收三个参数的过滤器函数。
    其中 message 的值作为第一个参数，
    普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
    -->
    {{ message | filterA('arg1', 'arg2') }}
</div>
<script>
	Vue.filter('filterA', function(value, arg) {
        // 从arg开始对应传入的参数
        return ;
    });
</script>

06.生命周期（简）

基本概念
- 事物从出生到死亡的过程
- Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
常用的钩子函数

函数名称	解释说明
beforeCreate	在实例初始化之后，数据观测和事件配置之前，被调用。此时data 和 methods 以及页面的DOM结构都没有初始化，什么都做不了
created	在实例创建完成后被立即调用，此时data 和 methods已经可以使用，但是页面还没有渲染出来
beforeMount	在挂载之前被调用，此时页面上还看不到真实数据，只是一个模板页面
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。页面上数据还是旧的
updated	由于数据更改，导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

07.fetch

基本概念

Fetch API是新的ajax解决方案, Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生JS，没有使用XMLHttpRequest对象

fetch(url, options).then()

<script>
    /*
      Fetch API 基本用法
      	fetch(url).then()
     	第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
        // text()方法属于 fetchAPI 的一部分，它返回一个Promise实例对象——用于获取后台返回的数据
        return data.text();
    }).then(function(data){
        // 在这个 then 里面我们能拿到最终的数据  
        console.log(data);
    })
</script>

请求参数
- 常用配置选项：
  - 设置HTTP请求方法：method:"get"
    
    GET，POST，PUT，DELETE
  - 设置HTTP请求参数：body: "name=Ruovan&age=24"
    
    GET 请求参数在地址栏后面
    
    POST，PUT 请求中，设置请求参数
  - 设置HTTP请求头：header: {'Content-Type': 'application/x-www-form-urlencoded'}
    
    POST，PUT 请求中，设置请求头
响应结果
- 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等
- text()：将返回体处理成字符串类型
- json()：返回JSON格式的数据，作用同JSON.parse(responseText)

08.axios

（1）基本概念

axios是一个库，用于处理Vue中的Ajax请求

（2）基础用法

get 和 delete请求传递参数

通过传统url方式，在地址栏以 ?的形式传递参数
通过restful形式传递参数
通过params 形式传递参数

// 传统URL传参
axios.get("/axios?id=123").then( (ret) => {
    // ret 是一个对象，会自动包装属性，真实数据存储在 data 属性里面
    conosle.log(ret.data);
})
// Restful传参
axios.get("/axios/123").then( (ret) => {
    conosle.log(ret.data);
})
// params传参
axios.get("/axios",{
    params: {
        id: 123
    }
}).then( (ret) => {
    conosle.log(ret.data);
})

post 和 put 请求传递参数

通过选项传递参数
通过 URLSearchParams 传递参数

// 通过选项传递参数
axios.post("/axios", {
    name: "Ruovan",
    age: 24
}).then( (ret) => {
    console.log(ret.data)
})

// 通过 URLSearchParams  传递参数 
let params = new URLSearchParams();
params.append('name', 'Ruovan');
params.append('age', '24');
axios.post("/axios", params).then( (ret) => {
    console.log(ret.data);
})

// PUT 
axios.post("/axios/123", {
    name: "Ruovan",
    age: 24
}).then( (ret) => {
    console.log(ret.data)
})

axios响应结果
- data：实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText：响应状态信息

（3）axios的全局配置

// 配置请求的基准URL地址
axios.defaults.baseURL = 'https://api.example.com';
// 配置 超时时间
axios.defaults.timeout = 2500;
// 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

（4）axios拦截器

请求拦截器

请求拦截器的作用是：在请求发送前进行一些操作
- 例如，在每个请求体里加上token，统一做处理，如果以后要改也非常容易

// 请求拦截器 
axios.interceptors.request.use(function(config) {
    console.log(config.url);
    // 在发送请求之前的操作(任何请求都会经过这一步)
    config.headers.mytoken = 'nihao';
    // 这里一定要return，否则配置不成功  
    return config;
}, function(err){
    // 对请求错误进行操作
    console.log(err);
})

响应拦截器

响应拦截器的作用是：在接收到响应后进行一些操作
- 例如，在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

// 响应拦截器 
axios.interceptors.response.use(function(res) {
    // 在接收响应后的操作
    var data = res.data;
    return data;
}, function(err){
    // 对响应错误的操作
    console.log(err);
})

09. async 和 await

async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
async/await 让异步代码看起来、表现起来更像同步代码

// 1.  async 基础用法
// async作为一个关键字放到函数前面
async function queryData() {
    // await关键字只能在使用async定义的函数中使用      
    // await后面可以直接跟一个 Promise实例对象
    var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('nihao')
        },1000);
    })
    // console.log(ret.data)
    return ret;
}
// 任何一个async函数都会隐式返回一个promise，所以我们可以使用Promise对象的一些方法
queryData().then(function(data){
    console.log(data)
})

// 2.  处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';

async function queryData() {
    // 添加await之后，变成同步操作，返回结果之后，才继续往下执行后面的代码   
    var info = await axios.get('async1');
    var ret = await axios.get('async2?info=' + info.data);
    return ret.data;
}

queryData().then(function(data){
    console.log(data)
})