简单入门Vue前端框架

目录

一Vue概述:

1.1MVVM模型

1.2插值表达式

二快速入门案例

三Vue常用指令:

四Vue小案例

五Vue的生命周期:

​mounted

总结:


一Vue概述:

1.1MVVM模型

1.2插值表达式

插值表达式是vue框架提供的一种在html模板中绑定数据的方式,使用{{变量名}}方式绑定Vue实例中data中的数据变量。会将绑定的数据实时的显示出来。

语法:

vue模板的表达式为{{ 变量 }}

注意:

表达式中不能定义变量或函数,也不可以写 if 条件或循环

二快速入门案例

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
    
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>
</body>
</body>
</html>

三Vue常用指令:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind,v-model</title>
    <script src ="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js" ></script>
</head>
<body>
    <div id = "app">
        <a v-bind:href ="url">百度</a>
        <input type="text" v-model="url"> 
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            url:"https://www.baidu.com"
        }

    })
</script>
</html>
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
    <div id="body">
    <input type="button" value="点击" v-on:click="say(message)">
    </div>
</body>
<script>
    new Vue({
        el:'#body',
        data:{
            message:'hello vue.js'
        },
        methods:{
            say:function(message){
                alert(message)
            }
        }
    })
</script>
</html>

四Vue小案例

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

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Case</title>
    <script src ="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.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= "content" v-for="(user1,index) in user" >

    <td>{{index+1}}</td>
    <td>{{user.name}}</td>
    <td>{{user.age}}</td>
    <td>{{user.gender==1?"男":"女"}}</td>
    <td>{{user.score}}</td>
    <td>{{user.score>=90?"优秀":user.score>=80?"良好":user.score>=70?"一般":"不及格"}}</td>

</tr>

        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:[{
                name:"张三",
                age:30,
                gender:1,
                score:88
            },
            {
                name:"李四",
                age:24,
                gender:0,
                score:95
            },
            {
                name:"王五",
                age:28,
                gender:1,
                score:92
            },
            {
                name:"赵六",
                age:22,
                gender:0,
                score:89
            },
            {
                name:"钱七",
                age:35,
                gender:1,
                score:91
            }]
        }
    })
</script>

</html>

五Vue的生命周期:

mounted

总结:

相关推荐
blackorbird32 分钟前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者1 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls2 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机4 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安4 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding