头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

Vue.js学习笔记Day1-4.22

Vue.js学习笔记Day1-4.22

今日主要学习内容:

  • 三大主流框架的区别;
  • 框架和库的区别;
  • MVC和MVVM的区别;
  • Vue的基本代码结构、插值表达式、v-cloakv-textv-htmlv-bindv-on
  • 走马灯效果制作;
  • 事件修饰符(.stop.prevent.capture.self.once);
  • v-model和实现表单元素的双向数据绑定;
  • Vue中使用样式;
  • v-for指令和key属性;
  • v-ifv-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强公司等大型组织使用。
    Vue.js0422_01.jpg

二、框架和库的区别:

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

三、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>

五、走马灯效果制作

制作步骤:

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