Vue.js入门

一、什么是VUE？

它是一个构建用户界面的JAVASCRIPT框架

二、怎么样使用VUE

1）引入vue.js

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

2)展示html

就是写在body中的div里面的代码

3）建立vue对象

  new Vue({
    el: "#app", //表示在当前这个元素内开始使用VUE
    data:{
        msg: ""
    }
})
三、在元素当中插入值
{{}}，里面可以放表达式
我们主要学习里面的指令
什么是指令：是带有V-前缀的特殊属性，通过属性来操作元素
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>
        {{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>
</html>
View Code
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", //表示在当前这个元素内开始使用VUE
            data:{
                pick: false,
                temp: true,
                ok: true
            }
        })

         window.setInterval(function(){
             vm.ok = !vm.ok;
         },1000)

    </script>

</body>
</html>
View Code

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="vue.min.js">
    </script>
    <style>
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">//数组
              {{index}}:{{item}}
        </li>
        <li v-for="(item,key,index) in obj ">//字典
            {{item}}：{{key}}:{{index}}
        </li>
        <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()">#这个是绑定函数

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[11,22,33],
            obj:{aa:'frank',bb:'tom',cc:'jack'},
            obj2:[
                {username:'Frank'},
                {'age':23},
                {'sex':'male'}
                ],
            url:'http://www.qq.com'
        },
        methods:{
            show:function () {
                this.arr.pop()
            }
        }
    })
</script>

</body>
</html>
View Code

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

对数组的操作：

push：从后面插入

pop:从后面删除数据

shift：从前面插入数据

unshift：从前面删除数据

splice：通过索引删除   this.arr.splice(index,1);

reverse:反向

v-bind:绑定元素的属性来执行相应的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nihao</title>
    <script src="vue.js"></script>
    <style>
        .bk_1{
            background-color: cornflowerblue;
             200px;
            height: 200px;
        }
        .bk_2{
            background-color: red;
             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>
         new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: "我想去腾讯公司上班",
                bk:"bk_1",
                bk2:"bk_2",
//                bk3:"bk_3",
//                temp: false
            }
        })
    </script>
</body>
</html>
View Code

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

分为三步：

1)把元素的值和数据相绑定

2)当输入内容时，数据同步发生变化，视图  ---数据的驱动

3)当改变数据时，输入的内容也会发生变化，数据 --》》视图的驱动

<!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", //表示在当前这个元素内开始使用VUE
            data:{
              msg: "aaaaa"
            },
            methods: {
                change: function () {
                    this.msg = 8888888;
                }
            }

        })


    </script>

</body>
</html>
View Code

自定义指令：

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

动态生成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">
        <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>
</html>
View Code

简单的后台管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input type="text" placeholder="用户名" v-model="username">
        <input type="text" placeholder="年龄" v-model="age">
        <input type="submit" value="增加" @click="add">
    </div>
         <div>
            <table cellpadding="0" border="1" >
                <tr v-for="(item,index) in arr">
                    <td ><input type="text" v-model="item.username"></td>
                    <td > <input type="text" v-model="item.age"></td>
                    <td > {{index}}    </td>
                    <td>
                        <input type="button" @click="del(index)" value="删除">
                        <input type="button" @click="edit(index)" v-model="item.msg">
                    </td>
                </tr>
            </table>
        </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                username: '',
                age: '',
                suoyin:'',
                arr: [],
                msg:'编辑'
            },
            methods: {
                add:function () {
                    this.arr.push(
                        {
                            username:this.username,
                            age:this.age,
                            msg:this.msg
                        }
                        )
                    console.log(this.arr)
                },
                del:function (index) {

                    this.arr.splice(index,1)
                },
                edit:function (index) {
                    if (this.arr[index].msg =='保存')
                    { this.arr[index].msg ='编辑'}
                    else {
                        this.arr[index].msg ='保存'
                    }

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

<!--<input type="text" v-model="item.username">-->
View Code

 计算属性：{{}}里面只能放单表达式，所以引出了就算属性

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

 后台页面的编辑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .tipbox {
            height: 150px;
             200px;
            background-color: blue;
            position: absolute;
            left: 500px;
            top: 200px;
            text-align: center;
        }
    </style>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input type="text" placeholder="用户名" v-model="username">
        <input type="text" placeholder="年龄" v-model="age">
        <input type="submit" 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" @click="del(index)" value="删除">
                    <input type="button" @click="edit(index)" value="编辑">
                </td>
            </tr>
        </table>
    </div>
     <div class="tipbox" v-show="is_show">
              <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(n)">
                <input type="button" value="取消" @click="cancel()">
            </p>
          </div>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            username: '',
            age: '',
            suoyin: '',
            arr: [],

            is_show: false,
            m_username: '',
            m_age: '',
            n:'',
        },
        methods: {
            add: function () {
                this.arr.push(
                    {
                        username: this.username,
                        age: this.age,
                        msg: this.msg
                    }
                )
            },
            del: function (index) {

                this.arr.splice(index, 1)
            },
            edit: function (index) {
                this.n=index
                this.is_show = true
                this.m_username = this.arr[index].username
                this.m_age = this.arr[index].age


            },
            save: function () {
                this.arr[this.n].username=this.m_username;
                this.arr[this.n].age=this.m_age
                this.is_show=false
            },
            cancel: function () {
                this.is_show=false
            }
        }
    })
</script>
</body>
</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/1a2a/p/8352998.html