您的位置: 首页  >  文章  >  Vue.js入门知识day1

Vue.js入门知识day1

分类: 文章 • 2024-05-30 11:38:52

什么是Vue.js

  • Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
  • Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架
  • Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Vue有配套的第三方类库，可以整合起来做大型项目的开发)
  • 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果

为什么要学习流行框架

  • 企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
    • 企业中，使用框架能够提高开发的效率；
  • 提高开发效率的发展历程：原生JS（有兼容性问题）-> Jquery之类的类库 （ 频繁的操作DOM元素）->前端模板引擎(全部元素都会重新渲染一遍)->Angular.js/Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关注数据的业务逻辑，不再关心DOM是如何渲染的了】）
  • 在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以有更多的时间去关注业务逻辑。
  • 增强自己就业时候的竞争力
    • 人无我有，人有我优
    • 你平时不忙的时候，都在干嘛？逛逛****社区，买两本书看

框架和库的区别

  • 框架：是一套完整的技术解决方案；对项目的侵入性比较大，项目如果需要更换框架，则需要重新架构整个项目
    • node 中的 express；
      +库（插件）：提供某一个小功能，对项目的侵入性比较小，如果库无法完成某些需求，可以很容易切换到其他库实现需求。
    • 1.从Jquery切换到Zepto
    • 2.从 EJS 切换到art-template

Node(后端)中的MVC与前端中的MVVM之间的区别

  • MVC是后端的分层开发概念；
  • MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model，View，VM ViewModel
  • 为什么有了MVC还要有MVVM
    Vue.js入门知识day1

Vue.js基本代码和MVVM之间的对应关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="lib/vue.js"></script>
</head>
<body>
    <!--将来new的Vue实例，会控制这个元素中的所有内容-->
    <!--Vue实例所控制的这个元素区域，就是我们的V-->
    <div id="app">
        <p id="content">{{msg}}</p>
    </div>
    <script>
    //2、创建一个Vue的实例
    //当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
    //注意：我们new出来的这个vm对象，就是我们MVVM中的VM调度者
        var vm = new Vue({
            el:'#app',//表示，当前我们new的这个Vue实例，要控制页面上的哪个区域
            //这里的data就是MVVM中的M，专门用来保存每个页面的数据
            data:{//data属性中，存放的是el中要用到的数据
            msg:'欢迎学习Vue'//通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】
            }
    })
    </script>
</body>
</html>

Vue之 - 基本的代码结构和插值表达式、v-cloak 

    <style>
        [v-cloak]{
            display:  none;
        }
    </style>
    <div id="app">
        <p v-cloak>{{msg}}</p>
        <!--解决了闪烁问题-->
    </div>
     <script>
         var vm = new Vue({
             el:'#app',
             data:{
                 msg:'123',
                 msg2:'<h1>哈哈，我是一个大大的H1,我大我骄傲</h1>',
                 mytitle:'这是一个自己定义的title'
             }
        })
    </script>

Vue之v-text、v-html 

        <div v-text="msg"></div>
        <!--默认v-text是没有闪烁问题的-->
        <!--v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空-->

        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <!--显示出来的依然是文字内容-->
        <div v-html="msg2"></div>
        <!--显示出来的是页面中的h1元素-->
        <script>
         var vm = new Vue({
             el:'#app',
             data:{
                 msg:'123',
                 msg2:'<h1>哈哈，我是一个大大的H1,我大我骄傲</h1>'
             }
        })
    </script>

Vue之v-bind 

		<!--v-bind:是Vue中提供的用于绑定属性的指令-->
        <input type="button" value="按钮" v-bind:title=mytitle>
        <!--注意：v-bind: 指令可以被简写为 :要绑定的属性-->
        <!--v-bind 中，可以写合法的JS表达式-->
        <input type="button" value="按钮" :title=mytitle>
         <script>
         var vm = new Vue({
             el:'#app',
             data:{
                 msg:'123',
                 msg2:'<h1>哈哈，我是一个大大的H1,我大我骄傲</h1>',
                 mytitle:'这是一个自己定义的title'
             }
        })
    </script>

使用v-on指令定义Vue中的事件

  <!--Vue 中提供了 v-on：事件绑定机制-->
        <input type="button" value="按钮" :title=mytitle v-on:click = "show">
   		//click的双引号中不能保存alert('hello')，因为click也会把双引号中的值当成一个变量，alert也被当成了一个变量，所以我们要把show放到methods里面保存下来
   		//v-on: 的缩写是 @
   		<input type="button" value="按钮" :title=mytitle @click = "show">
        <script>
         var vm = new Vue({
             el:'#app',
             data:{
                 msg:'123',
                 msg2:'<h1>哈哈，我是一个大大的H1,我大我骄傲</h1>',
                 mytitle:'这是一个自己定义的title'
             },
             methods:{//这个methods属性中定义了当前Vue实例所有可用的方法
                 show:function () {
                     alert('hello');
                 }
             }
        })

跑马灯效果

<div id="photo">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调" @click="wei">
        <h4>{{msg}}</h4>
    </div>
    <script>
        //注意：在VM实例中，如果想要获取 data上的数据，或者 想要调用 methods 中的方法，必须通过this.数据属性名或 this.方法名来进行访问，这里的this，就表示我们 new 出来的 VM实例对象
        var vm = new Vue({
            el:"#photo",
            data:{
                msg:"猥琐发育，别浪",
                value:"浪起来",
                timer:null
            },
            methods:{
                lang(){
                    if (this.timer!=null)return;
                    this.timer = setInterval(()=>{
                        //箭头表达式中内部的this等于外部的this
                        var start = this.msg.substring(0,1)
                        var end = this.msg.substring(1)
                        this.msg = end+start
                    },400)

                    //注意：VM实例，会监听自己身上 data 中所有数据的改变，就会自动把最新的数据，从data上同步到页面中去;【好处:程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
                },
                wei(){
                    clearInterval(this.timer)
                    //每当清除了定时器之后，需要重新把timer置为null
                    this.timer = null
                }
            }
        })
    </script>

Vue中的事件修饰符

<style>
        .outer{
            padding: 40px;
            background-color: red;
        }
        .inner{
            background-color: darkcyan;
            height: 150px;
        }
</style>
<div id="photo">
使用 .stop 阻止冒泡,冒泡是默认的事件触发机制
        <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="inputHandler">
        </div>
使用 .prevent 阻止默认行为
        <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
使用 .capture 实现捕获触发事件的机制
        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="inputHandler">
        </div>
        注意：冒泡机制中的stop加在子盒子，而捕获机制中的capture虽然是加在父盒子，但却是在点击子盒子的时候触发的
使用.self实现只有点击当前元素的时候，才会触发事件处理函数
        <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="inputHandler">
        </div>
使用 .once只触发一次事件处理函数
            <div class="inner" @click.prevent.once="div1Handler">
                <input type="button" value="戳他" @click="inputHandler">
            </div>
演示: .stop和.self的区别
        <div class="outer" @click="div2Handler">
        <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="inputHandler">
        </div>
        </div>
        .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="inputHandler">
            </div>
        </div>
此处为公用js代码
var vm = new Vue({
            el:"#photo",
            methods:{
                div1Handler(){
                    console.log("这是inner盒子")
                },
                inputHandler(){
                    console.log("这是button")
                },
                linkClick(){
                    console.log("这是链接")
                },
                div2Handler(){
                    console.log("这是outer盒子")
                },
            }
        })
    </script>

v-model指令的学习

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定，使用v-model指令，可以实现表单元素和Model中数据的双向数据绑定
<div id="app">
        <h4>{{msg}}</h4>
        <!--注意：v-model只能运用在表单元素中-->
        <!--input(radio,text,address,email....) select checkbox textarea-->
        <input type="text" v-model:value="msg" style="width: 100%">
    </div>
    <script>
        //创建 Vue实例，得到ViewModel
        var vm = new Vue({
           el:'#app',
           data:{
               msg:'独在异乡为异客，dsadasd每逢佳节倍思亲'
           },
           method:{}
        });
    </script>

v-model实现计算器案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model:value="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model:value="result">
    </div>
    <script>
        //创建 Vue实例，得到ViewModel
        var vm = new Vue({
           el:'#app',
           data:{
               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;
                   // }

                   //注意：这是投机取巧的方式，正式开发中尽量少用
                   var codeStr = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                   this.result = eval(codeStr);
               }
           }
        });
    </script>
</body>
</html>

在Vue中使用样式

<style>
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
</style>
 <div id="app">
        <h1 class="red thin">这是一个很大很大的h1，大道理</h1>
第一种使用方式，直接传递一个数组，注意:这里的class需要使用v-bind做数据绑定
        <h1 :class=['thin']>这是一个很大很大的h1，大道理</h1>
在数组中使用三元表达式
        <h1 :class=['thin',flag?'red':'']>这是一个很大很大的h1，大道理</h1>
在数组中使用 对象来代替三元表达式，提高代码的可读性
        <h1 :class=['thin',{'red':flag}]>这是一个很大很大的h1，大道理</h1>
直接用对象， 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以这里我没写引号;属性的值是一个标识符
    <h1 :class="classObj">这是一个很大很大的h1，大道理</h1>
公共JS代码
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{
                    red:true,thin:true,italics:false,active:false
                }
            }
        })
    </script>

相关推荐