13、vue.js简单入门

本篇导航：

介绍与安装
vue常用指令

一、介绍与安装

vue是一套构建用户界面的JAVASCRIPT框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

1、安装

下载vue.js：https://cn.vuejs.org/v2/guide/installation.html

2、CDN

也可以不下载直接使用cdn

https://cdn.jsdelivr.net/npm/vue

3、引用

<script src="vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

4、使用格式

{{}}，里面可以放表达式

<div id="app">
    //和django中模版渲染一样使用｛｛变量｝｝插入文本
    {{ message }}
</div>

<script>
    //实例化Vue
    var app = new Vue({
        //定位标签    表示在当前这个元素内开始使用VUE
        el: '#app',
        //变量
        data: {
            message: 'Hello Vue!'
        }
    })
<script>

二、vue常用指令

指令：是带有V-前缀的特殊属性，通过属性来操作元素

1、v-text,v-html

v-text：可以在元素当中插入值

v-html：元素不中不仅可以插入文本，还可以插入标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p>{{80+2}}</p>
        <p>{{20>30}}</p>
            我是：<h1 v-text="msg">{{str}}</h1>
            你是：<h1 v-text="msg">2222222222222</h1>

            <h2 v-html="hd"></h2>
            <h2 v-html="str"></h2>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我是老大",
                hd: "<input type='button' value='你是小三'>",
                str: "我要发财!"
            }
        })
    </script>
</body>
</html>

v-text,v-html

2、v-if,v-show

v-if：根据表达式的真假值来动态插入和移除元素

v-show：根据表达式的真假值来隐藏和显示元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
</head>
<body>
      <div id="app">
       <p v-if="pick">我是刘德华</p>
       <p v-else>我是张学友</p>
       <p v-show="temp">我是赵本山</p>

       <p v-show="ok">你喜欢我吗？</p>

    </div>
    <script>
        var vm = new Vue({
            el: "#app", 
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })

         window.setInterval(function(){
             vm.ok = !vm.ok;
         },1000)
    </script>
</body>
</html>

v-if,v-html

3、v-for

v-for：根据变量的值来循环渲染元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index2) in arr">
                {{item}}: {{index2}}
            </li>
        </ul>

        <ul>
            <li v-for="(item,key,index) in obj">
                {{item}}: {{key}}:{{index}}
            </li>
        </ul>
            <ul>
                <li v-for="item in obj2">
                    {{item.username}}
                    {{item.age}}
                    {{item.sex}}
                </li>
            </ul>
        <div v-for="i in 8">
            {{i}}
        </div>
    </div>
    <script>
        new Vue({
            el: "#app", 
            data:{
                arr: [11,22,3344,55],
                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},
                obj2:[
                    {username: "jason"},
                    {age: 20},
                    {sex: "male"}
                ],
            }
        })
    </script>
</body>
</html>

v-for

4、v-on

1）v-on：监听元素事件，并执行相应的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{item}}: {{index}}
            </li>
        </ul>

        <input type="button" value="点我吧!" @click="show()">

    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                arr: [11,22,33,44,55],
                ],
            },
        //监听的事件
         methods: {
             show: function () {
                 this.arr.pop();
            }
        }
    })
    </script>
</body>
</html>

v-on

2）小实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li><input type="checkbox">苹果</li>
            <li><input type="checkbox">香蕉</li>
            <li><input type="checkbox">香梨</li>
            <li><input type="checkbox" v-on:click="create()">其它</li>
            <li v-html="htmlstr" v-show="test"></li>
        </ul>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                test: false,
                htmlstr: "<textarea></textarea>"
            },
            methods: {
                create: function () {
                    this.test = !this.test;
                }
            }
        })
    </script>
</body>
</html>

动态生成html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
            display: inline-block;
            border: 1px solid cornflowerblue;
            height:40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="mybox">
        <ul>
            <li>
                <span v-on:click="qh(true)">二唯码登录</span>
            </li>
            <li>
                <span v-on:click="qh(false)">邮箱登录</span>
            </li>
        </ul>

        <div v-show="temp">
            <img src="erma.jpg">
        </div>
        <div v-show="!temp">
            <form action="http://mail.163.com" method="post">
                <p><input type="email"></p>
                <p><input type="password"></p>
                <p><input type="submit" value="登录"></p>
            </form>
        </div>
    </div>
    <script>
        new Vue({
            el: "#mybox",
            data: {
                temp: true
            },
            methods: {
                qh: function (t) {
                    this.temp = t
                }
            }
        })
    </script>
</body>
</html>

tag切换

3）v-on简写

//标准书写：
<input type="button" value="点我吧!" v-on:click="show()">
//简写：
<input type="button" value="点我吧!" @click="show()">

5、v-bind

1）v-bind：绑定元素的属性来执行相应的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        .bk_1{
            background-color: cornflowerblue;
            width: 200px;
            height: 200px;
        }
        .bk_2{
            background-color: red;
            width: 200px;
             height: 200px;
        }
        .bk_3{
            border: 5px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="http://www.qq.com" v-bind:title="msg">腾讯</a>
        <div :class="bk"></div>
        <div :class="bk2"></div>

        <div :class="{bk_2:temp}">fdjjdjdkdkkeedd</div>
        <div :class="[bk2,bk3]">8888888888</div>
    </div>
    <script>
       var vm =  new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我想去腾讯公司上班",
                bk:"bk_1",
                bk2:"bk_2",
                bk3:"bk_3",
                temp: false
            }
        })
    </script>
</body>
</html>

v-bind

2）简写

//标准写法：
<div v-bind:class="bk"></div>
//简写：
<div :class="bk"></div>

6、v-model

1）v-model：实现了数据和视图的双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model="msg">
        <p>{{msg}}</p>
        <input type="button" value="变化" @click="change">
    </div>
    <script>
        new Vue({
            el: "#app", 
            data:{
              msg: "aaaaa"
            },
            methods: {
                change: function () {
                    this.msg = 8888888;
                }
            }

        })
    </script>
</body>
</html>

v-model

2）简单实现学生信息增删改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
        .tds{
            height: 15px;
            width: 175px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" placeholder="姓名" v-model="username">
            <input type="text" placeholder="年龄" v-model="age">
            <input type="button" value="增加" @click="add">
        </div>
            <div>
                <table cellpadding="0" border="1">
                    <tr v-for="(item,index) in arr">
                        <td :class="td" v-if="arr[index].temp">{{item.username}}</td>
                        <td :class="td" v-else><input v-model="msg_user"></td>
                        <td :class="td" v-if="arr[index].temp">{{item.age}}</td>
                        <td :class="td" v-else><input v-model="msg_age"></td>

                        <td>
                            <input type="button" value="删除" @click="del(index)">
                            <input type="button" value="修改" @click="edit1(index)" v-show="arr[index].temp">
                            <input type="button" value="确定" @click="edit2(index)" v-show="!arr[index].temp">
                        </td>
                    </tr>
                </table>
            </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data:{
                temp:true,
                td:"tds",
                username: "",
                age: "",
                arr: [],
                msg_user:"",
                msg_age:""
            },
            methods: {
                add: function () {
                    this.arr.push({username:this.username, age:this.age, temp:this.temp});
                },
                del: function (index) {
                    this.arr.splice(index,1);
                },
                edit1:function (index) {
                    this.arr[index].temp = !this.arr[index].temp;
                    this.msg_user = this.arr[index].username;
                    this.msg_age = this.arr[index].age
                },
                edit2:function (index) {
                    this.arr[index].temp = !this.arr[index].temp;
                    this.arr[index].username = this.msg_user;
                    this.arr[index].age = this.msg_age
                }
            }
        })
    </script>
</body>
</html>

当前行修改方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
        .tipbox{
            width: 200px;
            height:200px;
            border: 1px solid cornflowerblue;
            position: absolute;
            background-color: #aaaaaa;
            top: 200px;
            left: 600px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" placeholder="姓名" v-model="username">
            <input type="text" placeholder="年龄" v-model="age">
            <input type="button" value="增加" @click="add">
        </div>
            <div>
                <table cellpadding="0" border="1">
                    <tr v-for="(item,index) in arr">
                        <td>{{item.username}}</td>
                        <td>{{item.age}}</td>
                        <td>{{index}}</td>
                        <td><input type="button" value="删除" @click="del(index)"></td>
                        <td><input type="button" value="修改" @click="showBox(index)"></td>
                    </tr>
                </table>
            </div>
            <div class="tipbox" v-show="isShow">
                <p><input type="text" placeholder="姓名" v-model="m_username"></p>
                <p><input type="text" placeholder="年龄" v-model="m_age"></p>
                <p>
                    <input type="button" value="确定" @click="save()">
                    <input type="button" value="取消" @click="cancel()">
                </p>
            </div>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                username: "",
                age: "",
                arr: [],
                isShow:false,
                m_username: "",
                m_age: "",
                n: 0
            },
            methods: {
                add: function () {
                    this.arr.push({username:this.username, age: this.age});
                },
                del: function (index) {
                    this.arr.splice(index,1);
                },
                showBox: function (index) {
                    this.isShow = true;
                    this.n = index;
                    this.m_username = this.arr[index].username;
                    this.m_age = this.arr[index].age;
                },
                cancel: function () {
                    this.isShow = false
                },
                save: function () {
                    this.arr[this.n].username = this.m_username;
                    this.arr[this.n].age = this.m_age;
                    this.isShow = false
                }
            }
        })
    </script>
</body>
</html>

类模态框修改方式

7、自定义指令

特定指令无法满足我们的开发需求时可以自定义指令

当进入一个页面时，输入框获取焦点，且背景颜色是蓝色，字体颜色是白色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="vue.js"></script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
      <div id="app">
            <input type="text" v-focus>
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{

            },
            //自定义指令
            directives: {
                focus: {    //指令的名字
                    //当绑定的元素显示时
                    inserted: function (tt) {
                        tt.focus();
                        tt.style.backgroundColor = "blue";
                        tt.style.color = "#fff"
                    }
                }
            }
        })
    </script>
</body>
</html>

自定义指令

8、computed计算属性

从前面的代码中可以了解{{}}中可以放表达式但是当简单的表达式无法满足业务时就需要计算属性了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                temp: 1001
            },
            //计算属性
            computed: {
                msg: function () {
                    if(this.temp > 1000){
                       return parseInt(this.temp/10)-1
                    } else {
                       return this.temp-1
                    }
                }
           }
        })
    </script>
</body>
</html>

View Code

来源：https://www.cnblogs.com/liluning/p/8352397.html

标签

html代码