首页 > 其他 > 详细

VUE 第一讲内容

时间：2021-03-04 12:12:40      阅读：33      评论：0      收藏：0      [点我收藏+]

整体内容展示：

　　技术分享图片

 

  1. VUE快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
    <script>
    // vue的基本使用三个注意事项：
    // 1. 一个html页面中可以存在多个vue实例对象，但是实例对象的变量名强烈建议唯一，而且每一个vue对象负责一个特效功能
    // 2. js中所有的变量和语法都是区分大小写的，new Vue()
    // 3. 建议实例化vue对象的代码写在body的最后面。免得出现html元素无法获取的错误出现

    window.onload = function(){
        // 2. 对vue的核心对象vm进行实例化
        var vm = new Vue({
            el: "#app", // 接下来vue要操作的元素的选择符 element的缩写，表示元素
            data:{ // 保存一些前端使用的数据
                message: "hello world",
            },
        });
    }
    </script>
</head>
<body>
<!-- 3. 在el属性对象的标签中，填写正确的vue语法展示或者控制数据 -->
<div id="app">
    {{message}}
</div>
{{message}}

</body>
</html>

　　2.  VUE框架思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
</head>
<body>
<!-- V，View，视图模板 -->
<div id="app">
    <input v-model="message"><br>
    {{message}}
</div>
<script>
    // new Vue，VM对象，负责时刻保证视图模板中的数据和data里面的数据一致！
    var vm = new Vue({
        el:"#app",
        data:{ // M，Model，模型里面的所有数据，将来都会作为vm对象的属性存在
            message: "一篇文章",
            num: 16,
        }
    })
</script>
</body>
</html>

　　3.  显示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    <h1>{{message.toUpperCase()}}</h1>
    <p>一共有<span>{{num+100}}</span>个同学在上课!</p>
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
    <div v-html="htmlcode"></div>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            message:"hello world",
            num:16,
            htmlcode: "<h1>大标题</h1>"
        }
    });
</script>
</body>
</html>

　　4.  属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    <a :href="url">百度</a>
    <a v-bind:href="url">百度</a><br>
	<!--  v-bind可以使用:代替 -->
    密码：<input :type="type" v-model="password"><button @click="change">{{text}}</button>
    <br>
</div>
<script>
    // data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法
    var vm = new Vue({
        el:"#box",
        data:{
            url: "http://www.baidu.com",
            type: "password",
            password:"",
            text:"显示密码",
        },
        methods:{
            change(){  // change: function(){ 的简写，change自定义名称
                if(this.type=="password"){
                    this.type="text"; // 这里的this表示vm对象
                    this.text="隐藏密码";
                }else{
                    this.type="password";
                    this.text="显示密码";
                }
            }
        }
    });
</script>
</body>
</html>

 <!-- 
	1. v-model数据双向绑定，页面数据的改变，vue对象中的数据也会跟着改变
	（1）v-model基本上只会用在input，textarea，select这些表单元素上
	2. v-text和v-html
	（1）v-text不会解析标签,只能解析文本
	（2）v-html会解析标签,之后显示
	（3）两者只能作用域属性上,是一种属性修饰符,不能写在标签体内
	3. v-bind
	（1）只能作用域属性上,是一种属性修饰符，单向绑定
	（2）省略写法是:
	（3）当v-bind和v-model同时用在一个元素上时，它们各自的作用没变，但v-model优先级更高
-->

　　5. 事件操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    <button :disabled="goods.disabled" @click="sub">-</button>
    <input type="text" v-model="goods.num">
    <button @click="add">+</button>
</div>
<script>
    // data里面的属性，和methods里面的方法都会被加载到vm对象里面充当数属性和方法
    // js中，a-=1 和 a-- 是一样的效果，--就是-=1的缩写
    var vm = new Vue({
        el:"#box",
        data:{
            goods:{
                num: 0,
                disabled: false,
            }
        },
        methods:{
            sub(){
                // 减少商品数量
                if( this.goods.num-- <= 1 ){
                    this.goods.num=0;
                    this.goods.disabled=true;
                }else{
                    this.goods.disabled=false;
                }
            },
            add(){
                this.goods.num++;
                this.goods.disabled=false;
            }
        }
    });
</script>
</body>
</html>

　　6. 样式操作-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
    <style>
    .box1{
        color: red;
        border: 1px solid #000;
    }
    .box2{
        background-color: orange;
        font-size: 32px;
    }
    </style>
</head>
<body>
<div id="box">
    <div :class="cls1">值是字符串</div>
    <div :class="{box1:false,box2:true}">值是对象</div>
    <div :class="cls2">值是对象名</div>
    <div :class="[cls1,cls3]">值是数组</div>
    <div :class="cls4?‘box1‘:‘‘">三元表达式</div>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            cls1: "box1",
            cls2:{
                box1:true,
                box2:false
            },
            cls3:"box2",
            cls4:true,
        },
        methods:{

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

　　7. 样式操作-style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 先引入vue核心文件 -->
    <script src="vue.js"></script>
</head>
<body>
<div id="box">
    <div style="color: red;background-color: orange;">普通css样式写法</div>
    <div :style="{color:fc, backgroundColor:gc}">vue修改行内样式，值是对象</div>
    <div :style="sty1">vue修改行内样式，值是对象名</div>
    <div :style="[sty1,sty2]">vue修改行内样式，值是数组</div>
</div>
<script>
    var vm = new Vue({
        el:"#box",
        data:{
            fc: "red",
            gc: "blue",
            sty1:{
                color: "yellow",
                backgroundColor: "blue"
            },
            sty2:{
                fontSize: "32px",
                border:"1px solid #fff",
            }
        },
        methods:{

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

　　8. 案例-选项卡

<!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.js"></script>
</head>
<body>
    <div id="card">
        <div class="title">
            <span :class="num==0?‘current‘:‘‘" @click="num=0">国内新闻</span>
            <span :class="num==1?‘current‘:‘‘" @click="num=1">国际新闻</span>
            <span :class="num==2?‘current‘:‘‘" @click="num=2">银河新闻</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>

　　9. 条件渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
    .loginbox{
        width: 200px;
        height: 120px;
        background-color: gray;
    }
    </style>
</head>
<body>
    <div id="app">
        <button @click="is_show=!is_show">登录</button>
        <div v-if="is_show" class="loginbox">
            登录窗口
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show: false,
            }
        })
    </script>
</body>
</html>

　　10. 条件渲染指令---v-else

<!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="is_login">欢迎回到路飞学成！    <a href="">退出</a></p>
        <p v-else><a href="">登录</a></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_login: false, // 登录状态
            }
        })
    </script>
</body>
</html>

　　11. 条件渲染指令---v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <li v-if="num==1">星期一</li>
        <li v-else-if="num==2">星期二</li>
        <li v-else-if="num==3">星期三</li>
        <li v-else-if="num==4">星期四</li>
        <li v-else-if="num==5">星期五</li>
        <li v-else-if="num==6">星期六</li>
        <li v-else>星期天</li>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                num: new Date().getDay(), // 登录状态
            }
        })
    </script>
</body>
</html>

　　12. 条件渲染指令---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-show="is_show">一段文本</p>
        <p v-if="is_show">一段文本</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                is_show: true,
            }
        })
    </script>
</body>
</html>

　　13. 条件渲染指令---v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <table border="1" align="center" width="800">
        <tr>
            <th>序号</th>
            <th>商品编号</th>
            <th>商品标题</th>
            <th>商品价格</th>
            <th>商品数量</th>
        </tr>
        <tr v-for="goods,index in goods_list">
            <td>{{index+1}}</td>
            <td>{{goods.id}}</td>
            <td>{{goods.title}}</td>
            <td>{{goods.price}}</td>
            <td>{{goods.num}}</td>
        </tr>
    </table>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                goods_list: [
                    {id:10,title:"商品1",price:100,num:65},
                    {id:15,title:"商品2",price:120,num:65},
                    {id:16,title:"商品3",price:150,num:65},
                    {id:18,title:"商品4",price:200,num:65},
                    {id:20,title:"商品5",price:3060,num:65},
                    {id:21,title:"商品6",price:1000,num:65},
                ],
            }
        })
    </script>
</body>
</html>

　　

 

VUE 第一讲内容

原文：https://www.cnblogs.com/NGU-PX/p/14478870.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！