Vue

最新推荐文章于 2022-04-17 00:34:22 发布

阿百川pro

最新推荐文章于 2022-04-17 00:34:22 发布

阅读量91

点赞数

分类专栏： Java Vue 文章标签： Vue Java

本文链接：https://blog.csdn.net/qq_44911955/article/details/98628066

版权

Java 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网： https://cn.vuejs.org/

Vue的指令学习

00：结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>  <!--关联Vue相关配置，这一句固定出现在头部或者body的第一句，不能写在body的最后一句-->
</head>
<body>


<div id="app">

</div>


<script>
    var vm = new Vue({
        el:"#app",
        data: {
        
        }
    });


</script>
</body>
</html>

01：插值表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak、v-text、v-html指令以及插值表达式的学习</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>

    <h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
    <div id="app">
        <p v-cloak>{{msg1}}</p>
        <p>{{msg1}}</p>
        <p v-text="msg1"></p>
        <p v-text="msg2"></p>
        <p>{{msg2}}</p>
        <p v-html="msg2"></p>
    </div>
   <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>  <!--这一句固定出现在头部或者body的第一届，不能写在body的最后一句-->
    <!--<script src="../lib/vue.js" type="text/javascript"></script>-->
    <script type="text/javascript">
        //vue应用对象
        var vm = new Vue({
            绑定属性
            el:"#app",
            data:{
                msg1:"Hello",
                msg2:"<p style='color:red'>我是一个p标签</p>"
            }
        });
    </script>
</body>
</html>

结果：在这里插入图片描述

02：v-bind、v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-bind、v-on指令的学习</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>v-bind、v-on指令的学习</h1>
    <div id="app">
        <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" v-bind:value="name" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="name" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+name"></label>
        <button v-on:click="sayHello(name)">点击下显示你好</button>
        <button @click="sayHello(name)">点击下显示你好</button>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"我是来自Model中的内容！",
                name:"李师师"
            },
            methods:{
                sayHello:function (name) {
                    alert("你好！"+name);
                }
            }
        });
    </script>
</body>
</html>

结果：
在这里插入图片描述

03：使用Vue实现跑马灯效果


<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>使用Vue实现跑马灯效果</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<h1>使用Vue实现跑马灯效果</h1>
<div id="light">
    <button v-on:click="lang()">开始</button>
    <!--&nbsp;&nbsp;|&nbsp;&nbsp;-->
    <button @click="stop()">暂停</button>         <!--“@”可以代替“v-on”-->
    <h3 v-html="text"></h3>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#light",
        data:{
            text:"太阳快落山了，你们的孩子居然不害怕？？？当然不害怕，她知道明天太阳还会升起来的!!!”",
            lightIntervalID:null
        },
        methods:{

            lang:function (){
                //此时的this就是vm对象（text、lang、stop等都是直接挂在vm身上的）
                //console.log(this.text);
                if(this.lightIntervalID!==null){return;}
                this.lightIntervalID = setInterval(() => {
                    //此时的this代表vm对象
                    //console.log(this);
                    this.text = this.text.substring(1).concat(this.text.charAt(0));
                },200);
            },
            stop(){
                clearInterval(this.lightIntervalID);
                this.lightIntervalID = null;
            }
        }
    });
</script>
</body>
</html>

结果：
在这里插入图片描述

04：双向数据绑定实现简易计算器.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的双向数据绑定指令v-mode</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div class="box">
        <h1>Vue中的双向数据绑定指令v-mode</h1>
        <label>单价：<input type="text" v-model="price"></label><br/>
        <label>数量：<input type="text" v-model="num"></label><br/>
        <button v-on:click="calc()">点击计算总价</button><br/>
        <label>总价：<span style="color:deeppink" v-text="sum"></span></label>

        <hr/>

        <h1>使用v-mode双向数据绑定实现建议计算器</h1>
        <label>操作数1：<input type="text" v-model="num1" /></label>
        <select v-model="opr">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <label>操作数2：<input type="text" v-model="num2" /></label>
        <button @click="doCalc()">=</button>
        <span style="font-size: 20px;color:deeppink" v-text="result"></span>
    </div>
    <script type="text/javascript">
        var vm2 = new Vue({
            el:".box",
            data:{
                price:12,
                num:1,
                sum:12,
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                calc(){
                    this.sum = this.price*this.num;
                },
                doCalc(){
                    //标准的switch分支根据计算类型不同得到不同结果
                    /*switch(this.opr){
                        case "+":
                            this.result = parseInt(this.num1)+parseInt(this.num2);
                            break;
                        case "-":
                            this.result = parseInt(this.num1)-parseInt(this.num2);
                            break;
                        case "*":
                            this.result = parseInt(this.num1)*parseInt(this.num2);
                            break;
                        case "/":
                            this.result = parseInt(this.num1)/parseInt(this.num2);
                            break;
                    }*/

                    //使用eval计算获取结果
                    this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
                }
            }
        });
    </script>
</body>
</html>

结果：
在这里插入图片描述

05：for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的for指令</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">

    <h1>Vue中的for指令</h1>
    <p v-for="name in names">{{name}}</p>
    <hr/>
    <p v-for="name,index in names" v-text="name+'---'+index"></p>
    <hr/>
    <p v-for="user in users" v-text="user"></p>
    <hr/>
    <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p>
    <hr/>
    <p v-for="value,key in cqCity">{{key+'--'+value}}</p>
    <hr/>
    <p v-for="num in 12" v-text="num"></p>
    <hr/>
    <p v-for="num,index in 12" v-text="num+'---'+index"></p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data: {
            names: ["陈斯", "杨晓露", "徐子雁", "冉春嫦", "冷芹", "冉维", "彭丽敏", "王超群", "彭前"],
            users: [
                {id: 1, name: "胡歌", age: 32},
                {id: 2, name: "袁弘", age: 33},
                {id: 3, name: "霍建华", age: 35}
            ],
            cqCity: {no: "渝", level: "市", area: ["渝北区", "渝中区", "江北区", "沙坪坝区", "江北区"]},
        }
    });
</script>
    </body>

    </html>

结果：
在这里插入图片描述

06:for指令实现数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的for指令</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>

 <div id="app">
 <h1>Vue中的for指令实现数据绑定</h1>
        <label>id：<input type="text" v-model="id"/></label>
        <label>name：<input type="text" v-model="name"/></label>
        <label>age：<input type="text" v-model="age"/></label>
        <label><button @click="add()">添加人员信息</button></label>
        <p v-for="user in users" :key="user.id">
            <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
        </p>
    </div>

 <script type="text/javascript">
   var vm = new Vue({
            el:"#app",
            data:{
            users:[
                    {id:1,name:"胡歌",age:32},
                    {id:2,name:"袁弘",age:33},
                    {id:3,name:"霍建华",age:35}
                ],
             id:'',
                name:'',
                age:''
            },
            methods:{
                add(){
                    //this.users.push({id:this.id,name:this.name,age:this.age});
                    this.users.unshift({id:this.id,name:this.name,age:this.age});
                }
            }
        });
    </script>
</body>
</html>

结果：
在这里插入图片描述

阿百川pro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue

Vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网： https://cn.vuejs.org/...
复制链接

扫一扫