Vue.js

使用步骤

1.  下载vue.js文件 , 国内官网地址: cn.vuejs.org
2.  将下载的js文件 , 引入到项目中 .
3.  将js文件 引入到html中, 
4.  在html中, 编写一个div标签 , 并给div标签 添加id属性
5.  在javascript代码中, 创建Vue对象 , 并挂载到div上

​
案例:

   <div id="main"></div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "template":"<h1>Hello Vue</h1>"
        });
    </script>

实例

指的是创建的 vue对象

挂载点

每一个页面的vue对象, 都需要挂载到一个元素上, 这个元素就是挂载点.

模板

指的是挂载点被替换的内容 在vue对象中 以template属性表示.

data属性

data属性, 指的是 在创建vue对象时, 传入的对象中的 data属性.

属性的值 是一个新的对象 , 值对象中包含的每一个数据, 都可以在网页中 通过 各种表达式 使用.
使用时, 数据都是响应式的 .
​
响应式: 指的是如果数据发生改变, 则所有使用数据的位置, 也会发生相应的改变.

插值表达式

格式: {{data中的属性名称}}

​
作用:

将data中包含的某一个属性的值, 展示到网页中,

案例

<div id="main">{{d1}}<br>{{d2}}<br>{{d3}}{{name}}</div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "d1":"从前有座山",
                "d2":"山上有座庙",
                "d3":"庙里有个老和尚 , 和尚叫:",
                "name":""
            }
        });
    </script>
    
    <input placeholder="请输入和尚的名称" onblur="v.name = this.value">

v-text 标签属性

作用: 用于在挂载点中, 加载一些数据 .

格式:

  在挂载点中的任意子标签中:
         <标签 v-text="data中的属性名"></标签>

v-html 标签属性

作用:

用于在挂载点中, 加载一些数据 .

格式:

 在挂载点中的任意子标签中:
    <标签 v-html="data中的属性名"></标签>

v-text 与 v-html区别

v-text属性 就像插值表达式一样, 用于将文本数据, 插入到网页中.  不会解析html标签!
v-html属性 会将数据中的标签解析执行后, 展示到网页上.

Vue全局组件

组件是Vue中最强大的功能之一 ! Vue组件, 可以扩展HTML白哦前, 封装可重用的代码.

格式:

 1.  在script代码块中, 加入如下代码:
        <script>
            Vue.component("自定义标签名称",{
                "template":"html元素"
            });
        </script>

 2.  在Vue的挂载点中, 通过自定义标签名称来使用.

案例:

<div id="main">
    <xdl></xdl>
    <xdl></xdl>
    <xdl></xdl>
    <xdl></xdl>
</div>
<script type="text/javascript">
    Vue.component("xdl",{
        "template":"<span style='color:#0f0' οnclick='alert(123)'>从前又有一座山</span>"
    });
    var v = new Vue({
        "el":"#main",
    });
</script>

事件指令

格式1:
    步骤1.    在挂载点中 需要添加事件的元素上, 加入 属性  v-on:事件类型="methods对象中的属性名"
    步骤2.    在vue实例创建的对象中, 加入methods属性, 属性值是对象 , 这个对象中包含一个个的函数值.

案例:

 <div id="main">
        <span>{{count}}</span>
        <button v-on:click="add">+</button>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "count":1
            },
            "methods":{
                "add":function(){
                    this.count++;
                }
            }
        });
    </script>

格式2.

将格式1中的v-on事件类型 , 修改为 @事件类型 即可

案例:

 <div id="main">
        <button v-on:click="a2">-</button>
        <span>{{count}}</span>
        <button @click="a1">+</button>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "count":1
            },
            "methods":{
                "a1":function(){
                    this.count++;
                },
                "a2":function(){
                    this.count--;
                }
            }
        });
    </script>

属性绑定

我们之前可以通过插值表达式, 向网页中输出内容.

其实我们也可以将data中的数据, 赋值给某个标签的 属性. 这些属性值也是响应式的.

格式1:
    <标签 v-bind:属性名="data中的属性名"></标签>

格式2:
    <标签 :属性名="data中的属性名"></标签>

案例:

 <div id="main">
        <img v-bind:src="imgs[index]">
        <img :src="imgs[index]">
        <button @click="x1">下一张</button>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "imgs":["images/14.jpg","images/15.jpg","images/16.jpg","images/17.jpg"],
                "index":0
            },
            "methods":{
                "x1":function(){
                    this.index++;
                    if(this.index==this.imgs.length){
                        this.index = 0;
                    }
                }
            }
        });
    </script>

属性数据双向绑定 (仅适用于输入组件的value属性值)

单向绑定 :  当data中数据改变时, 所有使用此数据的位置 都会相应的改变

双向绑定 :  当data中数据改变时, 所有使用此数据的位置 都会相应的改变
            所有使用此数据的位置的数据改变, 也会反过来导致data中的数据改变

格式:

 <input v-model="data中的属性名">
//上述的输入框内容 与 data中的某个属性, 就进行了关联, 任何一方改变, 都会导致另一方变化.

案例:

 <div id="main">
        <h1>{{val}}</h1>
        <input v-model="val">
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "val":"输入框的内容"
            }
        });
    </script>

样式绑定

class 与 style属性的绑定 , 我们也是使用v-bind来完成的. 但是因为class与style 通常用于修改元素的样式,所以vue对这两个属性绑定的操作, 进行了增强.

v-bind:class 与 v-bind:style 这两个属性的属性值, 除了可以是字符串以外, 还可以是对象/数组

class属性

格式1 -对象:

 <标签名 v-bind:class="{data中的属性名:boolean值}"></标签名>
    对象中的属性值如果为true , 则属性名就被添加到了class中.

案例:

格式2 - 对象.

<标签名 v-bind:class="data中的属性key"></标签名>
data中的属性key 对应的值是对象 , 对象中的属性值如果为true , 则属性名就被添加到了class中.

案例:

 <div id="main">
        <div v-bind:class="obj"></div>
        <button @click="x1">切换背景</button>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "obj":{x:true,y:true}
            },
            "methods":{
                "x1":function(){
                    this.obj.y = !this.obj.y;
                }
            }
        });
    </script>

格式3 数组:

 <标签名 v-bind:class="[data中的数据key,data中的数据key,data中的数据key...]"></标签名>
  //上述格式中的 'data中的数据key' , 对应的值就是添加到class中的 class值

 案例:
    <div id="main">
        <div v-bind:class="[class1,class2,class3]">嘿嘿嘿</div>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "class1":"x",
                "class2":"y",
                "class3":"z"
            }
        });
    </script>

style属性值 (内联样式)

格式1 - 对象:

 <标签 v-bind:style="{样式键:data中的key,样式键:data中的key...}"></标签>
    data中key的值 是样式的值;

案例:

  <div id="main">
        <div v-bind:style="{color:a ,fontSize:b+'px'}">一二三四五, 上山打老虎</div>
        <button @click="x1">加大字体</button>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "a":"#0f0",
                "b":20
            },
            "methods":{
                "x1":function(){
                    this.b+=2;
                }
            }
        });
    </script>

格式2. 对象

  <标签 v-bind:style="data中的属性名"></标签>
    data中的属性值 , 是一个对象 , 对象中包含一个或多个属性, 属性名为样式名, 属性值为样式值;

案例:

  <div id="main">
        <div v-bind:style="x1">一二三四五, 上山打老虎</div>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "x1":{
                    "color":"#0f0",
                    "font-size":"100px"
                }
            }
        });
    </script>

格式3. 数组

  <标签 v-bind:style="[data中的属性名,data中的属性名,...]"></标签>
    data中的属性值 , 是一个对象 , 对象中包含一个或多个属性, 属性名为样式名, 属性值为样式值;

案例:

 <div id="main">
        <div v-bind:style="[x1,x2]">一二三四五, 上山打老虎</div>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "x1":{
                    "color":"#0f0",
                    "font-size":"100px"
                },
                "x2":{
                    "text-align":"center",
                    "font-weight":"bold"
                }
            }
        });
    </script>

计算属性

Vue的一个属性的值, 是通过计算得到的.

格式:

 在创建vue对象时, 传入的对象中 加入computed 属性 , 属性值是一个对象!
 对象中包含一个个的键值对,  键就是 计算属性的 属性名 , 值是一个个的function , function的返回值就是计算属性的值.

案例:

属性变化的监听器 监听器 可以绑定到每一个属性上, 用于监听属性的变化, 当属性变化时 监听器的代码自动执行 !

格式:

  在vue对象创建时 传入的对象中, 加入watch属性 , 属性值是一个对象, 对象中包含一个个的属性. 
  对象中的属性名 是要监听的属性名称, 对象中的属性值是function , 当监听的属性变化时, function自动执行.

案例:

 <div id="main">
        <h1>{{val}} , 次数:{{count}}</h1>
        <input v-model="val">
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "val":"",
                "count":0
            },
            watch:{
                "val":function(){
                    this.count++;
                }
            }
        });
    </script>

v-if 指令

作用:

用于判断一个元素 ,是否在网页中加载, 如果v-if的值为true , 则加载! 否则不加载.

语法:

 <标签 v-if="data中的属性名"></标签>

案例:

  <style type="text/css">
        .dialog{
            position: fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            background-color: rgba(111,111,111,0.3);
        }
        .dialog>div{
            width:400px;
            height:300px;
            background-color: #fff;
            border-radius: 10px;
            margin: 50px auto;
        }
    </style>
    </head>
    <body>
        <div id="main">
            <button @click="x1">点击登录</button>
            <div v-if="flag" class="dialog">
                <div>
                    <h3>用户登录</h3>
                    <div><input placeholder="请输入帐号"></div>
                    <div><input placeholder="请输入密码"></div>
                    <div><input type="submit" value="登录"></div>

                </div>
            </div>
        </div>
        <script type="text/javascript">
            var v = new Vue({
                "el":"#main",
                "data":{
                    "flag":false
                },
                "methods":{
                    "x1":function(){
                        this.flag = true;
                    }
                }
            });
        </script>

v-show 指令
作用:

用于判断一个元素 ,是否在网页中显示, 如果v-show的值为true , 则显示! 否则隐藏.

语法:

 <标签 v-show="data中的属性名"></标签>

案例:

<style type="text/css">
    .dialog{
        position: fixed;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        background-color: rgba(111,111,111,0.3);
    }
    .dialog>div{
        width:400px;
        height:300px;
        background-color: #fff;
        border-radius: 10px;
        margin: 50px auto;
        box-shadow:3px 3px 3px 3px #aaa;
    }
</style>
</head>
<body>
    <div id="main">
        <button @click="x1">点击登录</button>
        <div v-show="flag" class="dialog">
            <div>
                <h3>用户登录</h3>
                <div><input placeholder="请输入帐号"></div>
                <div><input placeholder="请输入密码"></div>
                <div><input type="submit" value="登录"></div>

            </div>
        </div>
    </div>
    <script type="text/javascript">
        var v = new Vue({
            "el":"#main",
            "data":{
                "flag":false
            },
            "methods":{
                "x1":function(){
                    this.flag = true;
                }
            }
        });
    </script>

v-for 指令

作用:

用于在网页中 循环展示数据.

格式1:

 <标签 v-for="变量名 of 数组名"></标签> 

  //格式中的变量名 : 表示循环中从数组取出的变量的名称.  这个变量名, 在当前的标签中, 可以使用插值表达式, 输出到网页中
  //格式中的数组名 : data中的属性名, 属性值为数组类型;

格式2:

<标签 v-for="(变量名1,变量名2) of 数组名"></标签>

//格式中的变量名1 : 表示循环中从数组取出的变量的名称.  这个变量名, 在当前的标签中, 可以使用插值表达式, 输出到网页中
//格式中的变量名2 : 循环数据的下标.
//格式中的数组名 : data中的属性名, 属性值为数组类型;