zoukankan      html  css  js  c++  java
  • Vue(知识讲解)

    一、什么是VUE
    它是一个构建用户界面的JAVASCRITP0框架

    二、怎么样使用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: ""
    }
    })

    三、在元素当中插入值
    {{}},里面可以放表达式
    指令:是带有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: 根据表达式的真假值来动态插入和移除元素
    <!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-show:根据表达式的真假值来隐藏和显示元素
    <!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>
    View Code

    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,index3) in arr">
                    {{item}}: {{index3}}
                </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>
    </html>
    View Code

    v-on:监听元素事件,并执行相应的操作
    <!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>
    View Code

    对数组的操作:
    push
    pop
    shift
    unshift
    splice
    reverse

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

    自定义指令:

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

    },
    directives: {
    focus: { //指令的名字
    //当绑定的元素显示时
    inserted: function (tt) {
    tt.focus();
    }
    }
    }
    金典题型:
    <!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});
                        console.log(this.arr);
                    },
                    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>
    View Code
  • 相关阅读:
    oracle 中和mysql的group_concat有同样作用的写法
    sql find_in_set在oracle下的解决方案
    Django项目部署:使用uwsgi和nginx的方式
    virtualenvwrapper.sh报错: There was a problem running the initialization hooks.解决
    html中footer如何一直保持在页底
    mysqldump导出备份数据库报Table ‘performance_schema.session_variables‘ doesn‘t exist
    django-ckeditor添加代码功能(codesnippet)
    Django_外键查询和反查询
    python面向对象编程(OOP)
    Django模型中字段属性choice的使用
  • 原文地址:https://www.cnblogs.com/liuchengdong/p/8360073.html
Copyright © 2011-2022 走看看