Vue基础特性

Vue实例常用到的构造选项

data数据对象

data

概念：data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让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(){
            //     returen{
            //         name:'张三',
            //         age:18,
            //         sex:'男'
            //     }
            // },
        })
    </script>

methods方法

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。在methods方法中访问
data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例。

Vue内置指令概念

Vue内置指令是Vue框架提供的一组用于操作DOM的指令。这些指令以v-开头，可以在Vue的模板中直接使用，通过在HTML元素上添加相应的指令来实现特定的功能，每个内置指令都有自己的作用和用法。

1.v-for指令

v-for：用于循环渲染元素，根据数组或对象的数据来生成多个相同结构的元素。

是 Vue.js 的循环语句，它的表达式需要结合着 in 或者 of 来使用，类似 item in items 的形式。

<ul>
<li v- for="number in numbers" :key="number">{{number}}</li>
<ul>

使用v-for指令将numbers数组中的每个元素循环渲染为一个li元素。通过使用临时变量number引用每个元素的值，并通过{{ number }}将其显示在页面上。

2.v-if/v-else/v-else-if指令

v-if/v-else/v-else-if：条件渲染指令，根据表达式的真假删除和插入元素。

<div id="app">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <script>
        new Vue ({
            el:"#app",
            data(){
                seen:true
            }
        })
    </script>

seen 是 vue.js 定义的一个变量。v-if 的变量值一般是true或者 false,当变量值为 true 时则显示元素，当变量值为 false 时隐藏元素。

<div id="app">
        <p v-if="seen">现在你看到我了</p>
        <p v-else>你看不到我了</p>
    </div>
    <script>
        new Vue ({
            el:"#app",
            data(){
                seen:true
            }
        })
    </script>

当seen 变量值为 true 时，网页上显示“现在你看到我了”，当seen 变量值为 false 时则显示“你看不到我了”。

<div id="app">
        <p v-if="type==1">1</p>
        <p v-else-if="type==2">2</p>
        <p v-else="type==3">3</p>
    </div>
    <script>
        new Vue ({
            el:"#app",
            data(){
                type:2
            }
        })
    </script>

当type变量值为1 时，网页上显示“1”；当type 变量值为2时，网页
上显示“2”；当type 変量值为3时，网页上显示“3”。

3.v-showf指令

v-show：用于根据表达式的值来切换元素的显示与隐藏，通过修改元素的display属性来实现。

<div id="app">
        <h1 v - show="ok">Hello!</h1>
    </div>
    <script>
        var vm = new Vue ({
            el:"#app",
            data:{
               ok:true
            }
        })
    </script>

4.v-bind指令

v-bind：它可以简写为“:”，用于动态绑定HTML属性，可以将数据绑定到元素的属性上，使其随数据的变化而变化。

<div id="app">
        <input v-bind:value="msg">
    </div>
    <script>
        var app = new Vue ({
            el:"#app",
            data:{
                msg:'Hello v-bind!'
            }
        })
    </script>

v-bind指令绑定到input控件的value值，运行时，input文本框中显示Hello v-bind!，说明msg数据绑定成功。

5.v-on指令

v-on：可以直接用“@”简写，用于绑定事件监听器，可以在元素上监听指定的事件，并执行相应的方法。

<!-- 不传递参数 -->
<button v-on:click="事件名"></button>
<!-- 需要传递参数 -->
<button v-on:click="事件名($event, 参数1, 参数2...)"></button>
<!-- $event表示事件对象 -->

使用v-on绑定一个事件

<div id="app">
        <button v-on:click="myClick">点击</button>
    </div>
    <script>
        var vm = new Vue ({
            el:"#app",
            methods:{
                myClick:function(){
                    console.log("点击了按钮")
                }
            }
        })
    </script>

6.v-model指令

v-model：用于双向数据绑定，可以将表单元素的值与数据对象进行绑定，实现数据的双向同步。

<div id="app">
        <input type="text" v-model="msg">
        <p>文本框的内容：{{msg}}</p>
    </div>
    <script>
        var app = new Vue ({
            el:"#app",
            data:{
                msg:''
            }
        })
    </script>

通过v-model指令绑定了Vue实例中data对象的msg数据，p元素中使用“{{}}”插值显示msg数据。

事件修饰符

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

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

计算属性与监听属性

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

1、计算属性 computed

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    </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实例中数据的变化，就会调用当前数据所绑定的事件处理方法。