Vue.js（持续更新）

最新推荐文章于 2024-12-05 14:25:56 发布

原创最新推荐文章于 2024-12-05 14:25:56 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

5 篇文章

订阅专栏

本文深入解析Vue.js框架的核心特性，包括渐进式开发、MVVM模型、指令使用及组件化开发。涵盖声明式渲染、条件循环、双向数据绑定等关键功能，辅以实例代码，适合初学者快速上手。

1. Vue.js介绍

渐进式框架：说明vue.js的轻量，一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js;
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(可以逐渐引入vue.js开发)。

Vue.js的使用

在html页面使用script引入vue.js的库即可使用；
使用Npm管理依赖，使用webpack打包工具对vue.js应用打包（大型应用推荐此方案）；
Vue-CLI脚手架，使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

Vue.js的功能

1）声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
比如：使用vue.js的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。

2）条件与循环

dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。

3）双向数据绑定

提供v-model 指令，它可以轻松实现Dom元素和数据对象之间双向绑定，
即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

4）处理用户输入

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

5）组件化应用构建

vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

2. Vue.js 模型及示例

Vue.js是MVVM模型的：

Model：负责数据存储
View：负责页面展示
View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

MVVM模型
三层结构代码示例：

1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义vue实例，接管app区域。
4、定义model（数据对象）
5、VM完成在app中展示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<!--实现在body区域显示一个名称：coderwhat扣什-->
<div id="app">
    {{name}}<!--相当于MVVM的view视图，插值表达式-->
</div>
</body>
<script src="vue.min.js"></script><!--引入vue.js的包-->
<script>
    // 编写MVVM中的VM（ViewModel）及model部分部分
    var VM = new Vue({
        el: '#app',  <!--vm接管了app区域的管理-->
        data: {      <!--model数据-->
            name: 'coderwhat扣什'
        }
    });
</script>
</html>

2.1 需要掌握的一些语法

参看在vue-router中写的

3. 常用指令

3.1 v-model, v-bind, v-text, v-on

v-model：在表单控件或者组件上创建数据对象和DOM属性的双向绑定，且仅能在以下元素中使用

input，select， textarea，components（Vue中的组件）

v-bind：将数据对象绑定到dom的任意属性上，且可以给dom绑定一个或多个特性，且v-bind可省略用 “:” 代替

v-text：可以将一个变量的值渲染到指定的元素中,它可以解决插值表达式闪烁的问题

v-on：绑定一个按钮的单击事件，且v-on可省略用 “@” 代替

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js常用指令测试</title>
</head>
<body>
<div id="app">
    <!--{{name}}--><!--当网速较慢的时候，直接使用插值表达式，造成闪烁，即先显示插值表达式，再等到加载完vm后，显示实际值-->
    <span v-text="name"></span><!--当我们用v-text来显示插值表达式时，在vm未加载完前，表达式所在位置显示为空-->
    <input type="text" v-model="num1"> + <!--使用v-model来双向绑定dom和vm-->
    <input type="text" v-model="num2"> =
    <!--<span v-text="Number.parseInt(num1) + Number.parseInt(num2)"></span>-->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button><!--使用v-on监听点击事件，触发change函数，函数在vm中定义-->

    <a v-bind:href="url">百度</a><!--使用v-bind绑定任意属性，且v-bind可省略用":"代替-->
    <a :href="url">百度2</a>
    <div :style="{fontSize: size + 'px'}">测试字体</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    var VM = new Vue({
        el: '#app',
        data: { //model中的数据
            name: 'coderwhat扣什',
            num1: 0,
            num2: 0,
            result: 0,
            url: 'http://www.baidu.com',
            size: 33
        },
        methods: {  //model中定义的方法
            change: function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2) //VM中引用自己数据对象里的变量时，要用this
            }
        }
    });
</script>
</html>

3.2 v-if, v-for

用法及解释参看示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js测试程序</title>
</head>
<body>
<div id="app">
    <ul>
        <!--v-for-->
        <!--key为主键，代表元素自身的唯一的属性值-->
        <!--如果是简单数组，就是索引，如果是复杂数组，就是元素自身的唯一属性-->
		<!--结果引用要使用{{xx}}括起来-->
        <li v-for="(item,index) in list" :key="index" v-if="index % 2 == 0">{{index}}--{{item}}</li>
            <!--遍历list数组，item为数组元素，index为索引，key为主键（索引）-->

        <li v-for="(value,key) in user">{{key}}=={{value}}</li>
            <!--遍历单个key value形式的json数据时，使用value和key代表值和键-->

        <li v-for="(item,index) in userlist":key="item.user.uname">
            <!--遍历数组，数组里是key value形式的json数据，item是数组的每个元素，index为索引，key为元素自身的唯一标识，这里选择uname作为主键-->
            <div v-if="item.user.uname == 'coderwhat2'" style="background-color: green">
                <!--如果满足判断，则执行当前模块-->
                {{index}}=={{item.user.uname}}=={{item.user.age}}
            </div>
            <div v-else=""><!--如果v-if判断为false，则执行v-else模块-->
                {{index}}=={{item.user.uname}}=={{item.user.age}}
            </div>
        </li>

    </ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
    var VM = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4, 5],
            user: {uname: 'coderwhat', age: 10},
            userlist:[
                {user: {uname: 'coderwhat1', age: 10}},
                {user: {uname: 'coderwhat2', age: 20}}
            ]
        }
    });
</script>
</html>

4. export的两种情况

在vue中，如果我们需要在专门的文件中声明变量和方法，那么就需要使用的文件中导入（全局引用），并且在声明完后需要将变量和方法导出；导出通常有两种方式：export 和 export defalut；

方式 1 中，使用 export 导出函数和变量，如果我们要导入使用，就需要使用 import { } 来导入的，如果是导入所有的变量和方法，也可以使用 * 代替；
方式 2 中，使用 module.export 导出，这里如果要引用，就需要使用require来引用；
方式 3 中，使用 export default 导出，在一个文件中，export可以有多个，但是 export default 只能有一个，这里如果我们引用，就不再需要使用 { }，直接使用 import 即可，但有一点就是导入 export default 中的内容只能一个一个的导入，不能使用 *。

//方式 1，a.js
export function test(a){
	return a + 1;
}
export var b = 1;

import {test as addFunc,b} from a.js;	//引用方法 test(10)
import * as fun from a.js;				//引用方法 fun.test(10)
/*-------------------------------------------------------*/

//方式 2，b.js
module.export = {
	test1:function(c){
		return c + 1;
	}
}

var test = require('./b.js'); 		   //引用方法 test.test1(11);
/*-------------------------------------------------------*/

//方式 3，c.js
export default {
	test2:function(d){
		return d + 1;
	}，
	var e = 3;
}

import test2,e from './c.js';//引用方法 test2(9)