vue零碎记忆

Vue 零碎总结

1：什么事Vue?

Vue是一个渐进式的框架（可以一步一步的，有阶段性的使用vue,js，不必在开始就使用所有的设备）

2：Vue的特点？

* 解耦数据与视图
* 组件复用
* 前端路由
* 状态管理
* 虚拟DOM     

3：比较传统？

万金油操作： jQuery + RequireJS(SeaJS) + artTemplate(doT) + Gulp(Grunt)
现在： 出现了React、 Angular 目的是为了满足使用心得开发需求，像单页面富应用， 提升开发效率，降低维护成本，组件解耦。 

4： Vue的实例数据？

    存储在实例方然data选项中，所有应用到的数据都会预先在data内生命，用来保证不至于将数据散落在业务逻辑中。

5：Vue的生命周期?

created: 在实例创建完成后调用，此阶段主要是完成数据的观测，但是还没有挂载，$el还不能使用，需要初始化处理一些数据时会比较有用。
mounted： el已经挂载到实例上使用了，一般我们的第一个业务逻辑会在这里使用。
beforeDestory： 实例销毁之前调用， 主要解绑一些使用addEventListener监听的事件等。

<div id="app">

{{date}}

</div>
<script>

var app = new Vue({
    el:"#app",
    data: {
        data: new Date();
    },
    mounted： function () {
        var _this = this;
        _this.timer = setInterVal(() {
            _this.date = new Date();   
        }, 1000);
    },
    brforeDestory: () {
        if (this.timer) {
            clearInterVal(this.timer); // 当Vue实例销毁前，清除我们的定时器。
        }
    } 
});

</script>
注意： link的内容会被渲染成一个具体的点击功能的a标签，而不是一个纯文本， 如果将用户产生的内容使用v-html直接输出，有可能出现XSS攻击（跨站脚本攻击）

        在vue中只支持{{}}插值或者尾部添加一个管道符号| 不支持语句和流程控制，在表达式中，不能使用用户自定义的全局变量， 只能使用Vue白名单内的全局变               量，例如Math,Date

6：关键字
v-pre [如果想显示{{}}标签， 而不进行替换， 使用v-pre即可跳过这个元素和它的子元素的编译过程】

          实例：<span v-pre>{{ 这里的内容是不会被编译的 }}</span>
v-cloak[解决初始化慢导致页面闪动的最佳实践]
            [它不需要表达式， 它会在Vue实例结束编译的时候从绑定的HTML元素上面移除，经常与CSS的display:none联合使用。]
v-once [作用是定义它的元素或者组件值渲染一次， 包括元素或者组件的所有子集]
            [首次渲染后，不再随着数据的变化而重新渲染，将被视为静态内容，不随数据的变化重新渲染被视为静态数据]
v-if  v-else-if  v-else  [主要用于条件渲染]
v-show [主要用于条件渲染][简单的CSS属性切换]
            注意: v-show只是简单地CSS属性切换， 无论条件是否是真与否， 都会被编译， 相比之下， v-if更适合条件不经常改变的场景，因为它的切换开销相对
             较大， 而v-show适应于频繁切换条件。 
v-for [数据遍历【迭代数组、迭代对象、迭代一个整数等】]

<div id="app" v-cloak>

{{message}}

</div>
[v-cloak] {

display: none

}

7： 过滤器
用法： 支持在{{}}插值的尾部添加一个管道符 " | "
<div>

{{ date | formDate }}

</div>
<script>

var app = new Vue({
    el:"#app",
    data: {
        data: new Date();
    },
filters: {
        formDtate: function (value) {
            var date = new Date(value);
            var year = date.getFullUYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return year + '-' + month + '-' + day + '' + hours + ':' + minute + ':' + seconds;  
        }
}
});

</script>
过滤器还可以串联， 而且可以接收参数，例如：
{{message | filterA | filterB}}
过滤器还可以接受参数【这里的字符串arg1和arg2将分别传给过滤器的第二个和第三个参数，因为第一个参数是数据本身】
{{message | filterA('arg1', 'arg2')}}
8： 计算属性

每一个计算属性都包含一个getter和setter通常情况下，我们只会用默认的getter方法来读取一个计算属性。

<div id="app1"></div>
<div id="app2">

{{reversedText}}

</div>
<script>

var app1 = new Vue({
    el:"#app1",
    data: {
        text: 123.456
    }
});
var app2 = new Vue({
    el:"#app2",
    computed:  {
        reversedText () {
            return app1.text.aplit(',').reverse().join(',');
        }
    }
});

</script>
计算属性是给予它的依赖缓存的，一个计算属性所依赖的数据发生的时候他会重新取值。
9：数据绑定

9.1： class绑定【对象绑定,数组绑定】
    

<div :class="{ 'active': isActive }"><div>
<div :class="{ 'active': isActive, 'error': isError }"><div>

<div :class="[ activeCls, errorCls ]"></div>

<div :class="[{ 'active': isActive }, errorCls]"></div>
注意： 如果直接在定义的组件上使用class或者：class,样式规则会直接应用到这个组件的根元素上面
10： 数据监测？

数组监测：
        Vue监测数组的变化的时候，，并不是直接重新渲染整个列表，而是最大化的复用DOM元素，替换的数组中，含有相同元素的项是不会被重新渲染， 因此
        可以大胆的用新数组替换旧数组。

app.books = app.books.filter((item) => {

return item.name.match(/javascript/);

})
11: 事件与修饰符？

* .stop
* .prevent
* .capture
* .self
* .once

阻止事件冒泡

<form @submit.prevent="handle"></form> 提交事件不再重复加载

修饰符串联

添加事件监听器使用事件捕获模式

<div @click.self="handle">...</div> 只有事件在元素本身（而不是子元素）触发时出发回调

<div @click.once="helf">...</div> 只是触发一次，组件同样适用

事件修饰符【可以使用按键修饰符】

<input @keyup.13="submit"/>
@keyup.enter
@keyup.tab
...
@keyup. delete/esc/space/up/down/left/right

可以自己配置具体按键
Vue.config.keyCodes.f1 = f12
可以配合鼠标按键

@click.ctrl alt/shift/meta......
12: v-model双向数据绑定

v-mode绑定的数据，用中文输入法输入中文，一般在没有选定词前也就是在拼音阶段Vue是不会数据更新的，在敲下汉字的时候才会更新
             [如果是实时更新可以使用@input]
v-model可以使用一些修饰符：
              1： v-model.lazy  [.lazy会转换为在change事件中同步]
              2： v-model.number [.number会将输入转换为Number类型，否则虽然你输入的是数字，但它的数据类型是String]
              3： v-model.trim [.trim可以自动过滤输入的首位空格]

单选【v-model与value配合使用】
<div id="app">

<input type="radio" v-model="picked" value="html" id="html"/>
<label for="html">HTML</label>
<br/>
<input type="radio" v-model="picked" value="js" id="js"/>
    <label for="js">Javascript</label>
    <br/>
 <input type="radio" v-model="picked" value="css" id="css"/>
     <label for="css">CSS</label>
    <br/>
     <p>当前选择的项是： {{[picked}}</p>  

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
        picked: 'js'
    }
})

</script>

注意： 数据picked的值与value值是一样的时候才会被选中。

多选[v-mode与value配合使用]
<div id="app">

<input type="checkbox" v-model="checked" value="html" id="html"/>
<label for="html">HTML</label>
<br/>
<input type="checkbox " v-model="checked " value="js" id="js"/>
    <label for="js">Javascript</label>
    <br/>
 <input type="checkbox " v-model="checked " value="css" id="css"/>
     <label for="css">CSS</label>
    <br/>
     <p>当前选择的项是： {{[checked }}</p>  

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
       checked : ['html', 'css']
    }
})

</script>
下拉菜单 [v-model与value配合使用]
<div id="app">

<select v-model="selected">
    <option v-for="（option, index) in options" key="index" :value="option.text">{{option.text}}</option>
</select>
<p>选择的项是：{{ selected }}</p>

</div>
<script>

var app = new Vue({
    el: "#app",
    data: {
        selected: 'html',
        options: [
            {
                text: 'HTML',
                value: 'html'
            }, 
            {
                text: 'Javascript',
                value: 'js'
            },
            {
                text: 'CSS',
                value: 'css'
            }
        ]
    }
})

</script