Vue的基本特性_vue特性-优快云博客

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

使用el 绑定DOM元素 ：

<div id="app">
    {{msg}}
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
        mag:"Vue实例绑定成功！"
    },
    })
</script>

二、data数据对象

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式：

<div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "Mustache表达式通过data为对象获取content的值"
            }
        })
    </script>

2、函数（Function）的形式

<div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el: "#app",
            // 这是下面function的简写形式
            data(){
                       return {
                            name:'张三',
                            age:18
                    }
              },

             // 另一种写法
            // data:function() {
            //     return {
            //         name: '张三',
            //         age: 18,
            //         sex: '男'
            //     }
            // },
        })
    </script>

三、methods方法

概述：

methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

案例：

1、初始化数字为1

2、点击增加按钮，数字加1

3、点击减少按钮，数字减一，如果数字小于等于0，则不再减少

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增加减少</title>
    <script src="js/vue.js"></script>

</head>

<body>
    <div id="app">
        <p>{{Num}}</p>
        <button v-on:click="add">增加</button>
        <button v-on:click="sub">减少</button>
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                Num:11
            },
            methods:{
                add:function(){
                    this.Num++;
                },
                sub:function(){
                    if(this.Num>0){
                        this.Num--;
                    }
                }
            }
        })
    </script>
</body>

</html>

四、常用指令

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

2、v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

示例：

<div id="app" >
    <!-- 改p内容 -->
    <!-- 数据插值，
        v-text文本插值 
        v-html直接显示文本  -->
    <!-- v-cloak 1.隐藏未编译的 -->
    <!-- v-on简写为@ 【事件类型】绑定事件监听器，cilck，dblclick，keyup 
        this.****访问数据或者修改数据-->
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
             msg:"<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>"
            }
        })
    </script>

3、v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

<div id="app">
        <!-- v-bind动态绑定属性 -->
        <!-- v-bind单向绑定 可以简写为冒号 -->
        <!-- v-bind为标签实现动态绑定属性 -->
        <input type="text" v-bind:value="text">
        <div v-bind:class="[className,className1]">{{text}}</div>
        <img src="1.jpg" width="150px">
        <img v-bind:src="url" v-bind:width="w">
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                text:'易烊千玺',
                className:'green',
                className1:'yellow',
                url:'1.jpg',
                w:'150px',
            }
        })
    </script>

4、v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

<div id="app">
        <!-- click单机事件 dbclick双击事件  -->
        <h1>button1长度+1={{length}},单击次数{{num}}次</h1>
        <button v-on:click="change1">button1</button>
        <button v-on:click="change2" name="button2">button2</button>
        <button v-on:click="change2" name="button3">button3</button>
        <button v-on:click="change3(5)" name="button4">button4</button>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                num:0,
                length:2
            },
            methods:{
                change1:function(){
                    this.length++;
                    this.onMount();//在方法里也可以调用的方法
                },
                onMount:function(){
                    this.num++;
                },
                //event叫事件对象
                change2:function(event){
                    console.log(event.target.name);
                },
                change3:function(a){
                    this.num=this.num+a;
                }
            }
        });
    </script>

5、v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

<div id="app">
        
        <div v-for="item in arr" v-bian:key="item.id">
            <img src="itme.ing" alt="" >
            <div>
                <p>{{item.name}}</p>
                <p>￥{{item.price}}</p>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                arr:[
                    {id:1,img:"tu/images/images/mobil2.jpg",name:"粉手机",price:45.98},
                    {id:2,img:"tu/images/images/mobile1.png",name:"黑手机",price:45.98},
                   
                ]
            }
        })
    </script>

6、v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

<div id="app">
        <!-- v-model双向数据绑定，适合用于表单 input textarea selected-->
        <!-- v-model 修饰符.lazy 当失去焦点点回车才输入.trim清除空格 .number将字符串转换成数值-->

        <input type="text" v-model.lazy.trim="msg" placeholder="用户名：">
        <input type="text" v-model.number="age" placeholder="年龄：">
        <p>{{msg}}</p>
        <p>{{age+2}}</p>
        <!-- <button @click="showinfo">显示</button> -->
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data: {
                msg:'',
                age: '',
            },
            // methods: {
            //  showinfo:function(){
            //     this.msg="柳州"
            //  }
            // }
        })
    </script>

7、v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

<body>
<!-- v-if是Vue.js的条件语句，
v-if指令用于条件性地渲染一块内容，
这块内容只会在指令的表达式返回 true 值的时候被渲染。
特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景：
1.通过条件判断展示或者隐藏某个元素或者多个元素；
2.进行视图之间的切换。 -->
<!-- 
    <p v-if="seen">能看见</p> 如果seen为ture则输出p标签内容
    <p v-else>不能看见</p>如果为flase则输出不能看见
-->
<div id="app">
     <!-- 满足则直接输出本条语句 -->
    <a  href="https://www.taobao.com/" v-if="age>=18">淘宝</a>
    <!-- 不满足则输出这条 -->
    <a href="https://www.baidu.com/" v-else> 百度</a>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            age:19,
        }
    })
</script>
</body>

五、事件修饰符

v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。常用的事件修饰符如下表所示：

事件修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	将事件绑定到该元素本身，只有自身才能触发
.once	事件只触发一次

键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：

.enter	监听enter回车键的触发
.tab	监听tab键的触发
.up、.down 、.left、 .right	监听上、下、左、右键的触发
ctrl	监听ctrl键的触发

六、计算属性与监听属性

概述：为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。

1、计算属性 computed

一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：

下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>计算属性调用时不用加括号：{{reverseMsg}}</p>
        <p>方法调用的时候需要加括号：{{reverseMsg()}}</p>
        
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            computed: {
                reverseMsg() {
                    return this.msg.split("").reverse().join("")
                }
            }
        })

    </script>

</body>

</html>

2、监听属性 watch

Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。

<!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>
<style>
    .tip {
        color: red;
        font-size: 14px;
    }
</style>
<body>
    <div id="app">
        ￥<input type="text" placeholder="请输入借款金额" v-model.number="money">
        <p class="tip">{{tip}}</p>
    </div>
    <script src="../js/Vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                money: "",
                tip: ""
            },
            watch: {
                money(newVal, oldVal) {
                    if (newVal > 1000) {
                        this.tip = "单笔借款金额最高￥1000";
                    }else{
                        this.tip = "";
                    }
                }
            }
        })
    </script>
</body>
</html>

七、filters过滤器

概述：在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。

示例：


<!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>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 全局过滤器：Vue.filter('过滤器名称'，function(){}) -->
    <!-- 局部过滤器:filters:{过滤器的名称：function()} 过滤器中至少有一个参数来接收表达式的值
    过滤器参数{{price|a|b|c(x,z,y)}}有四个参数
-->
    <div id="app">
        <p>电脑的价格:{{price|addPriceIcon|msg|abc(username)}}</p>
    </div>
    <script>
        // 全局过滤器：
        Vue.filter('abc',function(value,value2){
            return '尊敬的用户'+value2+'为我消费为'+value;
        })
        var vm=new Vue({
            el:'#app',
            data:{
                price:200,
                username:'易烊千玺'
            },
            methods:{

            },
            // 通过过滤器的方式在价格前面加上价格的符号
            filters:{
                // value就是传入的200的值
                addPriceIcon:function(value){
                 return '￥'+value.toFixed(2);
                },
                msg:function(value){
                    return value+'最低优惠!';
                }
            }
        })
    </script>
</body>
</html>