1.设计模式：
MVVM 模式：在实例对象中所写的数据就是M层，html模板标签视图层就是v层。当数据变化的时候视图层会改变，相互的改变是由vm层来控制的，也就是由vue框架来实现的。
MVP（JQ)是面向dom操作。MVVM 是对数据进行操作
2.基础知识
1）什么是实例：
2）实例中可以包括：
（注：从控制台中看到实例(vm)中其他的内容(实例方法)：vm.$data vm.$el）
3）实例的生命周期函数（8个）
生命周期函数就是vue实例在某一个时间点会自动执行的函数
4）vue的模板语法
差值表达式：{{}} v-text: 前两个的作用是一样的 v-html：（三者的区别）
eg: {{name + 'Lee'}} v-text = "name +'Lee'" (可以写js的表达式或者变量)
v-bind: "title"
当我们看到一个vue指令后边跟着一个值的时候，这个值不再是一个字符串，而是一个js的表达式
3.计算属性，方法与侦听器
计算属性：缓存机制 当它依赖的数据不变的时候，页面在渲染的时候，就不会重新再次计算（复用上次的结果）
方法：每一次渲染页面，不管值是否改变，方法都会执行，重新计算。
watch(监听)也有缓存，但是比计算属性复杂
计算属性有缓存 ,但方法没有，故当三个方法都能实现时，优先选择计算属性（性能优化）
eg:实现由姓和名组合显示全名（三种方法）
2）计算属性的getter和setter
get:获取值 set：设置值
一下是通过改变传入的设置值，使获取值发生改变
4. vue中的样式绑定
class的对象绑定
数组改变样式
style改变样式
对象绑定和数组绑定
5.vue中的条件渲染
v-if v-show ：是否显示
区别：v-if ：只要对应的变量值是false，它就不存在了（dom的删除和添加）
v-show：（性能会高）对应的变量值是false，它依然存在，只是display：none
v-if 和 v-else放在一起使用
v-if v-else-if v-else（多个条件的使用）
key值的作用：如果给一个标签加一个key值，vue会知道它是页面上唯一的一个元素，
如果key值不同，那么vue就不会尝试去复用之前的 (提高性能，尽量key值是唯一的)
6. vue中的列表渲染
改变数组中的内容:不能直接的通过下标的形式改变数组，只能通过几个数组的变异方法来改变
7个方法：pop (删除) push shift unshift splice(截取) sort reserve
数组变化，页面也会跟着变化。
方法二：改变数组的引用地址
关于template：模板占位符，可以帮我们包裹一些元素，但是在循环的过程中不会被渲染
循环对象：
改变对象里边的值的方法：1）改变引用
2）用set方法
vue 中的set的方法
1)改变对象里边的数据(全局)
Vue.set(vm.userInfo,"address","beijing")
vm.$set(vm.userInfo,"address","beijing")（实例的方法）
2)改变数组的数据
Vue.set(vm.userInfo,1,5)
vm.$set(vm.userInfo,1,5)
7.前端组件化 ：
1) 什么是前端组件化： 简单说就是页面的逻辑拆分成小的区域实现
2）使用组件化的优点： 提高代码的可维护性
3） 父子组件的传值
父组件把内容传递给子组件：v-bind 简写：
子组件给父组件传值（$emit)
4）使用is属性解决模板标签上的bug
在标签中使用组件，又不能直接使用，故可以通过is属性，使其满足html格式规范
5）在子组件中data必须是个函数，而不能是对象（根组件是对象）,并且返回对象
子组件会被多次调用，这样会是的每一个子组件都拥有独立的数据存储
6）在vue中如何操作DOM
通话ref获取dom节点，在元素标签上加一个ref
如果在组件上加了ref，会怎么样（获取到的是组件的引用）
简单计数器
网友评论