后端程序员的前端必备【Vue】- 02 Vue基础语法

yinying293

已于 2023-04-30 14:10:41 修改

阅读量831

点赞数 2

分类专栏：后端程序员的前端路线 Java # 框架演进文章标签： vue.js 前端 javascript java

于 2023-04-30 14:00:29 首次发布

本文链接：https://blog.csdn.net/yinying293/article/details/130448138

版权

Java 同时被 3 个专栏收录

69 篇文章 1 订阅

订阅专栏

框架演进

48 篇文章 0 订阅

订阅专栏

后端程序员的前端路线

14 篇文章 0 订阅

订阅专栏

Vue基础语法

1 插值表达式
2 v-text标签
3 v-html标签
4 v-if标签
5 v-for标签

1 插值表达式

插值表达式的作用是在View中获得Model中的内容

可以嵌套标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告（有空格有格式） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 离线版vue.js引入 -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id ="app">
        {{title}}
        {{arr[1]}}
        {{user.name}}
        {{user.age}}
        {{sayHello()}}
    </div>

    <script>
     //创建Vue实例
     var vm = new Vue({
        el: '#app',
        data:{
            title:"hello,vue!!",
            arr:[00,11,22,33,44,55],
            user:{
                name:"jack",
                age:30
            }
        },
        // 方法必须写在methods里面  匿名函数  对象名：对象值
        methods: {
            sayHello:function(){
                return "hello hello";

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

</html>
<!--输出 hello,vue!! 11 jack 30 hello hello -->

1.1 简单使用插值表达式获取数据

<div id="app">
	{{title}}
</div>
<script>    
    new Vue({
        el:"#app",
        data:{
            title:"Hello world!"
        }
    })
</script>

此时，页面上将会显示"hello,vue!!"

1.2 在插值表达式中获取数组中的内容

<div id="app">
	{{arr[2]}}
</div>
<script>    
    new Vue({
        el:"#app",
        data:{
            arr:[11,22,33,44]
        }
    })
</script>

此时，页面上会显示“33”，也就是数组中的第三个元素被获取。

1.3 使用插值表达式获取对象中的属性

<div id="app">
	{{ user.age }}
</div>
<script>    
    new Vue({
        el:"#app",
        data:{
            user:{
            	name:"cxk",
                age:30
            }
        }
    })
</script>

此时，页面上会显示“20”，也就是对象中age属性的值。

1.4 使用插值表达式调用Vue中的方法

<div id="app">
	 {{sayHello()}}
</div>
new Vue({
    el:"#app",
    data:{
        ...
    },
    methods:{
        sayHello:function(){
            return "hello vue!!!"
        }
    }
})

此时，页面上会显示“hello vue!!!”，也就是调用了vue对象中的sayHello方法，并展示了方法的返回值。

2 v-text标签

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}

<div id="app">
    <span v-text="username"></span>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            username:"admin"
        }
    })
</script>

3 v-html标签

当文本内容中包含有html内容的时候。将内容以html的形式呈现在页面

<div id="app">
    <span v-html="a"></span><br>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            a:"<a href='http://www.baidu.com'>点击百度一下</a>"
        }
    })
</script>

4 v-if标签

Vue中的分支语句v-if非常好理解，逻辑跟Java中的if-else相同。v-if语句块包含以下内容：

v-if
v-else
v-else-if
v-show

<div id="app">
    <span v-if="age > 18">成年人</span> 
    <span v-else>未成年人</span> 

    <li v-if="money > 8000">买个iPhone</li>
    <li v-else-if="money > 5000">买个华为</li>
    <li v-else-if="money > 3000">买个小米</li>
    <li v-else>买个锤子</li>
    
    <p v-if="flag">v-if效果</p>
    <p v-show="flag">v-show效果</p>
    
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            age:17,
            money:5500
        }
    })
</script>

在标签中取值不能加{{}}获取数据

v-else要紧跟着同组的v-if

v-if是直接在页面上添加和删除p标签来达到效果，因此v-show在反复切换的应用场景下，效率比v-if更高。

5 v-for标签

5.1 普通的for循环

<div id="app">
    <ul v-for="stu in students">
        <li>{{stu.id}}</li>
        <li>{{stu.name}}</li>
        <li>{{stu.score}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{           
            students:[
                {
                    id:101,
                    name:'zhangsan',
                    score:80 
                },{
                    id:102,
                    name:'lisi',
                    score:90 
                },{
                    id:103,
                    name:'wangwu',
                    score:70     
                }
            ]
        }
    })
</script>

5.2 带索引的for循环

<div id="app">
    <table> 
        <tr>  
            <th>编号</th>
            <th>姓名</th>
            <th>分数</th>
        </tr>
        <tr v-for="stu,index in students">
            <td>{{index+1}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.score}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            ...
        }
    })
</script>

5.3 遍历对象中的信息

<div id="app">
    <ul v-for="v,k,i in student">
        <li>{{i}}--{{k}}--{{v}}</li>
   </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            student:{
                id:666,
                name:'zhaoliu',
                score:88 
            }
        }
    })
</script>