您现在的位置是:首页 > 文章详情

【Vue_01】基础知识

日期:2020-02-17点击:337

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

在这里插入图片描述

原文链接:https://my.oschina.net/chinaSoftware/blog/3167556
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章