Vue.js学习笔记Day1-4.22

今日主要学习内容：

三大主流框架的区别；
框架和库的区别；
MVC和MVVM的区别；
Vue的基本代码结构、插值表达式、v-cloak、v-text、v-html、v-bind、v-on；
走马灯效果制作；
事件修饰符（.stop、.prevent、.capture、.self、.once）；
v-model和实现表单元素的双向数据绑定；
Vue中使用样式；
v-for指令和key属性；
v-if和v-show的使用和特点

今天开始和我一起Vue框架的学习吧～

一、三大主流框架：

Vue是目前最火的前端框架，用来构建用户界面，只关注与视图层，容易上手且方便与与第三方库整合，它由前谷歌员工Evan You创建，被阿里巴巴，GitLab，百度使用，并受到全球开发人员和设计师的赞赏。
React是最流行的前端框架，React由facebook维护，React被Facebook，Uber，Netflix，Twitter，Udemy，Paypal，Reddit，Tumblr，Walmart 等使用。（React除了开发网页还可以开发App，vue借助于weex也可以开发手机App）
Angular是应用最广泛的前端框架，是一个由Google支持的基于TypeScript的JavaScript框架，Angular开发在全球开发人员中广泛流行，并被谷歌，福布斯，WhatsApp，Instagram，healthcare.gov和许多财富500强公司等大型组织使用。

二、框架和库的区别：

框架：是一套完整的解决方案；对项目侵入性非常大，项目需要更换框架，则需要重新架构各个项目
库：提供某一个小功能，对项目侵入性小，如果某个库无法完成某些需求，可以很容易切换其他库进行实现需求

三、MVC（后端）和MVVM（前端）间的区别：

MVC：modal层负责数据的处理，view层负责前端显示页面，controller是业务逻辑层
MVVM：是前端视图层的概念，主要关注视图层的分离，VM是最主要的部分，是整个环节的调度者
Vue.js0422_02.jpg

四、Vue之基本代码结构、插值表达式、v-cloak、v-text、v-html、v-bind、v-on

1.Vue的基本代码结构：

这是一个新建好的Vue项目结构
Vue.js0422_03.jpg
Vue.js0422_04.jpg

2.Vue的插值表达式：

主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：<span>Message:</span>
Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

3.指令学习：

v-cloak：解决插值闪烁问题

<p v-clock>{{ msg }}</p>   //可以解决插值闪烁问题

v-text：操作元素中的纯文本
<p v-clock></p>和<h4 v-text="msg"></h4>区别：
1>默认v-text没有插值闪烁问题
2>v-text会覆盖元素中原本的内容，但插值表达式只会替换自己的占位符，不会吧整个元素内容清空

<p v-clock>+++{{ msg }}</p>  //可显示+++，
<h4 v-text="msg">+++</h4>  //不能显示+++

v-html：操作元素中的HTML标签

<div v-html="msg2"></div>

v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出

v-bind：用于提供绑定属性的指令，简写形式是：

<input type="button" value="按钮" v-bind:title="mytitle + '123'">

简写形式：v-bind:title等同于:title
v-bind中可以写合法的JS表达式，可以将mytitle看做一个变量，为其添加表达式‘123’

v-on：事件绑定机制，可以替代DOM操作，简写形式是@

<div>
    <input type="button" value="按钮" v-bind:title="mytitle + '123'" id="btn">
</div>

<script>
    document.getElementById('btn').onclick = function(){
        alert('Hello')
    }
</script>

用vue框架可以简写为：

<div>
    <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="alert('hello')">
</div>

简写形式：v-on:click等同于@click
如若发现alert未被定义，还需要用methods属性定义当前vue实例所有可用的方法

<div>
    <input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:click="show">
</div>

<script>
    methods:{
        show:function(){
            alert('Hello')
        }
    }
</script>

五、走马灯效果制作

制作步骤：

给【浪起来】按钮，绑定一个点击事件 v-on即@click
在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置上即可
为了实现点击按钮自动截取的功能，需要把步骤2步骤中的代码，放到一个定时器中去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="嗨起来" @click="lang">
        <input type="button" value="低调" @click="stop">
        <h4>{{ msg }}</h4>
    </div>
    <script> //注意：在VM实例中，如果要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或者this.方法名来进行访问，这里的this.就表示我们new出来的VM实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '猥琐发育，别浪~~！',
                intervalId:null, //在data上面定义计时器Id
            },
            methods:{
                lang(){
                    if(this.intervalId != null) return;
                    //console.log(this.msg);
                    //var _this=this;
                    this.intervalId = setInterval(() => { //也可以用箭头函数，解决this指向问题
                        //获取到头的第一个字符
                        var start = this.msg.substring(0,1);
                        //获取到后面的字符
                        var end = this.msg.substring(1);
                        //重新拼接得到新的字符串，并赋值给this.msg
                        this.msg = end + start;
                    },400)
                    //vm实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data、上同步到页面中去【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
                },
                stop(){
                    clearInterval(this.intervalId);
                    //每当清除了定时器之后需要把intervalId重新设为null，否则无法重新开启定时器
                    this.intervalId = null;
                }
            }
        })
    </Script>
</body>
</html>

六、事件修饰符

.stop：用于阻止冒泡

<div class="inner" @click="divHander" >
    <input type="button" value="戳它" @click.stop="btnHander" >
</div>

.prevent：阻止默认行为

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题先去百度</a>

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

<div class="inner" @click.capture="divHander" >
    <input type="button" value="戳它" @click="btnHander" >
</div>

.self：实现只有点击当前元素时，才会触发事件处理函数

<div class="inner" @click.self="divHander" >
    <input type="button" value="戳它" @click="btnHander" >
</div>

.once事件只触发一次,.prevent.once相当于只阻止一次默认行为

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题先去百度</a>

注意：.stop和.self的区别：
.stop是阻止所有冒泡行为的发生
.self 只会阻止自己身上冒泡行为的发生，并不会真正阻止冒泡的行为

<div class="outer" @click="div2Handler">
    <div class="inner" @click="divHandler" >
        <input type="button" value="戳它" @click.stop="btnHandler" >
    </div>
</div>

<div class="outer" @click="div2Handler">
    <div class="inner" @click.self="divHandler" >
        <input type="button" value="戳它" @click="btnHandler" >
    </div>
</div>

七、Vue指令之v-model和实现表单元素的双向数据绑定

v-bind只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定

<input type="text" v-bind:value="msg" style="width: 100%">

v-model指令可以实现表单元素和Mpdel中数据的双向数据绑定
v-model只能运用在表单元素中：input（radio，text，address，email…）、select、checkbox、textarea等等

<input type="text" v-model="msg" style="width: 100%">

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el: '#app', //el指定vm要控制的元素
            data: { //data指定vm中要展示的数据
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+',
            },
            methods:{
                calc(){ //计算器算数的方法
                    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;
                    }
                    // 注意eval是投机取巧的方式，正式开发中，尽量少用
                    // var codeStr = ' parseInt(this.n1) ' + this.opt + ' parseInt(this.n2) '
                    // this.result = eval(codeStr)
                }
            }
        })
    </Script>
</body>
</html>

八、Vue中使用样式

使用class样式
1. 数组

<h1 :class="['red', 'thin']">很大很大的标题</h1>

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

<h1 :class="['red', 'thin', flag?'active':'']">很大很大的标题</h1>

3. 数组中嵌套对象

<h1 :class="['red', 'thin', {'active':flag}]">很大很大的标题</h1>

4. 直接使用对象

<h1 :class="{red:true,thin:true,italic:false,active:false}">很大很大的标题</h1>
    <h1 :class="classObj">很大很大的标题</h1>
    data: {                   //data中定义样式对象    
    classObj:{red:true,thin:true,italic:false,active:false}
    },

使用内联样式：
1. 直接在元素上通过:style的形式书写样式对象

<h1 :style="{color:'red','font-weight':200 }">这是一个标题</h1>

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

<h1 :style="styleObj1">这是一个标题</h1>
    data: {                   //data中定义样式对象
        styleObj1:{color:'red','font-weight':200 },
    },

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

<h1 :style="[ styleObj1 , styleObj2 ]">这是一个标题</h1>
    data: {                     //data中定义样式对象
        styleObj1: {color:'red','font-weight':200 },
        styleObj2: {'font-style':'italic'}
    },

九、Vue指令之v-for指令和key属性

1. 迭代数组

<p v-for="item in list">{{ item }}</p>
    <p v-for="(item,i) in list">索引值:{{ i }}---每一项:{{ item }}</p>

2. 迭代对象数组

<p v-for="(user,i) in list">索引号:{{ i }}---序号:{{ user.id }}---姓名：{{ user.name}}</p>

3. 迭代对象

<p v-for="(value,key,i) in User">索引号：{{i}}---键是:{{ key }}---值是:{{ value }}</p>

4. 迭代数字

<!-- in后面放置普通数组，对象数组，对象，还可以放置数字 -->
<!-- 注意：如果使用v-for迭代数字，默认从1开始迭代 -->
<p v-for="(count,i) in 10">索引号：{{i}}---这是第 {{ count }} 次循环</p>

key属性的特性：

在2.20+的版本里，当在组件中使用v-for时，key现在是必须的
当vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复原策略”，如果数据项的顺序被改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保他在指定索引下显示已被渲染过的每个元素
为了给Vue一个提示，以便他能够跟踪每个节点的身份，从而重用和重新排序现有的元素，需要为每项提供一个唯一的key属性
注意：v-for循环的时候key属性只能使用number获取string
注意：key在使用时，必须使用v-bind属性绑定形式，指定key的值
在组件中使用v-for的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串或数字类型：key值

<p v-for="(user,i) in list" :key="user.id">
    <input type="checkbox">
    索引号:{{ i }}---序号:{{ user.id }}---姓名：{{ user.name}}
</p>

十、v-if和v-show的使用和特点

v-if的特点：每次都会重新删除或创建元素
v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none
v-if有较高的切换性能，如果元素涉及到频繁的切换，最好不要使用v-if
v-show有较高的初始渲染消耗，如果元素可能永远也不会显示出来被用户看到，则不推荐使用v-show

<input type="button" value="toggle" @click="toggle">
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>

Vue.js学习笔记Day1-4.22