Vue初步学习

简单例子

配置环境,idea安装vue插件

在官网下载vue.js
记得导入！

简单代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>


<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#app',//id选择器
        //Model :数据
        data:{
            message:"hello vue!"
        }
    });
</script>
</body>
</html>

MVVM模式

双向绑定就是 前端数据改变 data中的数据也会改变 反之也会

基本语法

官方文档:https://cn.vuejs.org/v2/guide/
除了文本插值,可以通过v-bind绑定值
简单代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        }
    });
</script>
</body>
</html>

鼠标移过去后会看到hello,vue

编写vue程序基本框架代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
    });
</script>
</body>
</html>

条件与循环

通过v-if v-else实现

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="ok">YES</h1>
    <h1 v-else-if="ok">NO</h1>
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ok: true,
        }
    });
</script>
</body>
</html>

for循环通过v-for实现
数据类型 数组[] 对象{}

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            items:[
                {message: 'jie'},
                {message: 'hhh'}
            ]
        }
    });
</script>
</body>
</html>

还有index参数获取下标

<li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>

posted @ 2021-05-08 15:20  一个经常掉线的人  阅读(34)  评论(0)    收藏  举报