VUE初识和基础语法

VUE初识

重点

开发思想

1、传统操作DOM模式

2、MVC(model view controller)

MVC是单向数据绑定，数据更改可以渲染视图，但视图更新没有更改数据

3、MVVM（model view viewModel）

MVVM是双向数据绑定的：VUE本身实现了数据和视图的相互监听影响

VUE的MVVM思想

M = model 数据层   V = VIEW VM = viewModel 数据和视图的监听层

当数据或者视图发生改变，VM层会监听到，同时把另外一层也跟着改变或者重新渲染

例如 数据层改变 VM会帮我们重新渲染视图 视图层改变 VM会帮我们把数据重新更改

 VUE基础语法

 

VUE使用

每个Vue应用都要通过实例化Vue来实现 语法格式如下 var vm =new Vue({ //选项 })

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det', //el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：<div id = "vue_det"></div>  这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
        data: {  //data用于定义属性，实例中有三个属性分别为：site、url、alexa。
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {  //methods 用于定义的函数，可以通过 return 来返回函数值
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

el不能是html和body，data属性和methods属性会直接挂载到实例上，两者属性名不能重复，data中都是VUE变量，methods都是实例中用到的方法。

methods中的this都是指向的VUE实例，data中的this不是当前实例

 {{ }}用来返回对象属性和函数返回值，只能写表达式（变量，赋值表达式，函数执行，三元等），不能写语句（var for循环 if判断 switch）,{{}}最终展现出来的是表达式的结果，如果绑定的值是对象类型的话，会基于JSON.stringify编译成字符串再呈现出来，而不是直接tosSring

<div id="vue_det">
    <h1>site : {{site}}</h1> //返回菜鸟教程
    <h1>url : {{url}}</h1> //返回www.runoob.com
    <h1>{{details()}}</h1> //返回 methods中的return
</div>

 

视图自动渲染

原理

VUE数据更新，视图自动更新的前提是，这个数据被VUE劫持了（对应数据有get和set），并不是所有数据更新最后都会通知视图重新渲染

var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({
    el: '#vue_det',
    data: data
})

 情况1

初始数据是一个对象，对象中没有XXX键值对，后期新增的键值对是不会让视图重新渲染的（但是数据会更新）

解决

1、增加一个无关变量，每次修改数据的时候，把这个无关变量也更新  

例如 初始：t:0 更新数据同时设置  :t=Math.random()

原理 虽然没有自动渲染视图，但是数据已经改变，手动触发视图渲染

2、最好在初始化数据的时候，就把视图需要的数据提前声明好

例如  abc:undefined (可以设置为空值，但是要有这个属性)

原理 只有在data中初始化过的属性才有GET/SET

3、 不要修改某个属性名，而是把对象的值整体替换（指向新的堆内存）

原理 整个对象的替换，每一个后代属性都会被劫持

例如 可以使用Object.assign() 新对象放前面

也可以使用 ...obj 把原对象在新对象展开

4、可以基于VM.$set内置方法修改数据 VM.$set(对象，属性名，属性值)

5、$forceUpdate 强制通知视图重新渲染，但是不会设置get和set

情况2

如果数据是一个数组，我们修改数据基于ARR[N]=XXX或者ARR.length 等操作方式 是无法让视图重新渲染的

解决、

VM.$set   

push 、pop 、shift 、unshift、splice、sort 、reverse 对于数组来说 能触发视图更新的 只有这几个数组的变异方法（顾名思义，会改变被这些方法调用的原始数组）// 也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组

 重新把ARR的值重写（指向新的堆内存）

 

 

 

个人