文档章节

【Vue_01】基础知识

Demo_Null
 Demo_Null
发布于 02/17 20:24
字数 1963
阅读 5.5K
收藏 7

一、Vue 介绍

1. 作者介绍

2. Vue 简介

① Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

② Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

③ Vue 借鉴了 Angular 的模板和双向绑定技术;借鉴了 react 的组件化和虚拟 DOM 技术。

④ MVVM 模式是 Model-View-ViewModel 的缩写,Model 代表数据模型,定义数据操作的业务逻辑,View 代表视图层,负责将数据模型渲染到页面上,ViewModel 通过双向绑定把 View 和 Model 进行同步交互,不需要手动操作DOM 的一种设计思想

3. MVVM 介绍

M: 即Model,模型,包括数据和一些基本操作

V: 即View,视图,页面渲染结果

VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)

在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的, 只要我们Model发生了改变,View上自然就会表现出来。当用户修改了View,Model中的数据也会跟着改变。把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。

二、快速使用

1. Vue 起步

创建一个 HTML 文件,引入:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

【注意】使用自闭合标签可能会出现问题

2. 声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
</head>
    <body>
        <div id="app">
        	<!-- 插值表达式 -->
            <h2>姓名:{{name}},年龄:{{age}}</h2>
        </div>

        <script>
                // 创建vue实例
                var app = new Vue({
                    el:"#app",  // el即element,该vue实例要渲染的页面元素
                    data:{      // 渲染页面需要的数据
                        name : "王大锤",
                        age : 250
                    }
                });

        </script>
    </body>
</html>

此时我们已经成功创建了一个 Vue 应用,打开 HTML 页面会显示 Hello Vue! 。这就是声明式渲染,Vue 的核心是:采用简洁的模板语法声明式地将数据渲染进 DOM 的系统。这里的核心思想就是没有繁琐的 DOM 操作,例如 jQuery 中,我们需要先找到 div 节点,获取到 DOM 对象,然后进行一系列的节点操作。

三、Vue实例

1. 创建Vue实例

var app = new Vue({		// Vue实例
    el:"#app",  		// Vue可以对id为app的div元素进行渲染,该div之外的无法控制
     data:{     		// 数据,存放可能会用到的数据
         name : "王大锤",
         age : 250
     },
     methods: {			// 方法,声明可能会用到的方法
         test() {
             console.log("测试方法");
         }
     }
 });

2. 双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
</head>
    <body>
        <div id="app">
            请输入年龄:<input type="text" v-model="age">
            <h2>姓名:{{name}},年龄:{{age}}</h2>
        </div>

        <script>
                var app = new Vue({
                    el:"#app",  
                    data:{     
                        name : "王大锤",
                        age : 250
                    }
                });

        </script>
    </body>
</html>

其中 input 的的变化可以影响到 age,age 的变化也可以影响到 input

在这里插入图片描述

3. 生命周期

在这里插入图片描述

【生命周期钩子函数】

beforeCreated:在 Vue 实例化之前调用,也可以将他理解为初始化函数。在 Vue1.0 时,这个函数的名字就是 init。
created:在创建实例之后进行调用。

beforeMount:页面加载完成,没有渲染。此时页面还是 {{name}}
mounted:他的功能就是:在 dom 文档渲染完毕之后将要执行的函数,该函数在 Vue1.0 版本中名字为 compiled。可以将他理解为原生 js 中的 window.onload=function({.,.}) ,所以也可以理解为 jquery 中的 $(document).ready(function(){….})。此时页面中的 {{name}} 已被渲染

beforeDestroy:该函数将在销毁实例前进行调用 。
destroyed:改函数将在销毁实例后进行调用。

beforeUpdate:组件更新之前。
updated:组件更新之后。

4. this

var app = new Vue({
	el:"#app",  
    data:{     
        num : 10
    },
    methods: {
        test() {
            let a = num;      // 拿不到值
            let b = this.num ++;    // 可以拿到值
        }
    }
});

四、模板语法

1. 插值表达式 {{ }}

<div id="app">
    <h2>姓名:{{name}},年龄:{{age}}</h2>
</div>

2. v-model

<div id="app">
	<!-- 双向绑定 -->
	<input type="text" v-model="num">
    <span>{{num}}</span>
</div>

<script>
    var app = new Vue({
          el:"#app",  
          data:{     
              num : 200
          }
      });
</script>

3. v-test / v-html

<div id="app">
 	<!-- 纯文本展示 -->
    <span v-text="num"></span> 
     <!-- 解析为html -->
    <span v-html="num"></span>
</div>

<script>
    var app = new Vue({
          el:"#app",  
          data:{     
              num : "<h1>Hello Vue!</h1>"
          }
      });
</script>

在这里插入图片描述

4. v-on

  • 语法

    <div id="app">
    	{{num}} <br/>
    	<!-- 绑定事件 -->
        <button v-on:click="add">add</button>
        <!-- 简写形式 -->
    	<button @click="add">add</button>
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",  
            data:{     
                num : 1
            },
            methods: {
                add() {
                    this.num ++;
                }
            }
        });
    </script>
    

    在这里插入图片描述

  • 事件修饰符

    .prevent:阻止默认事件发生

    <!-- 阻止默认链接跳转,使用 add 方法处理该事件,也可不处理 -->
    <a href="" @click.prevent="add">链接</a>
    

5. v-for

  • 语法

    <div id="app">
         <lu>
             <!-- 遍历集合 -->
             <li v-for="item in list">
                 {{item}}
             </li>
             <hr/>
             <!-- 遍历集合,拿到索引 -->
             <li v-for="(item, index) in list">
                     {{index + 1}}---{{item}}
             </li>
             <hr/>
             <!-- 遍历对象,拿到 key,拿到索引 -->
             <li v-for="(item, key, index) in user">
                  {{index + 1}}---{{key}}---{{item}}
             </li>
         </lu>
     </div>
    
     <script>
         var app = new Vue({
             el:"#app",  
             data:{     
                list: ["唐三藏", "熏悟空", "猪八盖", "洒悟净", "小百龙"],
                user: {name: "王大锤", age: 23}
             }
         });
     </script>
    

    在这里插入图片描述

  • 注意

    我们一般会加 key 来提高效率,理想的 key 是每项都有且唯一的

    <li v-for="(item, index) in lsit" :key="index">
    	 {{index + 1}}---{{item}}
    </li>
    

6. v-if

  • 语法
<div id="app">
	<span v-if="flag">10086</span>
    <span v-if="!flag">10001</span>
</div>

<script>
   var app = new Vue({
       el:"#app",  
       data:{     
          flag: true
       }
   });
</script>

在这里插入图片描述

  • 注意

    v-if 和 v-for 在一起使用时,v-for 的优先级高于 v-if

    <div id="app">
    	<span v-for="item in list" v-if="item.age > 24">{{item}}</span>
    </div>
    
    <script>
       var app = new Vue({
           el:"#app",  
           data:{     
              list: [
                  {name: "001", age: 23},
                  {name: "002", age: 24},
                  {name: "003", age: 25}
              ]
           }
       });
    </script>
    

    在这里插入图片描述

    v-else-if、v-else 可以与 v-if 连用,但是之间不允许出现任何其他标签

    <div id="app">
     	<!-- 中间间不允许出现任何其他标签 -->
    	<!-- ########## -->
        <span v-if="num > 80">优秀</span>
        <span v-else-if="num > 60">及格</span>
        <span v-else>不合格</span>
        <!-- ########## -->
    </div>
    
    <script>
        var app = new Vue({
            el:"#app",  
            data:{     
               num: 61
            }
        });
    </script>
    

7. v-show

与 v-if 类似,但是 v-show 不满足条件时是将标签隐藏

在这里插入图片描述

8. v-bind

不使用 v-bind 时,变量会被认为时字符串,而不会解析为值

<!-- 动态绑定 img 地址 -->
<div id="app">
	<!-- 响应的更新属性 -->
    <img v-bind:src="url">
    <!-- 简写形式 -->
    <img :src="url">
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
           url: "http://pic1.win4000.com/pic/0/4a/ff62f14ce3.jpg"
        }
    });
</script>

---------------------------

<!-- 动态改变字体大小 -->
<div id="app">
	<!-- 此处要使用驼峰命名法 即:fontSize 而不能使用 font-size -->
	<span v-bind:style="{fontSize:size}">你好</span>
    <button @click="add">加大</button>
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
           size: "10px",
           num: 10
        },
        methods: {
            add() {
                this.num += 5,
                this.size = this.num + "px"
            }
        }
    });
</script>

在这里插入图片描述

五、常用特性

1. 计算属性 computed

计算属性用法与方法相似,但是计算属性有缓存数据,只有在它的相关依赖发生改变时才会重新求值。而且计算属性一定要有返回值。

<div id="app">
	{{add}}
</div>

<script>
   var app = new Vue({
       el:"#app",
       computed: {
           add() {
              return 10
           }
       }
   });
</script>

2. 监听器 watch

<div id="app">
    <input type="text" v-model="msg">
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data: {
            msg: ""
        },
        watch: {
        	<!-- 监听 msg -->
            msg(newValue, oldValue) {
                console.log("旧数据:" + oldValue + "\t" + "新数据:" + newValue)
            }
        }
    });
</script>

在这里插入图片描述

© 著作权归作者所有

Demo_Null

Demo_Null

粉丝 11
博文 69
码字总数 73484
作品 0
深圳
私信 提问
加载中

评论(0)

真详细,五年Python大咖花了一周归纳出来的python基础知识实例!

1、在Python 语言中,对象是通过引用传递的。 2、多元赋值,其实就是元组赋值 3、编写模块 4、时刻记住一个事实 5、动态类型 6、变量在内存中是通过引用计数来跟踪管理的 7、异常处理 8、所有...

Python新世界
2018/07/21
0
0
自动聊天机器人项目班 [一门课搞定聊天机器人]

百度云盘下载 打造传统NLP聊天机器人 第1课 聊天机器人的基础模型与综述 知识点1:行业与业界综述 实战项目:最简单的Rule-Base聊天机器人 第2课 NLP基础及扫盲 知识点1:NLP基本算法 实战项...

iyx668
2018/07/05
0
0
《Linux基础知识及命令》系列分享专栏

《Linux基础知识及命令》系列分享专栏 本专题详细为大家讲解了Linux入门基础知识,思路清晰,简单易懂。本专题非常适合刚刚学习Linux的小白来学习,通过学习该专题会让你由入门达到中级的水平...

kaixin_code
2018/12/01
115
0
JS Json遍历问题!

JSON数据是这样的: { "ID": 2410, "Name": "医疗机构从业人员行为规范与医学伦理学", "PID": -1, "Require": null, "subject": null, "Childs": [ { "ID": 2411, "Name": "一、医疗机构从业......

enderahkin
2018/01/03
210
1
总结和翻译机器学习和计算机视觉类资料的博客 ( 在微博上看到的)

[置顶]说明 2015年05月25日 之前在csdn写博客,可是csdn经常进不去,所以转战博客园,,就用了一键博客搬家功能,只搬过来66篇,其中Python2.3-原理之语句和语法和Python2.5-原理之模块是手动...

Jr小王子
2015/08/31
206
0

没有更多内容

加载失败,请刷新页面

加载更多

超实用企业级搜索引擎_Elasticsearch(二)基于RESTFul Api操作

Elasticsearch(二)基于RESTFul Api操作 想要进行API操作,必须安装好Elasticsearch,如果没安装的,可以参考上篇去操作一波,再来学习API操作噢! Elasticsearch的 API,我们可以不用每个API语法啥...

煌sir
32分钟前
31
0
版本控制git的简单使用

0.第一次使用时配置: git config --global user.name "your_name" git config --global user.email "your_name@domain.com" 用的最多的: (查看当前git状态) git status 1.初始化: ......

baowang123
47分钟前
20
0
定时器Timer和TimerTask

为什么要使用定时器呢? 比如说一个web应用,如果这个应用规模很大,那它的日志数据是不是很多。如果一直存下来服务器的存储量怕是不行吧,需要隔一段时间删除,那么就需要一个线程每隔一段时...

南柯好萌
今天
18
0
深圳创服机构创成汇投融资对接指南

深圳创服机构创成汇投融资对接指南 一线城市一直是许多创业者创业热土,深圳也不例外,作为发达城市,科技是深圳的标志,也是许多科技创业者向往之地,科技创业者在创业前期面临许多难题,其...

cchlin
今天
35
0
egg学习笔记第六天:使用中间件屏蔽可疑用户

站点有时候想屏蔽一些特定频繁抓取服务器数据的用户,可以放在中间件中去做,用户在指定Ip数组内,则屏蔽,如果不在,则匹配路由规则执行controller。 中间件的概念: 匹配路由前,匹配路由完...

一生懸命吧
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部