VUE-基础使用1

最新推荐文章于 2023-05-20 10:03:10 发布

小陈码上努力

最新推荐文章于 2023-05-20 10:03:10 发布

阅读量84

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_46505467/article/details/127562897

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

什么是vue.js

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

框架和库的区别

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

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

MVC与MVVM的区别

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

Vue.js的代码结构

（1）引入vue.js
（2）写视图层，我们要展示的内容
（3）实例化Vue()
➢ data：存放数据
➢ el：这个控制是哪块视图
➢ methods：放我们的方法

 <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        {{ message }}
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!'
            },
methods:{
            
            }
        })
    </script>

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

➢ 插值表达式{{}}，可以在前后插入一些内容
➢ v-text：会替换掉元素里的内容
➢ v-html：可以渲染html界面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-clock防止界面闪烁</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 在我们vue加载之前v-cloak是存在，vue加载结束之后v-cloak就隐藏了，利用这个特性可以实现：界面防止闪烁 -->
        <p v-cloak>
            -----------{{ message }}---------------
        </p>
        <!-- 使用v-text给界面元素赋值 -->
        <!-- 如果我们想在变量之前或者后面加一些内容的话使用插值表达式 -->
        <!-- 如果我们想直接覆盖元素内容的话使用v-text指令 -->
        <p v-text='message'>------------------------</p>
        <p v-text='html'>------------------------</p>
        <!-- 通过v-html指令把字符串解析成html的内容 -->
        <p v-html = 'html'>1111</p>
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                html:'<h1>这是一个很大的标题</h1>'
            }
        })
    </script>
</body>

</html>

v-bind

界面元素属性值的绑定
➢ 括号里不加引号的都是我们data里的数据读取
➢ 如果想使用字符串需要加上引号
➢ 里面可以写表达式
➢ 里面也可以调用定义好的方法，拿到的是方法的返回值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind这指令用于属性的绑定</title>
</head>

<body>
    <!-- 视图层 -->
    <div id="app">
        <!-- 插值表达式，可以读取我们的变量 -->
        {{ message }}
        <!-- <button v-bind:title="nihao">按钮</button> -->
        <button :title="nihao">按钮</button>
        <input type="text" v-bind:value="message">
    </div>

    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {
                message: 'Hello Vue!',
                flag: false,
                nihao:'你好世界'
            }
        })
    </script>
</body>
</html>

v-on

（1）进行事件的绑定，我们用的最多的是click事件绑定
（2）简写@
（3）实现跑马灯的效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <button v-on:click="lang">浪起来</button>
        <button @click='didiao'>低调</button>
        <p>{{message}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: '猥琐发育，别浪~~~',
                intervalId: null
            },
            methods: {
                lang() {
                    // 在这里可以直接通过this拿到message
                    // substring() 两个参数代表是一个范围
                    // substr() 第一个参数代表的是位置，第二个参数代表是个数
                    // 我们每次都创建一个新的定时器，旧的并没有被清楚掉
                    // clearInterval(this.intervalId)
                    if (this.intervalId != null) return;
                    this.intervalId = setInterval(() => {
                        let first = this.message.substring(1, 2);
                        let end = this.message.substring(1);
                        this.message = end + first;
                    }, 200);
                },
                didiao() {
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            },
        })
    </script>
    <!--
        1、给这个浪起来添加点击事件
        2、在methods定义一个方法，方法里我们让第一个字放到最后，然后重新给data里的message赋值。
        3、加一个定时器
    -->
</body>
</html>

事件修饰符

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件修饰符</title>
    <style>
        .box {
            height: 200px;
            background-color: green;
        }
        .sub-box {
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box" @click='clickBox'>
            <button @click.stop='clickBtn'>点我</button>
        </div>
        <a href="http://www.baidu.com" @click.prevent='clickA'>baidu</a>
        <h1>capture事件修饰符</h1>
        <!-- 加这个capture修饰符要加在最外层容器 -->
        <div class="box" @click='clickBox'>
            <div class="sub-box" @click.capture='clickSubBox'>
                <button @click='clickBtn'>事件捕获</button>
            </div>
        </div>
        <!-- self事件修饰符，我们实际触发的是这个元素的事件的时候，才会触发事件，通过冒泡或者捕获都不会触发这个事件 -->
        <h1>self事件修饰符</h1>
        <div class="box" @click='clickBox'>
            <div class="sub-box" @click.self='clickSubBox'>
                <button @click='clickBtn'>事件捕获</button>
            </div>
        </div>
        <!-- once事件修饰符修饰的事件只会触发一次 -->
        <button @click.once='clickBtn'>once</button>
        <!-- self只组织了某个特定元素的冒泡
        stop组织所有的事件冒泡 -->
    </div>
    <!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        // 调度层
        var vm = new Vue({
            // vue控制的区域
            el: '#app',
            // data参数存放我们的数据，这一层就是mvvm里的model层
            data: {},
            methods: {
                clickBox() {
                    console.log('点击了盒子')
                },
                clickBtn() {
                    console.log('点击了按钮');
                },
                clickA() {
                    console.log('点击了a标签')
                },
                clickSubBox() {
                    console.log('点击了sub box')
                }
            },
        })
    </script>
</body>
</html>

v-model数据双向绑定

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
</head>

<body>
    <div id='app'>
        <input type="text" v-model:value='value1'>
        <select v-model:value='opration'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='value2'>
        <button @click='calc'>=</button>
        <input type="text" v-model:value='result'>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value1: '',
                value2: '',
                opration: '+',
                result: ''
            },
            methods: {
                calc() {
                    switch (this.opration) {
                        case '+':
                            this.result = Number.parseFloat(this.value1) + Number.parseFloat(this.value2);
                            break;
                        case '-':
                            this.result = Number.parseFloat(this.value1) - Number.parseFloat(this.value2);
                            break;
                        case '*':
                            this.result = Number.parseFloat(this.value1) * Number.parseFloat(this.value2);
                            break;
                        case '/':
                            this.result = Number.parseFloat(this.value1) / Number.parseFloat(this.value2);
                            break;
                    }
                }
            }
        })
    </script>
</body>
</html>

小陈码上努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-基础使用1

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

扫一扫