思享工具箱

Vue -- 基础

摘要：
scriptsrc=“Vue/Vue/Vue.min.js”&gt；｛｛消息｝｝&lt；“Helloworld”｝）&lt:“hellowworld”｝}）&lt:message只是一个例子。数据显示1。纯文本数据由{{}}&lt；{message；&lt；inputv model=“message”&gt；{{message｝}&lt；脚本&gt；“#k”；数据

Vue

Vue ：它是构建用户界面的JavaScript框架（让它自动生成js,css，html等）

Vue的使用

语法

vue的使用要从创建Vue对象
 var vm = new Vue({
         el:"#app",
          data: {
             数据变量:"变量值",
             数据变量:"变量值",
             数据变量:"变量值",
          },
   });

　　el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
　　data: 保存vue.js中要显示到html页面的数据。

基本使用

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">{{message}}</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

注意事项

  1. Vue实例化的对象是独立的
  2. Vue语法区分大小写
  3. Vue对象代码写在body后面

MVVM架构思想

　MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。MVVM的数据的修改与增加都是同步的

　model：模板，数据展示到页面中

　views：视图，数据要显示的HTML页面

　viewsmodel：双向数据绑定，负责连接 View 和 Model，保证视图和数据的一致性

　

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <input v-model="message">
    {{message}}
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

Vue -- 基础第1张

 在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

数据显示

　　1.纯文本数据用 {{ }}表示

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <h1>message</h1>

</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

　　2.单标签使用 v-model方法

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    <input v-model="message">
    {{message}}
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:"#k",
        data:{
            message:"hello world"
        }
    })
</script>

　　3.双标签使用 v-html方法

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div class="k">
    <span v-html="message"></span>
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:".k",
        data:{
            message:"<a>hello world</a>"
        }
    })
</script>

</body>
</html>

常用指令

属性操作

语法

　　<标签名 :标签属性="data属性"></标签名>

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div class="k">
    <a :href="url">百度</a>
    
</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
    var vm = new Vue({
        el:".k",
        data:{
            url:"http//www.daidu.com"
        }
    })
</script>

例子：显示密码

<!--    1.引用Vue核心文件-->
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>
<!--       3.填写Vue语法控制数据-->
<div id="k">
    密码:<input :type="type" ><button @click="change">显示密码</button>

</div>
<script>
    // 2.实例化Vue对象，实例化的变量是唯一的
   var vm = new Vue({
       el:"#k",
       data:{
           type:"password",
           password:"",
       },
       methods:{
           change(){
               if(this.type=="password"){this.type="text";}
               else {this.type="password";}

           }
       }

   })
</script>

事件操作

语法

　　<h1 @click="num++">{{num}}</h1>

有两种事件操作的写法，@事件名 和 v-on:事件名

<button v-on:click="num++">按钮</button>  
<button @click="num+=5">按钮2</button>

例子：

   <script src="Vue/vue/vue.js"></script>
</head>
<body>
<div id="index">
    商品：<button @click="sub">-</button>
        <input type="text" v-model="goods.num">
        <button @click="goods.num++">+</button>
</div>
    <script>
        var vm = new Vue({
            el:"#index",
            data:{goods:{num:0}},
            methods:{sub(){if(this.goods.num --<1){this.goods.num=0}}}
        })
    </script>
</body>

样式操作

控制标签class类名语法

 　　<h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组

<style>
    .box1{
        color: red;
        border: 1px solid #000;
    }
    .box2{
        background-color: orange;
        font-size: 32px;
    }
    </style>
</head>
<body>
<div id="box">
    <idv :class="cls">字符串</idv>
    <br>
    <idv :class="{box1:false}">对象</idv>
    <br>
    <idv :class="[cls,cls1]">数组</idv>
    <br>
    <idv :class="cls3?'box1':''">三元表达式</idv>

</div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{cls:"box2",
            cls1:{
                box1:false,
                box2:true,
            },
            cls3:true},
        methods:{}})

    </script>
</body>

控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中
     标签元素：
             <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
     data数据如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
               <div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
                styleObject: {
                     color: 'red',
                     fontSize: '13px'
                          }
                 }

格式3：值是数组
  标签元素：
                <div v-bind:style="[style1, style2]"></div>
    data数据如下：
                data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
                }

vue版本选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #card{
            width: 500px;
            height: 350px;
        }
        .title{
            height:50px;
        }
        .title span{
            width: 100px;
            height: 50px;
            background-color:#ccc;
            display: inline-block;
            line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
            text-align:center;
        }
        .content .list{
            width: 500px;
            height: 300px;
            background-color: yellow;
            display: none;
        }
        .content .active{
            display: block;
        }

        .title .current{
            background-color: yellow;
        }
    </style>
    <script src="Vue/vue/vue.min.js"></script>
</head>
<body>

    <div id="card">
        <div class="title">
            <span @click="num=0" :class="num==0?'current':''">国内新闻</span>
            <span @click="num=1" :class="num==1?'current':''">国际新闻</span>
            <span @click="num=2" :class="num==2?'current':''">银河新闻</span>
            <!--<span>{{num}}</span>-->
        </div>
        <div class="content">
            <div class="list" :class="num==0?'active':''">国内新闻列表</div>
            <div class="list" :class="num==1?'active':''">国际新闻列表</div>
            <div class="list" :class="num==2?'active':''">银河新闻列表</div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#card",
            data:{
                num:0,
            },
        });

    </script>

</body>
</html>

条件渲染指令

v-if

<style>
    .box{
         width:200px ;
         height:30px;
        background-color: red;
}
</style>

<body>
<div id="app">
    <button>登录</button>
    <div class="box" v-if="is_show">登录窗口</div>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:false
            }
        })

    </script>

v-else

<div id="app">
    <p v-if="is_show"><a>登录</a></p>
    <p v-else="is_show"><a>退出</a></p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:false
            }
        })
    </script>

v-else-if

<div id="app">
    <p v-if="num==1"><a>1</a></p>
    <p v-else-if="num==2"><a>2</a></p>
    <p v-else="num==3"><a>3</a></p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num:3
            }
        })
    </script>

v-show

用法和v-if大致一样，区别在于2点：

  1. v-show后面不能v-else或者v-else-if

  2. v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[ DOM操作中的remove ] 

<div id="app">
    <p v-show="is_show">隐藏</p>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show:true
            }
        })
    </script>

列表渲染指令

div id="app">
    <table border="1" align="center">
        <tr>
            <th>序号</th>
            <th>ID</th>
            <th>标题</th>
            <th>价格</th>
        </tr>
        <tr v-for="book,index in book_list">
            <td>{{index+1}}</td>
            <td>{{book.id}}</td>
            <td>{{book.title}}</td>
            <td>{{book.price}}</td>
        </tr>
    </table>
</div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                book_list:[
                        {"id":1,"title":"图书名称1","price":200},
                        {"id":2,"title":"图书名称2","price":200},
                        {"id":3,"title":"图书名称3","price":200},
                        {"id":4,"title":"图书名称4","price":200},
                    ]
            }
        })
    </script>

Vue对象提供的属性功能

过滤器

使用filter()可以进行全局定义或者局部定义

<div id="app">
    <p>{{money|func}}</p>
    <p>{{money}}</p>

</div>
<script>
    // 全局引用
    Vue.filter("func",function (money) {return money.toFixed(2)+"元"})
    var app = new Vue({
        el:"#app",
        data:{
            money:123.123123
        },
        // 局部使用
        // filters:{
        //     func(money){return money.toFixed(2)+"元"}
        // }
    })


</script>

计算和侦听属性

计算属性 computed

<div id="app">
    <input type="text" v-model="num1">+<input type="text" v-model="num2">=<span>{{total}}</span>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:0,
        },
        computed:{
            total(){return parseFloat(this.num1)+parseFloat(this.num2)}
        }
    })

</script>

监听属性 watch

<div id="app">
    <button @click="num++">点赞{{num}}</button>

</div>
<script>

    var app = new Vue({
        el:"#app",
        data:{num:0},
        watch:{
            num(){if(this.num>5)this.num=5}
        }
    })

</script>

vue对象的生命周期

 <script>
    window.onload = function(){
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            beforeCreate:function(){
                console.log("beforeCreate,vm对象尚未创建,num="+ this.num);  //undefined
                this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0
            },
            created:function(){
                console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num );  // 0
                this.num = 20;
            },
            beforeMount:function(){
                console.log( this.$el.innerHTML ); // <p>{{num}}</p>
                console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20
                this.num = 30;
            },
            mounted:function(){
                console.log( this.$el.innerHTML ); // <p>30</p>
                console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30
            },
            beforeUpdate:function(){
                // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
                console.log( this.$el.innerHTML );  // <p>30</p>
                console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31
                
            },
            updated:function(){
                console.log( this.$el.innerHTML ); // <p>31</p>
                console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31
            },
        });
    }
    </script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <button @click="num++">按钮</button>
    </div>
</body>

阻止事件冒泡，刷新页面

使用.stop和.prevent

 <style>
        .box1{
            width: 200px;
            height: 200px;
            background: #ccc;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        var vm = new Vue({
            el:"#app",
            data:{}
        })        
    }
    </script>
</head>
<body>
    <div id="app">
        <div class="box1" @click="alert('box1')">
            <div class="box2" @click.stop.prevent="alert('box2')"></div>   <!-- @click.stop来阻止事件冒泡 -->
        </div>

        <form action="#">
            <input type="text">
            <input type="submit">
            <input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent来阻止表单提交 -->
        </form>
    </div>

</body>

例子：todolist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="todolist" class="list_con">
        <h2>To do list</h2>
        <input type="text" v-model="message" class="inputtxt">
        <input type="button" @click="addItem" value="增加" class="inputbtn">
        <ul id="list" class="list">
            <li v-for="item,key in dolist">
                <span>{{item}}</span>
                <a @click="upItem(key)" class="up" > ↑ </a>
                <a @click="downItem(key)" class="down"> ↓ </a>
                <a @click="delItem(key)" class="del">删除</a>
            </li>
        </ul>
    </div>
    <script>
    // 计划列表代码
    let vm = new Vue({
        el:"#todolist",
        data:{
            message:"",
            dolist:[
                "学习html",
                "学习css",
                "学习javascript",
            ]
        },
        methods:{
            addItem(){
                if(this.messsage==""){
                    return false;
                }

                this.dolist.push(this.message);
                this.message = ""
            },
            delItem(key){
                this.dolist.splice(key, 1);
            },
            upItem(key){
                if(key==0){
                    return false;
                }
                // 向上移动
                let result = this.dolist.splice(key,1);
                this.dolist.splice(key-1,0,result[0]);
            },
            downItem(key){
                // 向下移动
                let result = this.dolist.splice(key, 1);
                console.log(result);
                this.dolist.splice(key+1,0,result[0]);
            }
        }
    })
    </script>
</body>
</html>

标签：#lt#amp#gt#:#对象 | 浏览：123 | 发布日期：

免责声明：文章转载自《Vue -- 基础》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇goahead3.6.3就基本使用（后台上传信息到html页面），高手请忽略Oracle 固定执行计划-使用SPM（Sql Plan Management）固定执行计划下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

weex-iOS集成

weex-iOS集成 weex只是刚刚起步,还存在一些bug,有些功能还有待完善和提高.但是其使用起来还是可以节省些时间. 这里我们说说如何把weex集成到我们的iOS项目中 1. 下载weex源代码 git clone https://github.com/alibaba/weex.git 2. 把根目录下的/ios/sdk整个目录拷贝到项目中...

ElementUI中的el-table怎样实现每一列显示的是控件并能动态实现双向数据绑定

场景 要实现在ElementUI的表格中每一列展示的不是数据而是控件。效果如下 注： 博客： https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 普通表格官方示例代码 <template> <el-table :data...

下载文件夹的解决方案

ASP.NET批量下载文件的方法 这篇文章主要介绍了ASP.NET批量下载文件的方法,实例汇总了常见的asp.net实现批量下载的方法,具有一定的实用价值,需要的朋友可以参考下 本文实例讲述了ASP.NET批量下载文件的方法。分享给大家供大家参考。具体方法如下： 一、实现步骤 在用户操作界面，由用户选择需要下载的文件，系统根据所选文件，在服务器上创建用于存...

正则表达式——RegExp零宽断言

正则表达式之中，支持某匹配对象的前面或者后面满足条件的匹配模式。这种匹配模式叫做零宽断言。 零宽断言的格式类似于(?exp)exp (?<=ing)ing表示匹配对象前面是ing的，ing对象如：singingdancing能匹配第一个 kiss(?=ing)表示匹配对象后面是ing的，内容是kiss对象的如：kissingkissed只能匹配第一个...

IDEA设置代理

设置代理 Appearance & Beahvior -> System Settings -> HTTP Proxy，选择手动配置代理，输入IP和端口即可。 测试GitHub或者Google是否连接成功 查看代理软件端口号 查看代理软件端口...

mysql命令详解

mysqld.exe 和 mysql.exe 有什么区别？ mysqld.exe 是MySQL后台程序(即MySQL服务器)。要想使用客户端程序，该程序必须运行，因为客户端通过连接服务器来访问数据库。 mysql.exe 是MySQL自带的命令行客户端工具，是交互式输入SQL语句或从文件以批处理模式执行它们的命令行工具。 简单来说：mysqld是用来启...

最新文章

随机推荐

思享工具箱导航