Vue.js介绍及基本指令

最新推荐文章于 2024-09-21 11:29:05 发布

浪漫前端

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/weixin_39976512/article/details/83628207

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是vue

Vue.js是目前最火的一个前端框架，而React.js是最流行的一个前端框架(React除了可以开发网站，还可以开发手机App，vue语法也是可以开发手机app，需要借助于Weex)
Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架
vue.js是一套构建用户界面的框架，只关注视图层，它不仅容易上手，还便于与第三方库或既有项目整合。
在vue中，能够帮助我们减少不必要的DOM操作，提高渲染效率，双向数据绑定(通过框架提供的指令，我们前端只需要关心数据的业务逻辑，不用再关心DOM是如何渲染的)

框架和库的区别

框架：是一套完整的解决方案，对项目的侵入性较大，如果项目需要更换框架，则需要重新架构整个项目。
库(插件)：提供某个小功能。对项目的侵入性较小。

前端中的MVVM思想

MVVM是前端视图层的概念
1. MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V，VM，其中VM是MVVM的核心思想，VM是M和V之间的调度者。
2. M：保存的是每个页面中单独的数据(后端返回的数据)
3. V：页面中的html代码
4. VM：分割了M和V
5. M和V互不可见，若要进行交互，必须通过VM
前端中使用MVVM，主要是为了我们更方便开发，因为MVVM提供了数据的双向绑定(由VM提供)

Vue中实现MVVM的基本代码

<body>
    <!-- 将来new的Vue实例会控制这个元素中的所有内容 -->
    <!-- Vue 实例所控制的这个元素区域,就是我们的 view层 -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>

<script src="vue-2.4.0.js"></script>
<script>
    /* 当我们导入包之后,在浏览器的内存中，就多了一个Vue构造函数 */
    /* 创建一个vue的实例 也就是VM */
    var vm = new Vue({
    // el:表示当前new 的这个Vue实例,要控制页面上的哪个区域
        el: '#app',
        data: {// data 属性中存放的是el中要用到的数据,也就是Model
        	// 通过Vue提供的指令，很方便的就能把数据渲染到页面上
            msg: '欢迎学习Vue' 
            // 前端的Vue之类的框架,不提倡我们去手动操作DOM元素了
        }
    });
</script>

Vue指令

v-cloak
用于解决网速过慢导致的插值表达式闪烁的问题
v-text
与插值表达式的作用一样，用于渲染数据
1. 默认v-text是没有闪烁问题的
2. 标签中，插值表达式{{ data }}的前后可以放任意内容，而使用v-text指令后，标签里其它内容都不会被解析
v-html
用于渲染含有html代码的数据
v-bind
将数据与属性的值绑定
缩写：title=‘msg’
v-on
用来绑定事件的
缩写@click:‘show’
v-model
用来实现数据的双向绑定，只能运用在表单元素中，与表单中的value值双向绑定。而v-bind只能实现M->V的单向绑定。
v-for
该指令可以用来遍历数组、对象、或者数字迭代
- v-for使用注意事项
  1. 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题,必须在使用v-for的同时，指定唯一的字符串/数字类型的 :key值
v-if 和v-show的区别
- 使用v-if时，每次都将删除或创建元素，而使用v-show，只是将元素设置为display：none/block。
- v-if有较高的性能消耗，而v-show有较高的初始渲染消耗。
- 如果元素涉及到频繁的切换，最好不好使用v-if，推荐使用v-show
- 如果元素可能永远或者很少会显示出来被用户看到，则推荐使用v-if