JavaScript - Vue

湫湫玺云台

于 2024-08-19 17:09:27 发布

阅读量332

点赞数 10

分类专栏： JavaWeb 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_57620101/article/details/141326762

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue是一套前端框架，免除原生Javascript中的DOM操作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

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

插值表达式：

形式：{{表达式}}

内容：变量、三元运算符、函数调用、算术运算

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

v-html 指令用于输出 html 代码：<div v-html="message"></div>

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素：<p v-if="seen">现在你看到我了</p>

v-else-if 条件性的渲染某元素

v-else 条件性的渲染某元素

v-show 根据条件展示某元素，区别在于切换的是dispaly属性的值

v-for 列表渲染，遍历容器的元素或者对象的属性：<div v-for="addr in addrs">{{addr}}</div>

要索引则<div v-for="（addr,index） in addrs">{{addr}}</div>

v-model 指令来实现双向数据绑定：<p>{{ message }}</p> <input v-model="message">

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

v-on 指令，它用于监听 DOM 事件，并对用户的输入进行响应。<input type="button" value="按钮" v-on:click="handle()">

同<input type="button" value="按钮"@click="handle()">

上述是点击事件，离焦事件：blur，聚焦事件：focus

v-bind 指令被用来响应地更新 HTML 属性

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

可以简写：v-bind省略,如<div :class="{'class1': use}">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

上述<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">: 创建一个复选框，并使用v-model指令将其值绑定到Vue实例的use数据属性上。当复选框被选中时，use的值将变为true，否则为false。

修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

<form> 标签有一个 v-on:submit.prevent 指令。这表示当表单尝试提交时（通常是用户点击提交按钮），Vue将会调用名为 onSubmit 的方法，并且阻止表单的默认提交行为。如果有 .prevent 修饰符，表单会执行其默认的提交行为，通常是发送一个HTTP请求到服务器并刷新页面。

案例：通过Vue完成表格数据的渲染展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 指令 Test</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <!-- 表头 -->
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
            <th>等级</th>
        </tr>

        <tr align="center" v-for="(user,index) in users">
            <td>{{index+1}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>
                <span v-if="user.gender == 1">男</span>
                <span v-if="user.gender == 2">女</span>
            </td>
            <td>{{user.score}}</td>
            <td>
                <span v-if="user.score >= 85">优秀</span>
                <span v-else-if="user.score >=60">及格</span>
                <span style="color: red;" v-else>不及格</span>
            </td>
        </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            users:[{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            },{
                name:"Rose",
                age:18,
                gender:2,
                score:86
            },{
                name:"Jerry",
                age:26,
                gender:1,
                score:90
            },{
                name:"Tony",
                age:30,
                gender:1,
                score:52
            },{
                name:"Tom",
                age:20,
                gender:1,
                score:78
            }
        ]
        },
        methods: {
                
        }
    })
</script>
</html>

生命周期

湫湫玺云台

关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - Vue

Vue是一套前端框架，免除原生Javascript中的DOM操作，简化书写基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。官网: https://v2.cn.vuejs.org/插值表达式：形式：{{表达式}}内容：变量、三元运算符、函数调用、算术运算。
复制链接

扫一扫

专栏目录