Vue分成四个阶段 第一段~
begin enjoy👇

Vue第一段

MVVM框架和Vue的认识

  • MVVM全名称是Model-View-ViewModel,是基于以前的MVC提出的一种新型的页面结构数据处理框架,基于MVVM框架思想衍生出了现今的AngularVueReact三个主流使用的前端框架,MVVM是目前实现RESTful面向资源开发的最优思想设计,实现了前后端完全分离式的开发方式,提高了项目后期的可扩展和维护性。
  • Vue是基于MVVM框架思想衍生出来的一款框架,作者是尤玉溪Vue的整个结构就是将页面处理过程在内存中使用虚拟DOM完成,并最终将结果DOM渲染到页面中去使用

Vue框架的底层原理

  • Vue底层主要是将MVVM作为数据绑定的入口,整合ObserverCompileWatcher三者。通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observerCompile之间的通信桥梁,达到数据变化到视图更新这样一系列的操作。

第一个Vue基本使用代码

  • 目前市场上用的Vue版本主要是2.+的版本,引入vue.js后,就可以开始一段愉快的Vue之旅了

    //ViewModel
    var vm = new Vue({
        el:'#app',
        //View部分,在Vue的template中,只能有一个根标签
        template:`<ul>
    		<li>北京</li>
    		<li>上海</li>
    		<li>深圳</li>
    		<li>广州</li>
    		<li>{{city1}}</li>
    		<li>{{city2}}</li>
    	</ul>`,
        //Model
        data(){
            return {
                city1:'郑州',
                city2:'天津',
            };
        },
    });
    console.log(vm.city1,vm.city2);
    
  • 通过上边代码可以看出,Vue的视图template结构可以直接使用Model里的任何数据,使用方式和art-template的八字胡语法是一样的

  • 在实例化Vue对象时,实际就是获得了VueViewModel部分,那么页面中使用的就可以通过ViewModel对象直接使用Vue框架结构中的Model部分的数据

  • Vuetemplate视图结构中,新加入了很多Vue指令来方便视图使用Model中的数据,指令是以属性的方式在template中使用的,意思就是直接给标签里添加指令属性就ok了,语法就是v-指令名,例如:<div v-show="true">Hello Vue</div>

Vue双向数据绑定的使用

  • Vue框架中最强大的地方呢,除了将页面数据独立出来使用和处理外,还有很多其他强大的特点,双向数据绑定就是其中之一,通过对表单元素添加v-model来直接获取表单元素的value,然后直接修改Model里的数据,就可以达到一个目的,那就是使用Model数据的其他地方立即修改数据的显示

Vue常用指令

主要是针对View视图的template使用Model里实体模型对象数据的一种快捷方便的操作命令

  • v-text:输出普通的字符串文本内容,即便是带有html标签信息的字符串也是普通显示
  • v-html:输出内容信息,如果有html标签内容了,则会按html标签格式输出
  • v-ifv-else:根据一个bool类型值判断执行不同的template内容
  • v-show:根据一个bool类型值判断是否显示某个template内容
  • v-on:视图中触发事件执行的指令,后边直接接事件名称即可使用,也可以简写为例如:click,也可以直接用@click的写法
  • v-bind:绑定外部class的指令,也可以简写为:class,可以绑定的值格式有三种
    • 直接绑定外部class的名称,也可以通过Model来绑定
    • 利用一些简单的表达式绑定外部class的处理,比如经典的三元表达式或者是短路语法思想等等
    • 利用json来绑定class样式,需要使用的样式可以通过bool类型来处理键值对关系
    • 利用json和某个想表达的动态值来绑定不同的样式,一般要配合v-for指令搭配使用才ok
    • 还可以做自定义属性的绑定配置,在父子组件值传递中经常使用
  • v-for:循环数组或json都可以,参数里第一个是value,第二个是index,如果循环的是json了,那么第二个是key,第三个是index,但是不要忘记配上一个:key来提高循环效率
  • v-once:只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

Vuemethods模块

  • Vue里执行方法的主要模块,常用来处理事件要执行的方法主体的配置

Vue的渲染

  • Vue使用时,可以将组件的主体部分代码单独封装出去,利用Vuerender方法来渲染对主体部分进行直接渲染,这个方法的作用就是创建虚拟DOM的,这样做了,只需要提供往哪里渲染的elok
  • 这样做的另一个好处就是可以使用Vue另一个强大父子组件嵌套关系来对页面进行分割处理

Vue父子组件的使用

  • 基于上边一步的渲染操作,就可以在某个入口组件处,通过components模块来引入子组件模块使用了,components里则是配置要使用的子组件的名称和具体子组件的js对象代码
  • 子组件的使用是非常灵活的,可以同时给多个父组件使用都没有问题,因此可以利用子组件的这种特性将页面中常用的公共部分单独封装出去,哪里要用就给哪里用即可
  • 父组件可以直接将自己的Model数据的值传递给子组件的属性,也就是说子组件中可以利用v-bind自定义各种各样的属性来接收父组件中的传值操作,而在子组件中,接收父组件传递过来的值则是通过props模块来接收即可
  • 可以利用Vue.component()方法将某个组件做为全局组件使用,这样就可以灵活被父组件随意使用了

Vue的常用事件修饰符

  • .stop:阻止点击事件冒泡。等同于JavaScript中的event.stopPropagation()
  • .prevent:防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播),等同于JavaScript中的event.preventDefault()prevent等同于JavaScripte.preventDefault(),用于取消默认事件。
  • .capture:与阻止事件冒泡的方向相反,强制事件冒泡传递,事件捕获由外到内,捕获事件:嵌套两三层父子关系,然后所有都有点击事件,点击子节点,就会触发从外至内 父节点到子节点的点击事件
  • .self:只会触发自己范围内的事件,不包含子元素
  • .once:只执行一次,如果我们在@click事件上添加.once修饰符,只要点击按钮只会执行一次事件。
  • .native:在组件里包含了其他事件操作时,在执行组件内自己的事件前,会先执行.native的原生事件,然后再执行组件内的事件

posted @ Zycin (非转载 来自个人学习资料整理)