学习Vue 入门到实战——学习笔记

闲聊：

自从进了现在的公司，小颖就再没怎么接触vue了，最近不太忙，所以想再学习下vue，就看了看vue相关视频，顺便做个笔记嘻嘻。

学习内容：

什么是vue？

官网回答：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

视频笔记：

vue是目前最火的前端框架、react是目前最流行的前端框架（react除了开发网站，还可以开发手机app，vue语法也可以用于开发手机app，需借助Weex）

vue是一套构建用户界面的框架，只关注视图层，所以易上手，而且也便于与第三方库或既有项目整合。（vue的优点）

库和框架的区别

框架：是一套完整的解决方案，对项目的侵入性比较大，项目如果需要换框架，则需重新搭建整个项目。

库：提供一个小功能，对项目的入侵性比较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

如何理解MVVM

MVVM是前端视图层的分层开发思想，分成M、V和VM，其中VM是MVVM核心思想，因为VM是M和V之间的调度者。

——>取 ——> 取 M：ajax获取的数据

M VM V VM：M、V之间的调度者

< ——存 <—— 存 V：每个页面中的html代码

使用MVVM的优点：为了我们开发更加方便，因为MVVM提供了数据的双向绑定。（数据的双向绑定是由VM提供的）。

vue指令：

v-cloak：能解决插值表达式闪烁问题。（经验证目前版本不存在闪烁问题 Vue.js v2.5.16）

v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

示例：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-text与插值表达式（{{}}）的区别

v-text会覆盖元素中原来的内容，但是差值表达式只会替换自己的占位符，不会把整个元素内容清空。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>+++{{msg}}---</p>
    <p v-text="msg">====</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123'
        }
    });
</script>
</body>
</html>

v-html：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

注意：

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。

v-bind：

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

示例：

详细示例请移步到vue官网：vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>+++{{msg}}---</p>
    <p v-text="msg">====</p>
    <input type="button" value="按钮" v-bind:title="mytitle">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            mytitle: '这是一个自定义的title'
        }
    });
</script>
</body>
</html>

好玩的跑马灯效果：

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="低调" @click="stop">
    <p>{{msg}}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪····！',
            time: null
        },
        methods: {
            lang() {
                //防止开多个定时器
                if (this.time != null) {
                    return
                }
                //每隔400毫秒执行一次，让自己动起来
                this.time = setInterval(() => {//箭头函数内部的this永远指向箭头函数外部的this
                    var start = this.msg.substring(0, 1);
                    var end = this.msg.substring(1);
                    this.msg = end + start;
                }, 400);
            },
            stop() {
                // 清除定时器
                clearInterval(this.time);
                this.time = null;
            }
        }
    });
</script>
</body>
</html>

v-for：

公用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arryList: ['qq', 'www', 'zz', 'gg'],
            jsonList: [{
                name: '豆豆'
            }, {
                name: '香香'
            }, {
                name: '七七'
            }],
            user: {
                name: 'ddddd',
                sex: '男',
                phone: '15398085656'
            }
        }
    });
</script>
</body>
</html>

1.迭代数组。

 <p v-for="item in arryList">{{item}}</p>

    <p v-for="(item,i) in arryList">{{i}}---{{item}}</p>

   <p v-for="(item,key) in jsonList">第{{key}}个：name:{{item.name}}</p>

2.迭代对象中的属性。

    <p v-for="(item,key) in user">值：{{item}}--------键:{{key}}</p>

    <!--注意在遍历对象身上的键值对时，除了（val,key）还有一个索引的位置即（val,key,index）-->
    <p v-for="(item,key,i) in user">值：{{item}}--------键:{{key}}---索引：{{i}}</p>

3.迭代数字。

    <!--注意：如果使用v-for迭代数字的话，count值是从1开始的。-->
    <p v-for="i in 5">{{i}}</p>

注意：

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

为何呢？我们来看个示例，大家就明白了。嘻嘻

公用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="editArry">
        <label>id：</label>
        <input type="text" v-model="id">
        <label>name：</label>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <p v-for="item in user">
        <input type="checkbox">id:{{item.id}}---name:{{item.name}}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            user: [{
                id: '1',
                name: '李琪琪'
            }, {
                id: '2',
                name: '小颖颖'
            }, {
                id: '3',
                name: '大黑熊'
            }]
        },
        methods: {
            add() { }
        }
    });
</script>
</body>
</html>

没问题的 add 方法：

      add() {
                var obj = {
                    id: this.id,
                    name: this.name
                }
                this.user.push(obj);
            }

有问题时：

            add() {
                var obj = {
                    id: this.id,
                    name: this.name
                }
                this.user.unshift(obj);
            }

大家会发现每次新增一个后，checkbox的位置就会前移一个，这样其实是不对的，但当我们加上key

html：

    <!--注意：在使用v-for循环时，key的值只能是number或string·-->
    <!--注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值·-->
    <p v-for="item in user" :key="item.id">
        <input type="checkbox">id:{{item.id}}---name:{{item.name}}
    </p>

v-if和v-show

官网：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-if的特点：每次都会重新删除或创建元素。

v-if的缺点：有较高的切换性能消耗。

v-show的特点：每次不会重新进行dom的删除和创建操作，只是切换了元素的display：none样式。

v-show的缺点：有较高的初始渲染消耗。

如果元素涉及到频繁的切换，最好不要使用v-if，如果元素可能永远也不会被显示出来被用户看到，则推荐使用v-if。

使用v-model实现计算器的案例

v-model适用于在表单控件或者组件上创建双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="number" v-model="n1">
    <select v-model="opt">
        <!--<template v-for="(list,index) in optionList">-->
        <!--<option :value="list.value">{{list.text}}</option>-->
        <!--</template>-->
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="number" v-model="n2">
    <input type="button" value="=" @click="calculation">
    <span>{{result}}</span>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            n1: 0,
            opt: '+',
            n2: 0,
            result: 0,
            optionList: [{
                value: '+',
                text: '+'
            }, {
                value: '-',
                text: '-'
            }, {
                value: '*',
                text: '*'
            }, {
                value: '/',
                text: '/'
            }]
        },
        methods: {
            calculation() {
                // switch (this.opt) {
                //     case '+':
                //         this.result = parseInt(this.n1) + parseInt(this.n2);
                //         break;
                //     case '-':
                //         this.result = parseInt(this.n1) - parseInt(this.n2);
                //         break;
                //     case '*':
                //         this.result = parseInt(this.n1) * parseInt(this.n2);
                //         break;
                //     case '/':
                //         this.result = parseInt(this.n1) / parseInt(this.n2);
                //         break;
                // }
                // 注意这是投机取巧的方法，实际开发中，尽量少用
                var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
                this.result = eval(codeStr);
            }
        }
    });
</script>
</body>
</html>

通过属性绑定为元素设置class

公用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .red {
            color: red;;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5rem;
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true
        }
    });
</script>
</body>
</html>

1.数组

<h1 :class="['red','thin']">这是一个很大的h1</h1>

2.数组中使用三元表达式

<h1 :class="['red','thin',flag?'active':'']">这是一个很大的h1</h1>

3.数组中嵌套对象

    <h1 :class="['red','thin',{'active':flag}]">这是一个很大的h1</h1>

4.直接使用对象

<body>
<div id="app">
    <h1 :class="{red:cla1,thin:cla2,italic:cla3,active:flag}">这是一个很大的h1</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            cla1: true,
            cla2: true,
            cla3: true,
            flag: true
        }
    });
</script>
</body>

通过属性绑定为元素绑定style

1.直接在元素上，通过 :style 形式书写样式。

<h1 :style="{color:'red','font-size':'40px'}">这是一个很大的h1</h1>

2.将样式对象，定义到data中，并直接引用到 :style 中

    <h1 :style="h1Style">这是一个很大的h1</h1>

3. 在 :style 中通过数组，引用多个data中的样式对象。

    <h1 :style="[h1Style,h1Style2]">这是一个很大的h1</h1>

事件修饰符的介绍

公用代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
    <style type="text/css">
        .div1{
            padding: 40px;
            background-color: pink;
        }
        .div2{
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div1Click() {
                console.log('最外层div');
            },
            div2Click() {
                console.log('第二层div');
            },
            btnClick() {
                console.log('点击按钮');
            },
            aClick(){
                console.log('点击a链接');
            }
        }
    });
</script>
</body>
</html>

`.stop 阻止事件冒泡`

    <!--.stop阻止事件冒泡-->
    <div class="div1" @click="div1Click">
        <div class="div2" @click="div2Click">
            <input type="button" value="按钮" @click.stop="btnClick">
        </div>
    </div>

点击两个div中的按钮后只执行了 btnClick 事件

不加.stop时

`.prevent 阻止默认行为`

<a href="https://www.baidu.com" @click.prevent="aClick">有问题找百度</a>

点击a标签

页面不跳转

`.capture` 添加事件侦听器时，使用事件的捕获模式

    <div class="div2" @click.capture="div2Click">
        <input type="button" value="按钮" @click="btnClick">
    </div>

点击按钮

`.self 只出发元素自身的事件`

    <div class="div1" @click="div1Click">
        <div class="div2" @click.self="div2Click">
            <input type="button" value="按钮" @click="btnClick">
        </div>
    </div>

点击按钮

`.once` 事件只触发一次

<a href="https://www.baidu.com" @click.prevent.once="aClick">有问题找百度</a>

点击a标签只有第一次会阻止默认事件，并且触发a标签的点击事件，第二次就不会了阻止默认事件，也不会触发a标签的点击事件。

按键修饰符的介绍

用法：

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

1. .enter

2. .tab

3. .delete （捕获删除和退格键）

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

小颖就不一一试了，拿 enter 键做个示例吧

.enter

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue测试</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="editArry">
        <label>id：</label>
        <input type="text" v-model="id">
        <label>name：</label>
        <input type="text" v-model="name" @keyup.enter="add">
        <button @click="add">添加</button>
    </div>
    <!--注意：在使用v-for循环时，key的值只能是number或string·-->
    <!--注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值·-->
    <p v-for="item in user" :key="item.id">
        <input type="checkbox">id:{{item.id}}---name:{{item.name}}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            user: [{
                id: '1',
                name: '李琪琪'
            }, {
                id: '2',
                name: '小颖颖'
            }, {
                id: '3',
                name: '大黑熊'
            }]
        },
        methods: {
            add() {
                var obj = {
                    id: this.id,
                    name: this.name
                }
                this.user.push(obj);
            }
        }
    });
</script>
</body>
</html>

如何自定义按键修饰符呢

示例：

html中调用：

        <input type="text" v-model="name" @keyup.f2="add">

js：

    Vue.config.keyCodes.f2 = 13;

自定义指令

注意：vue中所有的指令，在调用的时候，都以 v- 开头

全局

示例：

<div id="app">
    <input type="text" v-focus>
</div>
<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    var vm = new Vue({
        el: '#app'
    });
</script>

私有（局部）

示例：

<div id="app">
    <input type="text" v-focus>
    <p v-fontweight="800">{{1+1}}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            },
            fontweight: {
                bind: function (el, binding) {
                    el.style.fontWeight = binding.value;
                }
            }
        }
    });
</script>

posted @ 2019-01-23 17:23 爱喝酸奶的吃货阅读(6049) 评论(6) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

爱喝酸奶的吃货

你没空时不会做的事情，有空了也不会做.

学习Vue 入门到实战——学习笔记

闲聊：

学习内容：

什么是vue？

库和框架的区别

如何理解MVVM

vue指令：

v-text与插值表达式（{{}}）的区别

好玩的跑马灯效果：

使用v-model实现计算器的案例

通过属性绑定为元素设置class

1.数组

2.数组中使用三元表达式

3.数组中嵌套对象

4.直接使用对象

通过属性绑定为元素绑定style

1.直接在元素上，通过 :style 形式书写样式。

2.将样式对象，定义到data中，并直接引用到 :style 中

3. 在 :style 中通过数组，引用多个data中的样式对象。

事件修饰符的介绍

`.stop 阻止事件冒泡`

`.prevent 阻止默认行为`

`.capture` 添加事件侦听器时，使用事件的捕获模式

`.self 只出发元素自身的事件`

`.once` 事件只触发一次

按键修饰符的介绍

全部的按键别名：

如何自定义按键修饰符呢

自定义指令

全局

私有（局部）

公告

爱喝酸奶的吃货

你没空时不会做的事情，有空了也不会做.

学习Vue 入门到实战——学习笔记

闲聊：

学习内容：

什么是vue？

库和框架的区别

如何理解MVVM

vue指令：

v-text与插值表达式（{{}}）的区别

好玩的跑马灯效果：

使用v-model实现计算器的案例

通过属性绑定为元素设置class

1.数组

2.数组中使用三元表达式

3.数组中嵌套对象

4.直接使用对象

通过属性绑定为元素绑定style

1.直接在元素上，通过 :style 形式书写样式。

2.将样式对象，定义到data中，并直接引用到 :style 中

3. 在 :style 中通过数组，引用多个data中的样式对象。

事件修饰符的介绍

.stop 阻止事件冒泡

.prevent 阻止默认行为

.capture 添加事件侦听器时，使用事件的捕获模式

.self 只出发元素自身的事件

.once 事件只触发一次

按键修饰符的介绍

全部的按键别名：

如何自定义按键修饰符呢

自定义指令

全局

私有（局部）

公告

`.stop 阻止事件冒泡`

`.prevent 阻止默认行为`

`.capture` 添加事件侦听器时，使用事件的捕获模式

`.self 只出发元素自身的事件`

`.once` 事件只触发一次