Vue入门

1.Vue.js是什么?

        Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

什么是渐进式框架:

        渐进式的意思就是 "主张最少"。每个框架都会有自己的一套编码方式,从而对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响咋业务开发中的使用方式。

通俗理解渐进式的意思就是:你可以只用我的一部分,而不是用了我这一部分就必须用我的所有部分。

   Vue优点:

              a.轻量级的框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
               b.简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习。
               c.双向数据绑定:同时也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
               d.组件化:在前端应用里我们是否也可以像面向对象编程一样把模块封装呢?这就引入了组件化开发的思想。Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中 我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
               e.视图&数据&结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
               f.运行速度快

2. 库和框架的区别


  2.1 库(Library)

本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者


      代表:jQuery 
      jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
      JavaScript:document.getElementById()
      jQuery:    $('').val()


  2.2 框架(Framework)

是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码 
      代表:自定义mvc、SpringMVC、vue等。
      框架规定了自己的编程方式,是一套完整的解决方案
      使用框架的时候,由框架控制一切,我们只需要按照规则写代码
      框架的侵入性很高(从头到尾)
  
     侵入式代码:
    a.指的是引入或继承了别的包或框架;
    b.从字面意思理解,就是你的代码里已经嵌入了别的代码,这些代码可能是你引入过的框架,也可能是你通过接口继承得来的(比如:java中的继承),这样你就可以拥有侵入代码的一些功能。所以我们就称这段代码是侵入式代码。
    c.比如:自定义MVC框架就是侵入式框架。我们在在使用自定义MVC框架的时候就要继承自定义MVC框架所提供中央调度器(DispatchServlet),这时自定义MVC框架的代码就侵入到我们的代码里面了,所以自定义MVC框架的代码就是侵入式的。
    d.侵入式代码的优点:侵入式可以使用户跟框架更好的结合,更容易更充分的利用框架提供的功能。
    e.侵入式代码的缺点:侵入式让用户代码产生对框架的依赖,框架外代码就不能使用了,不利于代码复用,依赖太多重构代码太痛苦了。一句话概括就是,你的代码需要依赖框架的代码,如果把框架拿掉或者换一个框架,就需要重新修改代码(因为使用侵入式的框架,一般需要继承或者实现框架的某一个类或者接口)。

     非侵入式代码:
         a.非侵入式与侵入式正好相反,用户的代码不需要引入框架代码的信息,从类的编写者角度来看,察觉不到框架的存在。
    b.非侵入式代码优点:代码可复用,方便移植。体现了代码的设计原则:高内聚,低耦合。
    c.非侵入式代码缺点:用户代码与框架代码交互的方式可能就比较复杂。
    d.Vue框架就是非侵入式框架。

3. MVVM的介绍


   MVVM,MVVM是Web前端一种非常流行的开发模式,MVVM通过数据双向绑定让数据自动地双向同步

   MVVM ===> M / V / VM
   M:model数据模型(JSON)
   V:view视图(HTML)
   VM:ViewModel 视图模型.可以把它理解成“胶水”,它是把View和Model结合起来。把后台Model的数据提供给前端View,再把前端View的数据(比如form表单)提供给后台Model。
       通过ViewMode可以实现数据和视图的完全分离。

   1) V(修改数据) -> M  将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
      $('#btn_login').click(function(){
         通过ajax将页面中的数据通过json格式传递到后端服务器
      });

   2) M(修改数据) -> V  将后端数据(JSON)通过赋值的方式在视图层展现(后端到前端)  
      通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
      $.ajax({
         url:
         data:
         dataType:
         type:
         success:function(data){
           $('#book_name').val(data....);  .text() .html()
           ...
         }
      })
      

   共性:不管是前端到后端,还是后端到前端,使用传统的方式都必须首先拿到
         页面的Document元素,只有拿到了页面元素才能进行后续操作
      
   MVVM(数据双向绑定)

   M  ->  VM  ->  V

   V  ->  VM  ->  M

   请大家记住,要丢弃之前的思想(不要想着如何去拿到页面的元素),而是想着去操作数据!!!
   数据是核心

   注1:虽然没有完全遵循MVVM模型,Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
   注2:学习Vue要转化思想:“不要在想着怎么操作DOM,而是想着如何操作数据!!!”

4.Vue导入

概述:Vue是一个类似于Jquery的一个JS框架,所以,如果想使用Vue,则在当前页面导入Vue.js文件即可。

语法:

<!-- 在线导入 -->
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

五. Vue基本语法

5.1 插值表达式

概述:插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法{{ 变量名/对象.属性名 }}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ name }}</h1>
    </div>
    <script type="text/javascript">
        //创建vue对象
        var app = new Vue({
            //让vue接管div标签
            el:"#app",
            //定义数据,里边包含一个属性name,值为"Hello Vue"
            data:{
                name:"Hello Vue"
            }
        });
    </script>
</body>
</html>

6.显示数据(v-text和v-html)

概述:

​ v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

​ 当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

​ 插值闪烁: 在数据未加载完成时,页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法:

v-text:<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
v-html:<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

区别:

v-text:把数据当作纯文本显示.
v-html:遇到html标签,会正常解析

7.数据双向绑定数据(v-model)

概述:

​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.

注意:

1. 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”等
2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
3. 单个复选框, 绑定的是boolean类型
4. 多个复选框, 绑定的是数组
5. select单选对应字符串,多选对应也是数组

8.事件处理(v-on)

8.1.事件绑定(v-on)

概述:

​ Vue中也可以给页面元素绑定事件.

语法

<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>

注意:

​ Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

8.2.事件修饰符

概述:事件修饰符主要对事件的发生范围进行限定

语法

<button @事件名.事件修饰符="函数名/vue表达式">点我</button>

分类:

.stop :阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent :阻止默认事件发生
.capture :使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self :只有元素自身触发事件才执行。(冒泡或捕获的都不执行)
.once :只执行一次

9.循环遍历(v-for)

9.1.遍历数组

语法

v-for="item in items"
v-for="(item,index) in items"

items:要迭代的数组
item:存储数组元素的变量名
index:迭代到的当前元素索引,从0开始。

代码:

<div id="app">
	<ul>
        <li v-for="(user, index) in users">
        	{{index}}--{{user.name}}--{{user.age}}--{{user.gender}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element,要渲染的页面元素
        data: {
            users:[
                {"name":"张三","age":8,"gender":"男"},
                {"name":"李四","age":12,"gender":"女"},
                {"name":"王五","age":4,"gender":"男"}
            ]
        }
    });
</script>

9.2.遍历对象

语法

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

value,对象的值
key, 对象的键
index, 索引,从0开始

代码

<div id="app">
	<ul>
        <li v-for="(value,key,index) in person">
        	{{index}}--{{key}}--{{value}}
        </li>
	</ul>
</div>
<script>
    var app = new Vue({
        el:"#app",//el即element,要渲染的页面元素
        data: {
            person:{"name":"张三", "age":18, "address":"中国"}
        }
    });
</script>

9.3.key

概述:

​ :key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

案例:

<div id="app">
    <button @click="add">添加</button>
    <ul>
        <li v-for="name in list">
            <input type="checkbox"> {{name}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: ["张三", "李四", "王五"]
        },
        methods: {
            add() {
                //注意这里是unshift,向数组的头部添加一个元素
                this.list.unshift("老刘");
            }
        }
    });
</script>

10.显示数据(v-bind)

概述:

v-bind的作用和插值表达式差不多, 只不过, v-bind主要用于动态设置标签的属性值

语法

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

案例

<div id="app">
    <input type="button" :value="msg"/>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
           msg:"我是按钮"
        }
    });

</script>

11、Vue其他语法

11.1.计算属性

概述:计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

语法

 var app = new Vue({
     el:"#app",
     //计算属性必须放在Vue的computed中
     computed:{
         //定义计算属性
         属性名(){
             return "返回值";
         }
     }
});

案例:

<div id="app">
    <h1>{{date}}</h1>
    <h1 v-text="date"></h1>
    <h1 v-html="date"></h1>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        computed:{
            //定义一个birth方法,该方法就是一个计算属性,可以在插值表达式中使用
            date(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                let day = date.getDay();
                return year + "-" + month + "-" + day;
            }
        }
    });
</script>

11.2.watch监听

概述

​ watch可以监听简单属性值及其对象中属性值的变化.

​ watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.

语法

var app = new Vue({
    el:"#app",
    data:{
        message:"张三",
        person:{"name":"heima", "age":13}
    },
    //watch监听
    watch:{
        //监听message属性值,newValue代表新值,oldValue代表旧值
        message(newValue, oldValue){
        	console.log("新值:" + newValue + ";旧值:" + oldValue);
        },
        //监控person对象的值,对象的监控只能获取新值
        person: {
            //开启深度监控;监控对象中的属性值变化
            deep: true,
            //获取到对象的最新属性数据(obj代表新对象)
            handler(obj){
                console.log("name = " + obj.name + "; age=" + obj.age);
            }
        }
    }
});

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值