vue基础一

最新推荐文章于 2022-07-16 19:58:51 发布

可芭乐

最新推荐文章于 2022-07-16 19:58:51 发布

阅读量257

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/a839371666/article/details/70823174

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue与angular的区别：
vue——简单、易学
指令以v-xxx表示
一片html代码配合上json，在new出来vue实例
个人维护项目
angular——上手难
指令以ng-xxx表示
所有属性和方法都挂到$scope身上
angular由Google维护
适合：pc端项目
共同点：不兼容低版本的IE

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c = new Vue({
            el:'#box',//选择器
            data:{
                msg:'welcome vue',
                msg2:12,
                msg3:true,
                arr:['apple','pear'],
                json:{a:'apple',b:'pear'},
            }
        });
    };
</script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>
</html>

常用指令：
angular：ng-model ng-controller
指令：扩展html标签功能、属性
v-model：一般表单元素（input）

    <div id="box">
        <input type="text" v-model="msg">
        <br>
        {{msg}}
    </div>

一般表单元素（input）双向数据绑定
在数组中循环：

v-for=“name in arr”
    {{$index}}

在json中循环：

v-for=“name in json”
    {{$index}}  {{$key}}

v-for="(k,v) in json"//k=key,v=value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c = new Vue({
            el:'#box',
            data:{
                arr:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'orange'}
            }
        });
    };
</script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">
                {{value}}  {{$index}}
            </li>
        </ul>
    </div>
</body>
</html>

这里写图片描述
事件：
v-on:click/bdlclick……=”函数”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c = new Vue({
            el:'#box',
            data:{
                arr:['apple','banana','orange','pear'],
                json:{a:'apple',b:'banana',c:'orange'}
            },
            methods:{
                add:function(){
                    this.arr.push("tomato");
                }
            }
        });
    };
</script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" v-on:click="add()">
        <br>
        <ul>
            <li v-for="value in arr">
                {{value}}
            </li>
        </ul>
    </div>
</body>
</html>

点击按钮div消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c = new Vue({
            el:'#box',
            data:{
                a:true
            },
            methods:{
                add:function(){
                    this.arr.push("tomato");
                }
            }
        });
    };
</script>
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" v-on:click="a=false">
        <div style="width:200px; height:200px; background:red" v-show="a"></div>
    </div>
</body>
</html>

显示隐藏：

v-show="true/false"

可芭乐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础一

vue与angular的区别： vue——简单、易学指令以v-xxx表示一片html代码配合上json，在new出来vue实例个人维护项目 angular——上手难指令以ng-xxx表示所有属性和方法都挂到$scope身上 angular由Google维护适合
复制链接

扫一扫

专栏目录