后端开发了解的Vue

最新推荐文章于 2023-10-18 12:09:23 发布

小白葫芦

最新推荐文章于 2023-10-18 12:09:23 发布

阅读量673

点赞数

本文链接：https://blog.csdn.net/qq_40791843/article/details/98630672

版权

Vue

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue的简单使用

插值表达式

<!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">
        <!-- v-cloak有网络延迟的情况下，显示的是空白，一直到文本加载出来-->
        <p v-cloak>{{msg1}}</p>
        <p>{{msg1}}</p>
        <!-- v-text不会有网络延迟-->
        <p v-text="msg1"></p>
        <p v-text="msg2"></p>
        <!--直接插值不会解析html标签-->
        <p>{{msg2}}</p>
        <!-- v-html 解析html的标签并显示-->
        <p v-html="msg2"></p>
    </div>

    <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>

在这里插入图片描述

c-bind c-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">
        <!--
         v-bind简写为 :
         value:可以拼接字符串 对象
         -->
        <label>用户名：<input type="text" name="username" v-bind:value="msg" /></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg"/></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+'你好'"></label>
        <hr/>
        <label>用户名：<input type="text" name="username" :value="msg+name"></label>
        <!-- v-on 简写为@ -->
        <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>

在这里插入图片描述

双向数据绑定实现计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的双向数据绑定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div class="box">
        <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>操作数1：<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:{
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                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>

在这里插入图片描述

Vue中的for指令

 1.使用v-for指令遍历简单数组
     <p v-for="name in names">{{name}}</p>
     <p v-for="name,index in names" v-text="name+'---'+index"></p>
 2.使用v-for指令遍历对象数组
     <p v-for="user in users">id：{{user.id}}---name：{{user.name}}</p>
 3.使用v-for指令遍历对象属性值
     <p v-for="value,key in cqCity">{{key+'--'+value}}</p>
 4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历）
     <p v-for="num,index in 12" v-text="num+'---'+index"></p>
 【注意】
     1.遍历得到的值可以使用【插值表达式、v-text、v-html】显示
     2.不管遍历何种数据类型，都可以得到值和索引
     3.遍历对象属性和值时可以得到【值、属性名字、索引】
     4.值的赋值顺序是：值、【键名】、索引
     5.一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
     6.遍历过程中接受值的变量名字可以任意
     7.遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历）
     8.在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化）
         注意：
             1.key必须是基本数据类型（string/number）
                 报错：Avoid using non-primitive value as key, use string/number value instead.
             2.key的数据值一定不要重复
                 报错：Duplicate keys detected: '3'. This may cause an update error.
         技巧：一般使用对象中的值唯一属性（主键）作为key，比如id
         语法：
             <p v-for="user in users" :key="user.id">
                 <label><input type="checkbox"/>{{user.id}}---{{user.name}}</label>
             </p>
 【知识点】
     1.如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定
     2.数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
         this.users.push({id:this.id,name:this.name,age:this.age});
         this.users.unshift({id:this.id,name:this.name,age:this.age});
     3.在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据
         的唯一关联，避免被其它操作（指非本元素）影响

<!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>

        <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>
        <!-- id为主键key -->
        <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:{
                names:["陈斯","杨晓露","徐子雁","冉春嫦","冷芹","冉维","彭丽敏","王超群","彭前"],
                users:[
                    {id:1,name:"胡歌",age:32},
                    {id:2,name:"袁弘",age:33},
                    {id:3,name:"霍建华",age:35}
                ],
                cqCity:{no:"渝",level:"市",area:["渝北区","渝中区","江北区","沙坪坝区","江北区"]},
                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>

在这里插入图片描述

小白葫芦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
后端开发了解的Vue

VueVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue的简单使用插值表达式<!DOCTYPE ht...
复制链接

扫一扫