前端学习-VUE-part1（v-on指令，组件、过滤器、计算属性、观察属性介绍）

最新推荐文章于 2024-06-05 09:56:35 发布

yxnd150150

最新推荐文章于 2024-06-05 09:56:35 发布

阅读量250

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/yxnd150150/article/details/105449701

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

萌新入坑前端，刚开始学习Vue，把自己学习到的知识做个记录，主要是语法的规范和定义，若有不对的地方，还希望大佬们多多指教哈。因为不涉及复杂的css样式且只用到Vue，html代码的头文件因为文章长度就不放进代码段了，请您自行添加。
Vue的学习是通过官方文档学习，额外在B站观看了小马哥的Vue教学视频

v-on:click

v-on:click用于绑定鼠标点击，可以跟随一个函数用于触发事件，v-on:click可以缩写为@click，要注意是没有冒号的。例子如下：

<body>
    <div id="myApp">
        <p>准备创建{{question}}</p>
        <button v-on:click="btnclick('单选题')">单选题</button>
        <button @click="btnclick('多选题')">多选题</button>
        <button @click="btnclick('填空题')">填空题</button>
    </div>
    <script>
        var myApp = new Vue({
            el:'#myApp',
            data:{
                question:'无'
            },
            methods: {
                btnclick: function(qname){
                    this.question = qname;
                }
            }
        })
    </script>
</body>

v-on使用
分析一下：

question是变量，用于显示用户想要创建的题目类型，通过鼠标单击来控制显示结果。
script 中创建的Vue实例 myApp是用来控制对应元素块中触发的逻辑事件的。
使用el:#myApp来挂载id为myApp的div块，注意挂载id类型的元素时，使用的是#号。
method中的函数btnclick绑定了三个按钮，通过输入参数pname来触发“点一下按钮，创建的题目会改变”的事件。

Vue中的组件

本小节简单介绍一下组件，组件是Vue中用于封装逻辑功能块，形象一些可以理解为各个组件负责管理网页中不同区域块的逻辑功能，它的样式和html里的元素标签很相似形如：<vue-component></vue-component>，组件之间还可以通信，这里先不介绍。
创建组件使用Vue.component('elememt-name', {expr})的形式，其中element-name表示组件的名字，{expr}中包含输入的参数、渲染的模板template等，让我们来看一个例子：

<body>
    <div id="myApp">
        <question-item v-for="item in questions" v-bind:question="item"></question-item>
    </div>
    <script>
        Vue.component('question-item', {
            props: ['question'],
            template: '<li v-bind:id="question.name">{{question.name}}</li>'
        })
        var myApp = new Vue({
            el: "#myApp",
            data: {
                questions:[
                    {name:"单选题"},
                    {name:"多选题"},
                    {name:"填空题"},     
                ]
            }
        })
    </script>
</body>

分析一下：

Vue中的组件中的内容有点像示例化的Vue脚本，但是它不需要挂载到指定id，所以更加像“类”，在使用这个组件时，会被实例化，注意实例化时需要传入对应的参数，并使用v-bind绑定变量。
我是这么理解这里的v-bind的作用：通过v-bind绑定传入标签的数据从item获取，使得question中的数据和questions（注意是questions）中的数据关联，注意传入数据时不能简单把item传进去，要使用v-bind:question="item"这样的形式，其中question是形参，item是实参。
因为对v-bind理解不透彻，再啰嗦一下v-bind:可以发现component里面的template也是可以接受Vue指令的，比如这里使用的v-bind:id="question.name"，为了设置 id是基于题型，使用了v-bind:id=var_name"来设定。

Vue中的过滤器filter

过滤器用于处理我们从数据库中拿到的数据，将数据进一步处理成需要的结果，如大小写变换，百分比转换等，优点是避免数据存储冗余，官话叫做“数形分离”，是MVC的设计方法，filter的实现方法和methods比较相似，也是在脚本中定义一系列的函数。使用过滤器需要先在Vue脚本中定义过滤器，在标签中使用形如{{var_name | filter_func}}的样式，例子如下：
Vue-filters

<body>
    <div id="myApp">
        <p>您现在的创建进度{{message}}</p>
        <p>您现在的创建进度{{message | toUpper}}</p>
        <p>{{progress}}</p>
        <p>{{progress | toPercentage}}</p>
    </div>
    <script>
        var myApp = new Vue({
            el: "#myApp",
            data:{
                message:"progress",
                progress:0.3
            },
            filters:{
                toUpper: function(value){
                    return value.toUpperCase();
                },
                toPercentage: function(value){
                    return value*100 + '%';
                },
            },
        })
    </script>
</body>

分析一下again：

注意到filters那个复数，我们遇到的methods也一样是复数，不要忘记了。
使用过滤器时，用管道符号|连接变量和过滤器。
一个小知识点：（JS中），数字类型的变量可以直接和字符串混用，浏览器会自动把数字强制转换为文本。

Vue中的计算属性computed

用于处理元数据，方便二次利用，这看起来和filters功能很像，或者和methods功能很像，确实，一个计算属性中的函数，也可以被写在methods中，官方给出的为什么要用computed的解释是放在computed中的函数，调用后不会存储在缓存中，有点优化性能的意思（具体我也每太仔细看，先往下学，后面再回来补一下）computed的使用方式和过滤器很相似，例子如下：
vue-computed

<body>
    <div id="myApp">
        <p>最新NIKE运动鞋的售价为{{price}}美元,含税价格为{{taxPrice}}美元, 折合人民币{{chinaPrice}}元</p>
    </div>
    <script>
        var myApp = new Vue({
            el: "#myApp",
            data: {
                price:260
            },
            computed:{
                taxPrice: function(){
                    return this.price*1.10;
                },
                chinaPrice: function(){
                    return Math.round(this.price*6.5);
                }
            }
        })
    </script>
</body>

Vue中的观察属性——watch

watch用于检测数值发生变化时的响应，看视频里面说和computed属性接近，不过watch中的函数会默认接受newValue和oldvlaue，分别代指检测属性的新值和旧值（能想到一个用法是实时检测股价的变化，以及价格的波动），来看个例子：

<body>
    <div id="myApp">
        <p>价格{{price}}美元，含税价格：{{priceinTax}}美元， 折合人民币{{priceinChia}}：</p>
        <button v-on:click="btnClick(100)">加价100</button>
    </div>

    <script>
        var myApp = new Vue({
            el: "#myApp",
            data:{
                price:0,
                priceinTax:0,
                priceinChia:0,
                
            },
            watch:{
                price: function(newVal, oldVal){
                    this.priceinTax = Math.round(this.price*1.08);
                    this.priceinChia = Math.round(this.priceinTax*6);
                }
            },
            methods:{
                btnClick: function(newPrice){
                    this.price += newPrice
                }
            }
        })
        myApp.price = 500;
    </script>

分析一下：

注意到我们没有指定price的函数输入，它默认有newVal和oldVal，可以基于这两个变量做相应。
priceTax和priceinChia是两个根据price变动的属性值，倒数第二行设定myApp.price=500相当于载入的时候改变的一次price的值，因此会触发watch事件，含税价格和折算成人民币的价格随之改动。