前端VUE框架

一、什么是VUE？
　　它是一个构建用户界面的JAVASCRIPt框架
　　vue不关心你页面上的是什么标签，它操作的是变量或属性

为什么要使用VUE？

　　在前后端分离的时候，后端只返回json数据，再没有render方法，前端发送ajax请求（api=url）得到数据后，要在页面渲染数据，如果你js+css实现就太麻烦了，这时候VUE就出现了。
二、怎么样使用VUE

1）引入vue.js

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

2) 展示html

    <div id="app">

        <input type="text" v-model="msg">

        <p>{{msg}}</p>

    </div>

3)建立vue对象

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                msg: ""

            }

        })

三、VUE指令

1. v-model：实现了数据和视图的双向绑定
分成了3步：
1）把元素的值和数据相绑定
2）当输入内容时，数据同步发生变化，视图 --->数据的驱动
3）当改变数据时，输入内容也会发生变化，数据--->视图的驱动

<body>
      <div id="app">
        <input v-model="msg">
          <p>{{msg}}</p>
          <input type="button" value="变化" @click="change">
    </div>
    <script>
        new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
              msg: "aaaaa"
            },
            methods: {
                change: function () {
                    this.msg = 8888888;
                }
            }

        })
    </script>

</body>

2. v-on:监听元素事件，并执行相应的操作； @是对v-on的简写

<style>
    ul li{
        list-style: none;
        display: inline-block;
        border: 1px solid cornflowerblue;
        height:40px;
        line-height: 40px;
        width: 120px;
        text-align: center;
    }
</style>

<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>

补充：display=none 时如果你的盒子没有宽高，那它就不占位

3. v-bind:绑定元素的属性来执行相应的操作； : 是对v-bind的简写

<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>

<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>

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

<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>

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

          <a :href="url">我想去百度</a>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                arr: [11,22,3344,55],

                obj: {a:"张三",b:"李四",c:"王大拿",d:"谢大脚"},

                obj2:[

                    {username: "jason"},

                    {age: 20},

                    {sex: "male"}

                ],

                str: "我来了",

                url: "http://www.qq.com"

            },

            methods: {

                show: function () {

                    this.arr.pop();

                }

            }

        })

    </script>

</body>

5. v-if / show

v-if: 根据表达式的真假值来动态插入和移除元素
v-show:根据表达式的真假值来隐藏和显示元素

<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", //表示在当前这个元素内开始使用VUE

            data:{

                pick: false,

                temp: true,

                ok: true

            }

        })

         window.setInterval(function(){

             vm.ok = !vm.ok;

         },1000)

    </script>

</body>

6. v-html:在元素中不仅可以插入文本，还可以插入标签

<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", //表示在当前这个元素内开始使用VUE

            data:{

                htmlstr: "<textarea></textarea>",

                test: false

            },

            methods: {

                create: function () {

                    this.test = !this.test;

                }

            }

        })

    </script>

</body>

7. 模板对象

<body>

      <div id="app">

        <p>{{msg}}</p>

        <p>{{80+2}}</p>

        <p>{{20>30}}</p>

        {{msg}}

          我是：<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>

8. 计算属性

<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>

9. 小综合练习

 对数组的操作：

     push     数组中最后添加一个值

     pop　　　 数组中删除最后一个值

     shift　　 删除数组头一个元素

     unshift　 向开头添加一个或多个元素

     splice　　删除其中一个对象

     reverse　 反转

<!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">

        <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="" border="">

                    <tr v-for="(item,index) in arr">

                        <td><input type="text" class="txt" v-model="item.username"> </td>

                        <td>{{item.age}}</td>

                        <td>{{index}}</td>

                        <td><input type="text" class="txt"></td>

                        <td><input type="button" value="删除" @click="del(index)"></td>

                    </tr>

                </table>

          </div>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

                username: "",

                age: "",

                arr: []

            },

            methods: {

                add: function () {

                    this.arr.push({username:this.username,age: this.age});

                    console.log(this.arr);

                },

                del: function (index) {

                    this.arr.splice(index,1);

                }

            }

        })

    </script>

</body>

</html>

10. 自定义指令：相关网址 https://cn.vuejs.org/v2/guide/custom-directive.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;

        }

    </style>

</head>

<body>

      <div id="app">

            <input type="text" v-focus>

    </div>

    <script>

        new Vue({

            el: "#app", //表示在当前这个元素内开始使用VUE

            data:{

            },

            directives: {

                focus: {    //指令的名字

                    //当被绑定的元素插入到 DOM 中时

                    inserted: function (tt) {

                        tt.focus();

                        tt.style.backgroundColor = "blue";

                        tt.style.color = "#fff"

                    }

                }

            }

        })

    </script>

</body>

</html>

巴特西

前端VUE框架

最新文章

热门文章