初始Vue

一、介绍

1、什么是Vue?

是一个构建用户界面的javascript框架.

2.为什么要用？

轻量、高效、容易上手

3.什么是前后端分离？

前后端分离意味着，前后端之间使用 JSON 来交流，两个开发团队之间使用 API 作为契约进行交互。从此，后台选用的技术栈不影响前台。

二、使用

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: ""
            }
        })

三、在元素中插入值

{{}}，里面可以放表达式
 指令：是带有V-前缀的特殊属性，通过属性来操作元素
以表示它们是 Vue 提供的特殊特性，可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。

 v-text:在元素当中插入值
 v-html:在元素不中不仅可以插入文本，还可以插入标签
 v-if: 根据表达式的真假值来动态插入和移除元素
 v-show:根据表达式的真假值来隐藏和显示元素
 v-for:根据变量的值来循环渲染元素
 v-on:监听元素事件，并执行相应的操作
 对数组的操作：
 push
 pop
 shift
 unshift
 splice
 reverse

 v-bind:绑定元素的属性来执行相应的操作
 v-model:实现了数据和视图的双向绑定
 分成了3步：
 1）把元素的值和数据相绑定
 2）当输入内容时，数据同步发生变化，视图  ---数据的驱动
 3）当改变数据时，输入内容也会发生变化，数据-》视图的驱动

　示例：

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

v-text

结果：（可以完成实时更新）

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

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="arr">
    <p>{{arr}}</p>
    <h2 v-text="msg"></h2>
    <p v-html="btn"></p>
    <!--<p v-html="str"></p>-->
    <p v-show="ok"></p>
    <input type="button" value="点我吧" v-on:click="show()">
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
         arr:'',
         msg:'haha',
         btn: '<input type="button" value="我是按钮">'
//         str:'老二'

        },
        methods:{
            show:function () {
                alert(123)
            }
        }

    })
//    window.setInterval(
//        function () {
//
//        },1000)

</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;
        }
    </style>
</head>
<body>
<h2>大冰的书</h2>
<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="other">其它</li>
        <li v-html="htmlarr" v-show="arr" ></li>
    </ul>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            htmlarr:'<textarea ></textarea>',
           arr:false
        },
      methods:{
            other:function () {
                this.arr=!this.arr;
            }
      }
    })
</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;
             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切换）

<!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{
             200px;
            height:200px;
            border: 1px solid cornflowerblue;
            position: absolute;
            background-color: #aaaaaa;
            top: 150px;
            left: 600px;

        }
    </style>
</head>
<body>
<div id="mybox">
    <div>
          <p><input type="text" placeholder="书名" v-model="bookname"></p>
          <p><input type="text" placeholder="作者" v-model="author"></p>
          <p><input type="button" value="添加" @click="add"></p>
    </div>
    <div>
        <table  cellpadding="0" border="1">
              <thead>
                  <tr>
                      <td>书名</td>
                      <td>价格</td>
                      <td>操作</td>
                  </tr>
              </thead>
                <tbody>
                 <tr v-for="(item,index) in arr">
                <td>{{item.bookname}}</td>
                <td>{{item.author}}</td>
                <td><input type="button" value="删除" @click="del(index)"></td>
                <td><input type="button" value="编辑" @click="edit(index)"></td>
            </tr>
                </tbody>

        </table>
    </div>
    <div class="tipbox" v-show="msg">
        <p><input type="text" placeholder="书名" v-model="m_bookname"></p>
        <p><input type="text" placeholder="价格" v-model="m_author"></p>
        <p>
            <input type="button" value="确定" @click="save()">
            <input type="button" value="取消" @click="cancel()">
        </p>
    </div>
</div>

<script>
    new Vue({
        el:'#mybox',
        data:{
           bookname:'',
            author:'',
            arr:[],
            msg:false,
            m_bookname:'',
            m_author:'',
            n:0
        },
        methods:{
           add:function () {
             this.arr.push({bookname:this.bookname,author:this.author});
               console.log(this.arr)
           },
            del:function (index) {
              this.arr.splice(index,1)
            },
            edit:function (index) {
                this.msg=true;
                this.n=index;
                this.m_bookname=this.arr[index].bookname;
                this.m_author=this.arr[index].author;
            },
            save:function (index) {
               this.arr[this.n].bookname=this.m_bookname;
               this.arr[this.n].author=this.m_author;
                this.msg=false;
            },
            cancel:function () {
                this.msg=false
            }

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

示例四

在下面input框中输入信息，当点击'增加'按钮的时候，可以实时的更新到表格，并且可以编辑，和删除该条记录。结果如下：