vue.js的基础使用

最新推荐文章于 2024-08-14 18:44:30 发布

前端新增菜鸟

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量467

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Meet_XH/article/details/140477322

版权

1、vue.js初始

a. 含义：构建用户界面的渐进式框架，采用自底向上逐层应用。

b. 核心理念：数据驱动视图，组件化开发。

2、框架和库的区别

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

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

3、MVC和MVVM的区别

a. MVC是后端分层开的概念，MVVM是前段视图层的概念。

b. 在MVC中，V代表view视图层，作用发送数据、展示数据。C代表controller调度层，作用响应数据，返回数据。M代表model模型层，作用处理数据，与数据库打交道。

c. 在MVVM中，V代表view视图层，作用展示数据。VM代表view-model视图模型层，作用连接视图层和模型层，承上启下的作用。M代表medel模型层作用逻辑处理

4、vue.js的代码结构

<!-- 1、引入vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <!-- 2、书写视图层 -->
    <div id="app">
        <div>
            <!-- 插值表达式：将数据渲染到页面上，做简单运算 -->
            {{msg}}==={{age+2}}
        </div>
        <!-- 
            v-text v-html
            相同点：都会替换标签内原有的内容
            不同点：v-html会解析富文本，v-text不会
        -->
        <div v-text="html"></div>
        <div v-html="html"></div>
    </div>
</body>
<script>
    // 3、创建vue实例
    let vm = new Vue({
        //控制区域
        el: "#app",
        //存放数据
        data: {
            msg: "今天学vue",
            age:18,
            html:'<a href="http://www.baidu.com">百度一下</a>'
        },
        //存放方法
        methods: { }
    })
</script>

5、元素绑定和事件

a. 属性绑定：v-bind 简写成 ':'

<body>
    <div id="app">
        <!-- 元素的属性绑定 v-bind -->
        <img v-bind:src="src" alt="">
        <!-- 简写 -->
        <img :src="src" alt="">
    </div>
</body>

b. 事件绑定：v-on 简写 '@'

<body>
    <div id="app">
        <!-- 事件的绑定 v-on -->
        <button v-on:click="Img">按钮</button>
        <!-- 简写 -->
         <button @click="log">点击</button>
    </div>
</body>

6、事件修饰符

a. .stop 阻止冒泡：阻止时间继续向外传播

<div @click.stop=""></div>

b. .capture 添加事件捕获

 <div @click.capture=""></div>

c. .self 事件在该元素本身触发时触发回调

<div @click.self=""></div>

d. .once 事件只会触发一次

<div @click.once=""></div>

e. .prevent 阻止默认事件

<div @click.prevent=""></div>

7、数据双向绑定

a. 双向绑定 v-model 绑定的是表单控件

<!-- 双向绑定 v-model 绑定的是表单控件 -->
<input type="text" v-model:value="">
<!-- 简写 -->
<input type="text" v-model="">

b. 原理：数据劫持结合发布者-订阅者模式的方式来实现的，通过object.defineProperty()来劫持各个属性的setter，getter，在数据发生变动时，告诉订阅者是否需要更新，执行对应的更新函数从而更新视图

前端新增菜鸟

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue.js的基础使用

【代码】vue.js的基础使用。
复制链接

扫一扫