认识Vue,什么是Vue及Vue.js基本指令

纵饮孤独 提交于 2020-02-09 15:22:41

什么是Vue

是目前最火的前端框架,React是最流行的一个前端框架 (React除了开发网站,还可以开发手机App,Vue语法也可以用户进行手机App开发的,需要借助于Weex)
vue.js是前端主流框架之一,和Angular.js、React.js一起,并称为前端主流三大框架!
vue.js,不仅容易上手,还便于与第三方你库或既有项目整合。
前端主要工作,主要负责mvc中的v这一层;主要工作是和界面打交道;

为什么要学习流行框架

  1. 企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱;
  2. 提高开发效率的历程:原生js --jquery之类的类库—前端模板引擎—Angular.js/Vue.js
  3. 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多 的时间去关注业务逻辑;

框架和库的区别

  • 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要换框架,则需要重新架构整个项目。
  • 库(插件):提供某一个小功能,对项目的侵入性较小,如果开某个库无法完成某些需求可以很容易切换到其它库实现需求

MVC和MVVM的区别

  • MVC是后端分层开发的概念
  • MVVM是前端视图层的概念,主要关注于视图层分离,也就是说:MVVM把前端视图层,分喂了三部分Model,VIew,VM ViewModel
    在这里插入图片描述

前端中的MVVM思想

  1. MVVM是前端视图层的概念

    1. MVVM是前端视图层的分层开发思想,主要把每个页面,分成了M,V,VM,其中VM是MVVM的核心思想,VM是M和V之间的调度者。
    2. M:保存的是每个页面中单独的数据(后端返回的数据)
    3. V:页面中的html代码
    4. VM:分割了M和V
    5. M和V互不可见,若要进行交互,必须通过VM
  2. 前端中使用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指令

  1. v-cloak
    用于解决网速过慢导致的插值表达式闪烁的问题

  2. v-text
    与插值表达式的作用一样,用于渲染数据

    • 默认v-text是没有闪烁问题的
    • 标签中,插值表达式{{ data }}的前后可以放任意内容,而使用v-text指令后,标签里其它内容都不会被解析
  3. v-html
    用于渲染含有html代码的数据

  4. v-bind
    将数据与属性的值绑定
    缩写:title=‘msg’

  5. v-on
    用来绑定事件的
    缩写@click:‘show’

  6. v-model
    用来实现数据的双向绑定,只能运用在表单元素中,与表单中的value值双向绑定。而v-bind只能实现M->V的单向绑定。

  7. v-for
    该指令可以用来遍历数组、对象、或者数字迭代

    • v-for使用注意事项
    • 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字 类型的 :key值
  8. v-if 和v-show的区别

    • 使用v-if时,每次都将删除或创建元素,而使用v-show,只是将元素设置为display:none/block。
    • v-if有较高的性能消耗,而v-show有较高的初始渲染消耗。
    • 如果元素涉及到频繁的切换,最好不好使用v-if,推荐使用v-show
    • 如果元素可能永远或者很少会显示出来被用户看到,则推荐使用v-if

事件修饰符

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件监听器时使用事件捕获模式
  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调
  • .once 事件只触发一次
    .self只会阻止自己身上冒泡行为的触发,并不会真正阻止冒泡行为

Vue.js与JavaScript和jQuery的不同之处

  • 在我们使用JavaScript或jQuery时,做的最多的事情就是操作DOM、绑定事件等这些。比如在制定DOM中插入一个元素,并给它绑定一个点击事件:

    if(showBtn){
    	var btn = $('<button>Click me</button>');
    	btn.on('click',function(){
    		console.log('Clicked!');
    	});
    	$('#app').append(btn);
    }
    

    这样的操作让我们的视图代码和业务逻辑紧耦合正在一起,随着功能不断增加,直接操作DOM会使得代码越来越难以维护。

    而Vue.js通过MVVM的模式拆分为视图与数据两部分,并将其分离。因此,我们只需要关心数据部分即可,DOM的事情Vue会帮我们自动搞定,例如上面的示例可以使用Vue.js改写为:

    <body>
    	<div id="myApp">
        	<button v-if="showBtn" v-on:click="handleClick">Click me</button>
    	</div>
    	<script>
        	new Vue({
            	el: '#myApp',
            	data: {
                	showBtn: true
            	},
            	methods: {
                	handleClick: function(){
                    	console.log('Clicked!');
                	}
            	}
        	});
    </script>
    </body>
    

总结:

Vue.js是一个构建 数据驱动 的web界面的渐进式框架,它的目标是通过尽可能简单的API来实现响应的 数据绑定 和组合的 视图组件核心是一个响应的 数据绑定系统
Vue.js的4个特性:

  • 轻量级的框架
  • 双向数据绑定
  • 指令
  • 组件化

关于渐进式的理解:
不管是单页面还是多页面。首先都是通过声明式渲染声明每个字段,这是基本要求。 我们通常会把公共的头部和尾部抽出来,做成组件。 这时候就需要使用组件系统。

单页面应用程序往往是需要路由,这个时候需要把vue的 vue-router 拉进来做路由,如果我们做的项目足够复杂,大量的使用组件而难以去管理组件的状态,这个时候我们使用 vue-resource(vue-resource是集中来管理我们的状态的)。项目完成后需要构建工具来build我们的系统,提高我们的效果,最后形成完整的项目。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!