• Vue.js——框架


     一.什么是VUE

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

    特点:轻量,高效

    特性:双向数据绑定,数据驱动视图

    二.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: 在元素不中不仅可以插入文本,还可以插入标签
    v-if: 根据表达式的真假值来动态插入和移除元素
    v-show: 根据表达式的真假值来动态隐藏和显示元素
    v-for: 根据变量的值来循环渲染元素
    v-on: 监听元素事件,并执行相应的操作
    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>
    </head>
    <body>
    
    <div id="app">
    
        <input type="text" v-focus>
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
    
            },
    
            directives:{
                focus:{ //指令的名字
                    //当绑定的元素显示时
                    inserted:function (tt) {
                        tt.focus();
                        tt.style.backgroundColor = 'lightseagreen';
                        tt.style.color = '#fff'
                    }
                }
            }
        })
    </script>
    
    </body>
    </html>
    自定义指令示例

    练习

    1.如图所示,在上面input框中输入信息,当点击'增加'按钮的时候,可以实时的更新到下面的boder框中,并且可以编辑,和删除该条记录。

                   

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    
    <div id="app">
        <div>
            <p><input type="text" placeholder="姓名" v-model="username"></p>
            <p><input type="text" placeholder="年龄" v-model="age"></p>
            <input type="button" value="增加" @click="add">
        </div>
    
    
        <div>
            <table cellpadding="0" border="1">
                <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',
            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>
    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;
            }
            .tipbox{
                 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>
    完善版

    2.动态生成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",
            data:{
               htmlstr:"<textarea></textarea>",
                test:false
            },
    
            methods:{
                create:function () {
                    this.test = !this.test;
    
                }
            }
        })
    </script>
    
    
    </body>
    </html>
    View Code
  • 相关阅读:
    HDFS原理分析之HA机制:avatarnode原理
    [转]Hessian——轻量级远程调用方案
    [转]成为Java顶尖程序员 ,看这11本书就够了
    [转]Java四种线程池的使用
    [转]Java多线程
    IntelliJ IDEA 快捷键
    [转]django 日志logging的配置以及处理
    [转]使用TortoiseGit处理代码冲突
    动软DbHelperSQL
    [转]Entity Framework 的实体关系
  • 原文地址:https://www.cnblogs.com/shaojiafeng/p/8351683.html
Copyright © 2020-2023  润新知