zoukankan html css js c++ java

Vue -- 基础

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>

注意事项

Vue实例化的对象是独立的
Vue语法区分大小写
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>

在浏览器中可以在 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>

事件操作

语法

有两种事件操作的写法，@事件名和 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点：

v-show后面不能v-else或者v-else-if
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>

查看全文

相关阅读:
start tag, end tag issues in IE7, particularly in xslt transformation
用SandCastle为注释生成chm文档
 Firebug
架构的重点
 Linux Shell常用技巧(十) 管道组合
 Linux JDK升级
 Linux Shell常用技巧(十二) Shell编程
 Packet Tracer 5.0实验(一) 交换机的基本配置与管理
 Linux Shell常用技巧(六) sort uniq tar split
Linux Shell常用技巧(二) grep

原文地址：https://www.cnblogs.com/zhenghuiwen/p/13144620.html