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

时间 2019-11-06

标签学习 vue 入门实战笔记繁體版

原文原文链接

闲聊：

自从进了如今的公司，小颖就再没怎么接触vue了，最近不太忙，因此想再学习下vue，就看了看vue相关视频，顺便作个笔记嘻嘻。css

视频地址：Vue 入门到实战1、Vue 入门到实战2html

学习内容：

什么是vue？

官网回答：前端

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

视频笔记：react

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

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

库和框架的区别

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

库：提供一个小功能，对项目的入侵性比较小，若是某个库没法完成某些需求，能够很容易切换到其它库实现需求。json

如何理解MVVM

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

——>取 ——> 取 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>

学习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` 事件只触发一次