Vue基础知识

最新推荐文章于 2024-09-10 14:54:25 发布

看她吃切糕

最新推荐文章于 2024-09-10 14:54:25 发布

阅读量258

点赞数

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

本文链接：https://blog.csdn.net/qq_39000746/article/details/114436681

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue 基础总结

开发工程发展史

1.前后端不分离

2.前后端工程分离

3.前后端工程数据分离

什么是Vue

Vue是一套用于构建用户界面的渐进式框架，Vue只关注视图层，Vue通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

为什么要使用Vue

随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样的HTML和CSS文件，但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因，目前比较流行的前端框架有Angular、Reac、Vue等。
Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现，那么Vue的核心库及其生态系统也可以满足你的各式需求。
和其他框架一样，Vue允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。

Vue基础语法

1.Vue实例对象

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的
var v = new Vue({//选项})

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    var app = new Vue({
        el:'#div',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:'你好' 
        }
    })
    
    // 打印Vue实例对象
    console.log(app);
</script>

2.模板语法-插值

在前面代码中，使用{{}}的形式在html中获取实例对象中data的属性值，这种使用{{}}获取值的方式，叫做插值或者插值表达式。

3.模板语法-指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM；参考手册、 API

<body>
     <div id="div">
         <p v-if="hello">你好</p>
     </div>
</body>
<script>
     var app = new Vue({
        el:'#div'
        data:{
           hello:false
        }
     })
</script>

这里，v-if 指令将根据表达式 hello 的值的真假来插入/移除 <p> 元素。

3.0 v-if和v-show

相同点：v-if和v-show都可以动态控制dom元素显示和隐藏
不同点：1.v-if是将dom元素整个添加或删除，v-show是添加dom元素属性display控制dom元素的显示或隐藏，dom元素还在。
2.v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的时间监听和子组件，v-show只是简单的基于css切换。
3.v-if是惰性的，如果初始条件为假则什么也不做，只有在条件为真的时候才开始局部编译，v-show是在任何条件下都会被编译，然后被缓存而且dom元素保留。
4.v-if有更高的切换消耗，v-show有更高的初始渲染消耗。
5.v-if适用于运营条件不大可能改变，v-show适用于频繁切换。

3.1 v-text / v-html 文本

v-text：
v-text和差值表达式的区别
- v-text 标签的指令更新整个标签中的内容(替换整个标签包括标签自身)
- 差值表达式，可以更新标签中局部的内容
v-html：
- 可以渲染内容中的HTML标签
- 尽量避免使用，否则会带来危险(XSS攻击跨站脚本攻击)

3.2 v-bind 属性绑定

可以绑定标签上的任何属性。

绑定图片为例

<img id=“app” v-bind:src="src" />
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            src: '1.jpg'
        }
    });
</script>

3.3 v-model 双向数据绑定

单向数据绑定

我们通过 vue 对象修改数据可以直接影响到 DOM 元素，但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据；我们把这种现象称为***单向数据绑定*** ；

双向数据绑定

通过 v-model 指令展示表单数据，此时就完成了 双向数据绑定 ；

不管 DOM 元素还是 vue 对象，数据的改变都会影响到另一个；

3.4 v-on 绑定事件监听

3.5 v-if / v-else / v-else-if 条件判断

3.6 v-for循环

3.7 v-cloak

3.8 v-once

MVVM设计思想

MVC设计思想：

M: model 数据模型层提供数据
V: Views 视图层渲染数据
C: controller 控制层调用数据渲染视图

MVVM设计思想：

M: model 数据模型层提供数据
V: Views 视图层渲染数据
VM：ViewsModel 视图模型层调用数据渲染视图
由数据来驱动视图（不需要过多考虑dom操作，把重心放在VM）

看她吃切糕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue基础知识

Vue 基础总结开发工程发展史1.前后端不分离2.前后端工程分离3.前后端工程数据分离什么是VueVue是一套用于构建用户界面的渐进式框架，Vue只关注视图层，Vue通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。为什么要使用Vue随着前端技术的不断发展，前端开发能够处理的业务越来越多，网页也变得越来越强大和动态化，这些进步都离不开JavaScript。在目前的开发中，已经把很多服务端的代码放到了浏览器中来执行，这就产生了成千上万行的JavaScript代码，他们连接着各式各样
复制链接

扫一扫