Vue的初识

Vue的初步认识了解;

1.了解MVC模式和MVVM模式的各自应用:

        (1)MVC属于服务端的使用,

    

MVC

(2)MVVM属于前端的使用,

MVVM

2.Vue的基本代码结构:

    (1)引入Vue.js的包

    (2)写相关代码结构:


Vue代码结构

3.相关语句:

(1)插值表达式:{{写data中的属性 名}},只会替换自身占位符的数据,其他数据不会覆盖

(2)v-cloak:解决插值表达式中闪烁问题

(3)v-text、v-html:就是文本内容和标签内容,当需要把字符串里的标签以标签形式表达,就是用v-html;这两个都会覆盖原本的内容

(4)v-bind:缩写是 :,属性绑定的指令

(5)v-on:缩写是@,事件绑定的指令

(6)v-model:双向数据绑定使用,只符合表单元素(input(radio、text、address、email...)、select、checkbox)

(7)v-for:循环数组、对象、伪数组的

(8)v-if:每次都会重新创建和删除元素;有较高的切换性能消耗;如果涉及到频繁切换,不适合使用

(9)v-show:每次不会进行DOM元素的删除的创建,只会更改display:none的样式;有较高的初始渲染消耗;如果元素永远不会被显示出来被用户看到,就不适用。

4.事件修饰符:

(1).stop,阻止事件的冒泡效应

(2).prevent,阻止默认行为如<a>标签的跳转

(3).captrue,实现捕获机制

(4).self,实现只有当前点击自己才会触发事件的机制

(5).once,实现只触发一次事件的机制

5.Vue中的区域分布:

    el:指定要控制的区域,区域外的不被包含

    data:是个对象,指定要控制的数据存放处

    methods:是一个对象,可以自定义方法

6.this的必要使用:

     VM实例中,如果要访问data上的数据,或者要访问mathods中的方法,必须带this

7.v-for中的使用:    

    在v-for中学会使用,key属性(只接受string/number)

8.绑定样式的两中方法:

(1)v-bind:class:可以直接传递一个数组:class="['thin','red']";                                                                              可以在数组中使用三元表达式:class="['thin','italic',flag ? 'active' : ' ']";                                                                   可以用对象代替三元表达式提高代码可读性:class="['thin','italic',{'active':flag}]";    

(2)v-bind:style:  通过一个数组 ,引用多个data上的样式对象  :style="[styleObj1,styleObj2]" ;   对象就是无需键值对的集合:style="styleObj1"

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。