Vue的初步认识了解;
1.了解MVC模式和MVVM模式的各自应用:
(1)MVC属于服务端的使用,
(2)MVVM属于前端的使用,
2.Vue的基本代码结构:
(1)引入Vue.js的包
(2)写相关代码结构:
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"