Vue总结(一)

vue总结

构建用户界面的渐进式框架

渐进式：用到什么功能即可使用转么的框架子模块。

两个核心点

向应的数据绑定

当时图发生改变->自动跟新视图，利用Object.defindProperty中的setter/getter代理数据，监控对数据的操作。(IE8不兼容)

组合的视图组件

ui页面映射位组件树
划分组件可维护，可重用，可测试

虚拟DOM

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构。
当数据发生变化时，能够只能低级选出重新渲染组建的最小代价并应用到DOM操作上。

MVVM模式

M: Model 数据模型
V: view 视图模板
vm: view-Model 视图模板
V:

<div id="demo">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>

vm:

let data = {
    message: "hello world!"
}

M:

var vm = new Vue({
    el: "#demo",
    data: data
})

Vue实例

每一个应用都是通过Vue这个构造函数创建根实例(root instance)启动newVue
需要传入选项对象，对象包含挂载元素，数据，模板，方法等。
el:挂载元素选择器
data:代理数据
methods:定义方法

vue代理data数据

每个Vue实例都会代理data对象里的所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会跟新视图。

实例自身属性和方法

暴露自身的属性和方法，以$开头为例：$el,$data

var vm = new Vue({
    el: "#demo",
    data: obj,
    methods: {
        clickHandle() {
            alert(0);
        }
    }
});
//vm是一个对象，其中里面的为内置成员和属性，以$开头

声明式渲染

声明式：

只需声明在哪里做什么，而无需关心如何让实现,调用一些方法，类库实现。

命令式

需要以剧吐代码表达在哪里做什么，如何让实现。需求让自己实现的过程细节。

vue申明式渲染

初始化根实例，vue自动将数据绑定在DOM模板上

<div id="demo">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>


let data = {
    message: "hello world!"
}

var vm = new Vue({
    el: "#demo",
    data: data,
    methods: {
        //...
    }
})

指令

是一种特殊的自定义行间属性，他的职责是当其表达式的值改变时相应地将某些行为应用到DOM上，Vue中，指令以v-开头。

v-bind 动态的绑定数据，可简写为":"
v-on 绑定事件监听，简写为"@"
v-text 更新数据，会覆盖已有结构
v-html 可以解析数据中的html
v-show 根据值的真假，切换元素的display属性
v-if 根据值得真假会被销毁，重建
v-else-if 多条件判断，为真渲染
v-else 条件都不符合渲染
v-for 基于源数据多次渲染元素或模板
v-model 在表单控件元素上创建双向数据的绑定
v-pre 跳过元素和子元素的编译过程
v-once 只渲染一次，随后数据更新不重新渲染
v-cloak 隐藏未编译的Mustache语法，css中设置[v-cloak]{display:none }

html模板

模板：基于DOM的模板，模板都是可解析的有效的HTML

插值：

文本：使用Mustache语法(双打括弧){{value}}
作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html:双打括弧输出的是文本，不会解析html

<div id="demo">
    <div v-html="html"></div>
</div>

let obj = {
    html:"<div>hello vue</div>"
}
var vm = new Vue({
    el:"#demo",
    data: obj
});

属性：使用v-bind进行绑定，可以响应变化

<div id="demo">
    <div v-html="html" :costom="abc"></div>
</div>

let obj = {
    html:"<div>hello vue</div>",
    abc: 1
}
var vm = new Vue({
    el:"#demo",
    data: obj
});

使用JavaScript表达式：写简单的表达式

<div>{{true?"yes":"no"}}</div>

字符串模板

template选项对象属性
模板将会替换挂载元素的内容都将被忽略

<div id="demo">
    <div v-html="html" :costom="abc"></div>
</div>

let obj = {
    html:"<div>hello vue</div>",
    abc: 1
}
var str = "<div>assassin{{abc}}</div>"//根节点只有一个,不能同级出现，嵌套是可以的
var vm = new Vue({
    el:"#demo",
    data: obj,
    template: str
});
//上述视图将会被新模板替换掉

根节点只有一个，支持es6的超级模板
将HTML结构卸载一对script 标签中，设置type=“x-templete”。

//html
<script id="temp" type="x-templete">
    <div>
        {{abc}}
        <span>assassin</span>
    </div>
</script>

//js
let obj = {
    html:"<div>hello vue</div>",
    abc: 1
}
var vm = new Vue({
    el:"#demo",
    data: obj,
    template: "#temp"//对应的挂载点
});
//有局限性，跨文件等有问题

模板-rander函数

自己创建模板
绑定自己的样式：

.rad{color: red;}

<div id="demo">
    <span v-bind:class="{red:addClass}"></span>
</div>

let obj = {
    addClass: false
};
var vm = new Vue({
    el: "#demo",
    data: obj
});
//会根据obj数据修改span中的class

render 选项对象属性
createElement(标签名，[数据对象]，子元素)；

.fl{float:left;}
.bgR{background: red;}

<div id="demo"></div>

let obj = {
    html: "<div>hello vue.js</div>",
    abc: 2
};
var vm = new Vue({
    el: "demo",
    data: obj,
    render(createElement) {
        return createElement(
        "ul",{
            class: {
                bgr: true,
                fl: true
            },
            style: {
                font-size: "50"
            },
            attrs: {
                abc: "assassin"
            },
            domProps: {//自身的一些属性
                innnerHTML: "<li>html</li>"//会覆盖后面的标签
            }
        },[
                createElement("li",1);
                createElement("li",2);
                createElement("li",3);
                createElement("li",4);
            ]
        )
    }
});

列表渲染

v-for根据一组数组的选项列表进行渲染
语法：

value,key in items
value,key of items

变异方法：
vue提供一组方法，对数组进行操作的时候，会触发试图跟新,并不是原生的js方法。

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

事件处理器

v-on指令，用来监听DOM事件出发代码
语法：

v-on:eventName="eventHandle" 或者 @
事件处理函数写在methods中统一管理
时间对象：
    在处理时间函数中获取
    内联事件按处理函数执行，传入时间对象 $event

事件修饰符：
    事件处理函数只有纯粹的逻辑判断，不处理DOM世间安得细节，如：阻止冒泡，取消默认行为，判断按键
    
修饰符的位置：
    v-on:eventName.修饰符
修饰符：
    .stop  .prevent  .capture  .self  .once

案件修饰符：
    .enter  .tab  .delete  .esc  .space  .up  .down  .left  .right  .ctrl  .alt  .shit  .meta  .键值

条件渲染

v-show指令
根据表达式的值，用来显示/隐藏元素
语法：v-show="表达式"
元素会被渲染在页面中，指针局的表达式的值进行css切换

动态class

动态绑定class
class也为元素的属性，可以使用v-bind:class
语法：

:class="{className:表达式}"
//表达式为true表示添加此className
//..
:class="[className1,className2]"

自定义指令

除了vue内置的指令，可以自己设置指令
选项对象的directives属性
{
directives:{}
}
钩子函数：
update被绑定元素所在的模板更新时调用
钩子函数中的参数：
el:指令所绑定的元素，可以用来直接操作DOM
binging:一个对象
binding对象下的value:指令的绑定值

directives: {
    "focus": {//自定义指令
        update(el,binding) {
            if(binding.value) {
                el.foucs();
            }
        }
    }
}

<input v-foucs="edtorTodos === item" />

计算属性

模板是为了描述视图属性的结构，模板中放入太多逻辑，导致模板过重且难以维护。
在计算一个计算属性时，Vue.js更新它的依赖列表并缓存结果，中有当其中一个依赖发生了变化，缓存的结果才无效。
语法：
在选项对象中
{
...
computed: {}
}

深度监控watch

浅监控：

watch: {
    list: function() {
        //监控list这个属性，当这个属性发生变化就会执行函数，list对象下的属性不能监控。
    }
}

深监控：

watch: {
    list: {
        handler: function() {
            store.save("xxxx",this.list);
        },
        deep: true
    }
}