3--Web前端开发-Vue

最新推荐文章于 2024-09-06 22:20:29 发布

灯火不休ᝰ

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量351

点赞数 14

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2301_77946674/article/details/140956568

版权

Vue

是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。

框架：是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架开发，更加快捷，更加高效。

插值表达式

形式：{{表达式}}

内容可以是：

变量
三元运算符
函数调用
算术运算

指令

HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...s
常用指令

v-bind 为HTML标签绑定属性值，如设置 href,css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if、v-else-if、v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

v-bind和v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令</title>
    <script src="./JS/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">

    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el:"#app",
        data:{
            url:"https://www.baidu.com"
        }
    })
</script>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令</title>
    <script src="./JS/vue.js"></script>
</head>
<body>
    <div id="app">
       <input type="button" value="点我一下" v-on:click="handle()">
       <!-- 简化写为 -->
       <input type="button" value="点我一下" @click="handle()">
    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        el:"#app",
        data:{
            
        },
        methods: {
            handle:function() {
            alert("你点我了");
            
        }
        },
        
    })
</script>
</html>

案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</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>
    //定义vue对象
    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

            },
        ]
           
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成，Vue初始化完成，HTML页面渲染成功。（发送请求到服务端，加载数据）
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

灯火不休ᝰ

关注

14
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
3--Web前端开发-Vue

是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。框架：是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架开发，更加快捷，更加高效。
复制链接

扫一扫