vue-day01

最新推荐文章于 2024-10-05 01:22:45 发布

喜欢吃丸子

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量242

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43996260/article/details/123645873

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一. 什么是vue.js

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

二. 框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

例如：node中的express

库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

例如：从Jquery 切换到 Zepto
例如：从EJS切换到 art-template

三. MVC与MVVM的区别

MVC是后端的分层开发概念;
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

四. Vue.js的代码结构

引入vue.js 2,3是引入vue.js的线上地址
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
写视图层，我们要展示的内容
实例化Vue()

data：存放数据
el：这个控制是哪块视图
methods：放我们的方法

五. 插值表达式、v-cloak、v-text、v-html

转自：(47条消息) Vue中插值表达式,v-text和v-html三者区别_在路上s的博客-CSDN博客_v-text和v-html的区别

六、v-bind，v-on

v-bind用于绑定一个或多个属性值，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

v-on指令：用来绑定事件，例如给一个按钮绑定一个改变颜色的事件<button@click="changeColor"></button>

七.事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获模式（捕获阶段先触发）
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.4.0.js"></script>
    <style>
        .outer {
            height: 500px;
            background-color: blue;
        }

        .inner {
            width: 500px;
            height: 150px;
            background-color: rgb(42, 197, 189);
        }

        .middle {
            width: 900px;
            height: 300px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="outer" @click.capture="outer">
            <div class="middle" @click.capture="middle">
                <div class="inner" @click.capture="inner"></div>
            </div>
        </div>
        <a href="https://www.baidu.com" @click.prevent.once="log">百度一下</a>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            outer() {
                console.log(3);
            },
            inner() {
                console.log(1);
            },
            middle() {
                console.log(2);
            },
            log() {
                console.log(123);
            }
        },
    })
</script>

</html>

冒泡是有内到外，就是本例中inner-middle-outer，捕获是由外到内，就是本例中outer-middle-inner

八. v-model数据双向绑定

作用：数据双向绑定
注意：绑定的是表单控件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <input type="text" :value="msg">
        <br>
        <input type="text" name="" id="" v-model:value="msg">
        <button @click="getValue">点我获取value</button>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello",
        },
        methods: {
            getValue() {
                console.log(this.msg);
            }
        },
    })
</script>

</html>

通过双向数据绑定我们可以设置并拿到想要的value值。

九. V-for和key属性

遍历数组，参数(item,index) in list

遍历对象，参数(value,key,index) in list

遍历数字，num in 10 (1~10)

需要注意的是1.key在使用v-for的时候都需要去设置key2.让界面元素和数组里的每个记录进行绑定3. key只能是字符串或者数字 4.key必须是唯一的

十. v-if与v-show区别

区别：
1. v-if删除dom元素
2. v-show设置display:none
应用场景：
1. v-if只修改一次的时候可以使用v-if
2. v-show频繁切换的时候可以使用v-show

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-show和v-if的区别
        v-show:display:none;适用于频繁使用
        v-if:通过删除添加DOM元素，适用于一次或少次
     -->
        <div v-show="flag">我在显示{{msg}}</div>
        <div v-if="flag">我是v-if显示或隐藏</div>
        .......................................
        <br>
        <div v-if="age<18">少年</div>
        <div v-else-if="age<25">青年</div>
        <div v-else-if="age<35">壮年</div>
        <div v-else-if="age<45">中年</div>
        <div v-else-if="age<55">老年</div>
        <div v-else="age<80">老大爷</div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            flag: false,
            msg: "啦啦啦",
            age: 50,
        },
        methods: {

        },
    })
</script>

</html>