Vue 常用特性

最新推荐文章于 2022-07-12 22:19:43 发布

MichstaBe-IMUT

最新推荐文章于 2022-07-12 22:19:43 发布

阅读量167

点赞数

分类专栏： Vue 文章标签：过滤器 vue js

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/115283196

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

常用特性

概览

⚫ 表单操作
⚫ 自定义指令
⚫ 计算属性
⚫ 侦听器
⚫ 过滤器
⚫ 生命周期

表单操作

⚫ Input 单行文本
⚫ textarea 多行文本
⚫ select 下拉多选
⚫ radio 单选框
⚫ checkbox 多选框

<body>
  <div id="app">
    <form action="http://itcast.cn">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
      </div>
      <div>
        <span>性别：</span>
        <span>
          <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>
        </span>
      </div>
      <div>
        <span>爱好：</span>
        <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>
      <div>
        <span>职业：</span>
        <select v-model='occupation' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
      </div>
      <div>
        <span>个人简介：</span>
        <textarea v-model='desc'></textarea>
      </div>
      <div>
        <input type="submit" value="提交" @click.prevent='handle'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'lisi',
        gender: 2,
        hobby: ['2','3'],
        // occupation: 3
        occupation: ['2','3'],
        desc: 'nihao'
      },
      methods: {
        handle: function(){
          // console.log(this.uname)
          // console.log(this.gender)
          // console.log(this.hobby.toString())
          // console.log(this.occupation)
          console.log(this.desc)

        }
      }
    });
  </script>
</body>

表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy : 将input事件切换为change事件

<body>
    <div id="app">
        <!-- 默认是字符串拼接 12+13=1213  所以更改为数值类型 12+13=25 -->
        <input type="text" v-model.number='age'>
        <!-- 去除首尾空白 中间的不会去掉 -->
        <input type="text" v-model.trim='info'>
        <!-- 当鼠标离开输入框 数值才会变化 -->
        <input type="text" v-model.lazy='msg'>
        <div>{{msg}}</div>
        <button @click='handle'>点击</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 表单域修饰符

        var vm = new Vue({
            el: '#app',
            data: {
                age: '',
                info: '',
                msg: ''
            },
            methods: {
                handle: function() {
                    // console.log(this.age + 13)
                    // console.log(this.info.length)
                }
            }
        });
    </script>
</body>

自定义指令

内置指令不满足需求,所以需要自定义指令

自定义指令的语法规则（获取元素焦点）

Vue.directive('focus', {
            inserted: function(el) {
                //el表示指令所表示的元素
                el.focus();
            }
        })

<body>
    <div class="app">
        <input type="text" v-focus>
        <input type="text">
    </div>
    <script src="../Vue基础/js/vue.js"></script>
    <script>
        // 自定义指令
        Vue.directive('focus', {
            inserted: function(el) {
                //el表示指令所表示的元素
                el.focus();
            }
        })
        var vm = new Vue({
            el: '.app',
            data: {

            }
        })
    </script>
</body>

带参数的自定义指令（改变元素背景色）

Vue.directive(‘color ', {
        inserted: function(el, binding) {
            el.style.backgroundColor = binding.value.color;
        }
        })

<body>
  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-带参数
    */
    Vue.directive('color', {
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>

局部指令

directives: {
            focus: {
                // 指令的定义
                inserted: function(el) {
                    el.focus()
                }
            }
        }

body>
    <div id="app">
        <input type="text" v-color='msg'>
        <input type="text" v-focus>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                      自定义指令-局部指令
                    */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: 'red'
                }
            },
            methods: {
                handle: function() {

                }
            },
            directives: {
                color: {
                    bind: function(el, binding) {
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
                    inserted: function(el) {
                        el.focus();
                    }
                }
            }
        });
    </script>
</body>

注意：局部指令只能在当前组件中使用

计算属性

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

用法

computed: {
                reversedMessage: function() {
                    return this.msg.split('').reverse().join('');
                }
            }

<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>{{reversedMessage}}</div>
    </div>
    <script type="text/javascript" src="../Vue基础/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Nihao'
            },
            computed: {
                reversedMessage: function() {
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>
</body>

计算属性的setter和getter

<body>
    <div class="app">
        <div>{{Fullname}}</div>
    </div>
    <script src="../Vue基础/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ".app",
            data: {
                firstname: 'LWX',
                lastname: 'meom'
            },
            computed: {
                Fullname: {
                    //set属性一般不使用 如果使用需要传递一个参数 
                    set: function(event) {
                        console.log('---');
                        let name = event.split(' ');
                        this.firstname = name[0];
                        this.lastname = name[1]
                    },
                    get: function() {
                        return this.firstname + ' ' + this.lastname;
                    }
                }
            }
        })
    </script>
</body>

此时代码的网页效果：
在这里插入图片描述
在打印台修改后：

此时就调用了set方法 
把值传递给了event 又传递给了firstname lastname 
这样返回的的Fullname就是修改的值

计算属性与方法的区别

⚫ 计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

⚫ 方法不存在缓存

<body>
        <div class="app">
            <!-- methods会打印3次1 -->
            <div>{{getFullname()}}</div>
            <div>{{getFullname()}}</div>
            <div>{{getFullname()}}</div>

            <!-- 计算属性会打印1次1 -->
            <div>{{Fullname}}</div>
            <div>{{Fullname}}</div>
            <div>{{Fullname}}</div>
        </div>
        <script src="../Vue基础/js/vue.js"></script>
        <script>
            var vm = new Vue({
                el: ".app",
                data: {
                    firstname: 'LWX',
                    lastname: 'meom'
                },
                methods: {
                    getFullname: function() {
                        console.log(1);
                        return this.firstname + '' + this.lastname
                    }
                },
                computed: {
                    Fullname: function() {
                        console.log(1);
                        return this.firstname + ' ' + this.lastname;
                    }

                }
            })
        </script>
    </body>

ES6回补

let/var

事实上var的设计可以看成JavaScript语言设计上的错误. 但是这种错误多半不能修复和移除, 以为需要向后兼容.

大概十年前, Brendan Eich就决定修复这个问题, 于是他添加了一个新的关键字: let

可以将let看成更完美的var

块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关

针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

let声明是有作用域的，解决了很多问题

const的使用

在很多语言中已经存在, 比如C/C++中, 主要的作用是将某个变量修饰为常量

在JavaScript中也是如此, 使用const修饰的标识符为常量, 不可以再次赋值

什么时候使用const呢?
当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性

建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.

const a = 20;
a = 30; //错误，不可以修改

const name = ; //错误 const修饰的标识符必须赋值

对象增强写法

ES6中，对对象字面量进行了很多增强。属性初始化简写和方法的简写：

<script>
        //属性的简写

        //ES5之前写法
        let name = 'xiaoyang';
        let age = 18;
        let obj1 = {
            name: name,
            age: age
        }
        console.log(obj1);
        //ES6之后写法
        let obj2 = {
            name,
            age
        }
        console.log(obj2);
    </script>

在这里插入图片描述
//方法的简写

   <script>
        //ES6之前
        let obj3 = {
            test: function() {
                console.log("obj3的test函数");
            }
        }
        obj3.test(); //obj3的test函数

        //ES6之后
        let obj4 = {
            test() {
                console.log("obj4的test函数");
            }
        }
        obj4.test(); //obj4的test函数
    </script>

高阶函数

filter()
map()
reduce()

// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)

// filter/map/reduce

// filter中的回调函数有一个要求: 必须返回一个boolean值
// true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
// false: 当返回false时, 函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 444, 40, 50]
//箭头函数写法
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
// console.log(total);

let total = nums.filter(function (n) {
  return n < 100
}).map(function (n) {
  return n * 2
}).reduce(function (prevValue, n) {
  return prevValue + n
}, 0)
console.log(total);

// 1.filter函数的使用
// // 10, 20, 40, 50
let newNums = nums.filter(function (n) {
  return n < 100
})
// // console.log(newNums);
//
// // 2.map函数的使用
// // 20, 40, 80, 100
let new2Nums = newNums.map(function (n) { // 20
  return n * 2
})
// console.log(new2Nums);
//
// // 3.reduce函数的使用
// // reduce作用对数组中所有的内容进行汇总
let total = new2Nums.reduce(function (preValue, n) {
   return preValue + n
}, 0)
// console.log(total);

// 第一次: preValue 0 n 20
// 第二次: preValue 20 n 40
// 第二次: preValue 60 n 80
// 第二次: preValue 140 n 100
// 240

// // 1.需求: 取出所有小于100的数字
// let newNums = []
// for (let n of nums) {
   if (n < 100) {
     newNums.push(n)
   }
 }
//
// // 2.需求:将所有小于100的数字进行转化: 全部*2
 let new2Nums = []
 for (let n of newNums) {
   new2Nums.push(n * 2)
 }
//
// console.log(new2Nums);
//
//
// // 3.需求:将所有new2Nums数字相加,得到最终的记过
 let total = 0
 for (let n of new2Nums) {
   total += n
 }

// console.log(total);

那些数组的方法是响应式的

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

<body>

    <div id="app">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>
        <button @click="btnClick">按钮</button>
    </div>

    <script src="../Vue基础/js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: ['a', 'b', 'c', 'd']
            },
            methods: {
                btnClick() {
                    //这些方法都是响应式的
                    // 1.push方法
                    this.letters.push('aaa')
                    this.letters.push('aaaa', 'bbbb', 'cccc')

                    // 2.pop(): 删除数组中的最后一个元素
                    this.letters.pop();

                    // 3.shift(): 删除数组中的第一个元素
                    this.letters.shift();

                    // 4.unshift(): 在数组最前面添加元素
                    this.letters.unshift()
                    this.letters.unshift('aaa', 'bbb', 'ccc')

                    // 5.splice作用: 删除元素/插入元素/替换元素
                    // 删除元素: 
                    //第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
                    this.letters.splice(1, 2)
                    splice(1):
                    // 替换元素:
                    //第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
                    this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
                    // 插入元素:
                    //第二个参数, 传入0, 并且后面跟上要插入的元素
                    this.letters.splice(1, 0, 'x', 'y', 'z')


                    // 6.sort()
                    this.letters.sort()

                    // 7.reverse()
                    this.letters.reverse()

                    // 注意: 通过索引值修改数组中的元素,不是响应式的的
                    this.letters[0] = 'bbbbbb';

                    //下面的方法是响应式的
                    this.letters.splice(0, 1, 'bbbbbb')
                    // set(要修改的对象, 索引值, 修改后的值)
                    Vue.set(this.letters, 0, 'bbbbbb')
                }
            }
        })


        // function sum(num1, num2) {
        //   return num1 + num2
        // }
        //
        // function sum(num1, num2, num3) {
        //   return num1 + num2 + num3
        // }
        // function sum(...num) {
        //数组形式
        //   console.log(num);
        // }
        //
        // sum(20, 30, 40, 50, 601, 111, 122, 33)
    </script>

</body>

购物车案列

在这里插入图片描述
index.html

<!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">
    <link rel="stylesheet" href="./index.css">
    <title>Document</title>
</head>

<body>
    <div class="app">
        <div v-if="books.length">
            <table>
                <thead>
                    <tr>
                        <td></td>
                        <td>书籍信息</td>
                        <td>出版日期</td>
                        <td>价格</td>
                        <td>购买数量</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.date}}</td>
                        <td>{{item.price | showFinalPrice}}</td>
                        <td>
                            <button @click="decrement(index) " v-bind:disabled="item.count<=1">-</button> {{item.count}}
                            <button v-on:click="increment(index)">+</button>
                        </td>
                        <td @click="remove">移除</td>
                    </tr>
                </tbody>
            </table>

            <h2>总价格: {{totalPrice | showFinalPrice}}</h2>
        </div>
        <div v-else>
            <h2>空</h2>
        </div>
        <script src="./vue.js"></script>
        <script src="./main.js"></script>
    </div>
</body>

</html>

index.css

table {
    border: 1px solid #b61c1c;
    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #0cda7a;
    text-align: center;
}

th {
    background-color: #67bea1;
    color: #5c6b77;
    font-weight: 600;
}

main.js

const app = new Vue({
    el: '.app',
    data: {
        books: [{
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59.00,
                count: 1
            },
            {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39.00,
                count: 1
            },
            {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128.00,
                count: 1
            },
        ]
    },
    methods: {
        // +操作
        increment(index) {
            this.books[index].count++;
        },
        // -操作
        decrement(index) {
            this.books[index].count--
        },
        // 移除操作
        remove(index) {
            return this.books.splice(index, 1);
        }


    },
    computed: {
        //总价计算
        totalPrice() {
            let totalPrice = 0
            for (let i = 0; i < this.books.length; i++) {
                totalPrice += this.books[i].price * this.books[i].count
            }
            return totalPrice

            // for (let i in/of this.books)
            // reduce
        }
    },
    //过滤器
    filters: {
        showFinalPrice(price) {
            return '￥' + price.toFixed(2);
        }
    }
})

MichstaBe-IMUT

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 常用特性

常用特性概览⚫ 表单操作⚫ 自定义指令⚫ 计算属性⚫ 侦听器⚫ 过滤器⚫ 生命周期表单操作⚫ Input 单行文本⚫ textarea 多行文本⚫ select 下拉多选⚫ radio 单选框⚫ checkbox 多选框<body> <div id="app"> <form action="http://itcast.cn"> <div> <span>姓名：</span&gt
复制链接

扫一扫