简单入门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

总结:

相关推荐
小周同学@19 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok19 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~19 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号19 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌20 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康20 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海21 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏21 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码21 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby1 天前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js