ES6以及vue入门知识梳理

最新推荐文章于 2024-04-02 14:37:10 发布

大家都爱学java

最新推荐文章于 2024-04-02 14:37:10 发布

阅读量988

点赞数 2

分类专栏：前端文章标签： vue.js es6 javascript

本文链接：https://blog.csdn.net/Libigtong/article/details/131805014

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一.ES6语法

VUE基于是ES6的，所以在使用Vue之前我们需要先了解一下ES6的语法。

1.什么是ECMAScript

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。为什么会出现这个规范呢？

1.1.JS发展史

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了ECMAscript标准规范。

1.2.ECMAScript发展历史

1998年6月ECMAScript 2.0 发布

1999年12月ECMAScript 3.0 发布

2007年10月ECMAScript 4.0 草案发布

2009年12月ECMAScript 5 发布

2011年6月ECMAScript 5.1 发布

2015年6月ECMAScript 6也就是 ECMAScript 2015 发布了并且从 ECMAScript 6 开始采用年号来做版本即 ECMAScript 2015就是ECMAScript6

ES6就是javascript用的最多语言规范被各大浏览器厂商实现了

2.ES6语法规范

2.1.let & var

都是用来声明变量， let相较于var，他是块级的(局部)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6语法知识</title>
</head>
<body>
let与var的区别
</body>

<script>
    for (var i=0;i<3;i++){
        console.log(i);
    }
    console.log("i="+i);    //正常打印
</script>
</html>

浏览器控制台打印结果：

下面看下let呢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6语法知识</title>
</head>
<body>
let与var的区别
</body>

<script>
    for (let i=0;i<3;i++){
        console.log(i);
    }
    console.log("i="+i);    //这里会报错：i未定义，说明找不到
</script>
</html>

浏览器控制台打印结果：

2.2.const

const声明常量不能修改，如同Java的final修饰符

const c = 4;
c = 5;  //编译报错，不能修改

2.3.解构表达式

简单理解，解构表达式就是将数组或者对象向变量赋值的一种简易写法。

数组赋值

let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]);   //以前的取值
------------------------------------

let [a,b] = arr;    //解构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);

对象赋值

var user = {
    id: 1,
    username:"zs",
    age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age);  //以前的取值
--------------------------------------
var {id,username,age} = user;   //解构表达式，对象赋值，按照属性名赋值。
console.debug(id,username,age);

方法参数赋值

var user = {
    id: 1,
    username:"zs",
    age: 11
}
--------------------------------------
function showUser({id,username,age}){   //解构表达式，方法参数赋值，按参数名赋值。
    console.debug(id,username,age);
}
showUser(user); //把user对象作为参数传给showUser方法

注意：数组用 [ ] 赋值，对象用 { } 赋值

2.4.箭头函数

箭头函数是函数的一种简写

var user = {
    username:"zs",
    age:22,
    showUser:function(){    //以前定义方法的方式
        console.debug(this.username+" "+this.age);
    },
    //--------------------------------------
    showUser2:()=>{ //es6定义方法的方式
        //注意：这里的this指的是window对象了。不能用this.usename
        console.debug(user.username+" "+user.age);        
    },
    showUser3(){    //老版本定义方法的简写
        console.debug(user.username+" "+user.age);        
    }
}
user.showUser();
user.showUser2();
user.showUser3();

2.5.Promise对象

1、什么是Promise？

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果

2、为什么要使用Promise？

最重要也是最主要的一个场景就是ajax和axios请求。
通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，但是我们下一步要执行的代码依赖于上一次请求返回值，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去

3、Promise的好处是什么？

可以避免多层异步调用嵌套问题
Promise 对象提供了简洁的API，使得控制异步操作更加容易

4、Promise的三种状态？

pending：等待中，或者进行中，表示还没有得到结果
resolved：已经完成，表示得到了我们想要的结果，可以继续往下执行
rejected：也表示得到结果，但是由于结果并非我们所愿，因此拒绝执行

这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆

5、用法

看下面示例：

/**=======================================
     Promise 异步请求
     =======================================**/
    //1.执行异步请求
    const p = new Promise((resolve, reject) =>{
            //成功，调用 resolve
            //失败，调用 reject
            // 这里我们用定时任务模拟异步
            setTimeout(() => {
                const num = Math.random();
                // 随机返回成功或失败
                if (num < 0.5) {
                    //2.调用成功的结果回调
                    resolve("成功！num:" + num)
                } else {
                    //3.调用失败的结果回调
                    reject("出错了！num:" + num)
                }
            }, 3000);
        })
    // 调用promise
    p.then(function (msg) {
        //2.调用成功的结果回调
        console.log(msg);
    }).catch(function (msg) {
        //3.调用失败的结果回调
        console.log(msg);
    });

运行结果：控制台3秒后就会打印结果了

二.前端技术了解

1.前端历史

1.1.静态网页

1990 html

1.2.异步刷新-操作dom

1995 JavaScript

1.3.动态网站

Asp、jsp（java）、php等

1.4.Ajax成为主流

异步请求

1.5.Html5

被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。

2.Nodejs介绍

2.1.介绍

官方解释：

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的[脚本语言]

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

简单理解：Nodejs是一个JavaScript运行环境，让JavaScript开发服务端代码成为可能

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven,NPM(管理js插件的)

简单理解：Npm是在Nodejs平台上的js包管理系统，如安装jquery：npm install jquery , 为了方便理解下面有一个对比：

JDK、JRE(java开发、运行平台)	Nodejs(JS运行平台)
后端服务器开发	前端服务器开发
Maven：管理jar包	NPM：管理JS库
SSM架构开发项目	VUE+ElementUI 前段框架

随后，在node的基础上，涌现出了一大批的前端框架：Angular（MVC->MVVM）,Vue(MVVM)等等

2.2.主流前端框架

前端框架三巨头：

Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快，集web前端与app于一身技术
AngularJS:AngularJS还是曾今老大。

三.Nodejs和VUE的安装（`重要`）

vue的安装方式有两种，

手动下载VUE的js库，然后在html中导入JS库进行开发
通过Npm安装VUE的JS库，然后在html中导入使用

第一种方式我们玩其他JS库的时候一直都在用，我们主要使用Npm来安装VUE

1.Nodejs的安装

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具.

1.1.安装Nodejs

Nodejs自带npm，安装好Nodejs就安装好了npm

NodeJs下载：Download | Node.js
安装：双击安装
升级：npm install npm@latest -g [可以不升级]
测试Node：cmd -> node -v
测试Npm： cmd -> npm -v
淘宝镜像：npm config set registry https://registry.npm.taobao.org

1.2.cnpm的使用（可用可不用）

淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟一次以保证尽量与官方服务同步。

安装：命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org
测试cnpm ：cnpm -v

2.VUE的安装

我们在IDEA中创建一个静态项目，通过Terminal来安装VUE

2.1.IDEA准备

IDEA开发工具中我们先安装一下Nodejs插件

然后再配置一下Terminal（Terminal就类似于windows的cmd黑窗口，用来输入一些命令的地方）

2.2.Vue安装和使用

创建一个静态的web项目，叫【vue-demo】，然后安装VUE

VUE官网地址：https://cn.vuejs.org/v2/guide/

我们使用vue的方式有两种：

CDN方式
Npm安装VUE

1、使用CDN方式

直接在页面引入vue依赖，就可以使用vue的语法了

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

当然也可以手动下载该JS库到本地项目，然后引入JS库

2、使用NPM安装VUE

Terminal中使用命令【npm init -y】初始化工程，使之成为vue项目，会在项目中产生一个package.json文件，里面包含项目的相关信息
安装vue

全局安装（不推荐）：npm install -g vue@2.2.2

局部安装（推荐）：npm install vue@2.2.2

安装完毕后项目目录中就会多一个【node_modules】文件夹，里面就是存放整个项目用npm引入的相关依赖文件

目前只使用npm安装了一个vue所以只有一个vue的依赖，如下图所示：

注意：项目的名称不能使用“vue”，不然会报错

2.3. Terminal中npm不可用问题

如果在Terminal中输入npm命令，提示不可用的话，那么可以设置一下IDEA每次以管理员身份运行，如下设置：

四.VUE的基本使用

1.VUE介绍

1.1.Vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架：就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性

1.2.Vue的特点

轻量

Vue.js库的体积非常小的，并且不依赖其他基础库。

数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

指令

内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。

插件化

Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。

组件化，他支持自定义标签

组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用

1.3.MVVM思想

Vue是一款开源的JavaScript MVVM框架。

Vue 引入了MVVM (Model-View-ViewModel)模式，他不同于MVC架构.

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上.

总结一下：MVVM的思想就是数据模型和视图的双向绑定，只要数据变化，视图会跟着变化，只要视图被修改，数据也会跟者变化。

2.VUE入门

在正是开始写代码之前可以先安装一下vue插件，如下：

然后重启一下IDEA，在页面中写vue相关代码时，就会有提示了

2.1.Hello World程序

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

在vue-demo工程中新建【pages】文件夹，用来专门存放html页面，然后新建helloworld.html，内容如下：

<script src="../node_modules/vue/dist/vue.js"></script>
---------------------------------------------------
<body>
    <div id="app">
        <!--取data中的数据-->
        {{ message }}
    </div>
</body>
---------------------------------------------------
<script type="application/javascript">
    var app = new Vue({
        //挂载点，使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

页面就会显示：Hello Vue!

2.2.VUE的el挂载

每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。实例上的属性和方法只能够在当前实例挂载的标签中使用。

2.3.VUE的数据“data”

<body>
    <div id="app">
        <!--取data中的数据-->
        {{ message }}
        <hr/>
        {{ user }}
        <hr/>
        {{ user.username }} //取对象中的数据
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据
        data: {
            message: 'Hello Vue!',  //普通数据
            user:{  //对象数据
                username:"zs",
                age:11
            }
        }
    })
</script>

注意：{{}}取值不能脱离VUE绑定的元素。

2.4.VUE的方法

所有的方法都在methods属性中定义，方法的调用可以通过在VUE绑定的页面元素中使用{{方法名()}} 的方式，也可以在js中通过VUE对象调用.

<body>
    <div id="app">
        <!--        取data中的数据-->
        取普通值：{{ message }}
        <hr/>
        取对象值：{{ user }}
        <hr/>
        取对象中的属性：{{ user.username }}
        <hr/>
        调用方法：{{showUser('参数')}}
    </div>
</body>
<script type="application/javascript">
    var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据 ，所有的数据都在这里绑定
        data: {
            message: 'Hello Vue!',
            user:{
                username:"zs",
                age:11
            }
        },
        //vue的方法，所有的方法都在这里定义
        methods:{
            showUser(args){
                //这里的 this 代表 Vue对象
                console.log(this.user.username);
                console.log(this.user.age);
                console.log(args);
            }
        }
    })

    //调用vue方法
    app.showUser('我也是参数');
</script>

3 小结

1. 在html页面中使用vue.js，分哪几步实现？
    1、引入vue.js依赖
    2、new Vue对象，初始化数据
    3、页面直接使用表达式获取data中的值进行渲染
2. <script>中使用vue的基础结构是什么？
var app = new Vue({
        //使用ID绑定vue到页面的元素
        el: '#app',
        //vue的数据 ，所有的数据都在这里绑定
        data: {
            message: 'Hello Vue!',
        },
        //vue的方法，所有的方法都在这里定义
        methods:{
            abc(){
                console.log(this.message);
            }
        }
    })

4.VUE的表达式

4.1.表达式语法

VueJS表达式写在双大括号内：{{ expression }}。
VueJS表达式把数据绑定到 HTML。
VueJS将在表达式书写的位置"输出"数据。
VueJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

4.2.简单表达式

在{{ }}中可以进行简单的运算.

<div id="app">
    <!--简单表达式  -->
    <h1>{{num1+num2}}</h1>
    <!-- +:运算，字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <!-- -：减法 -->
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <!-- *:乘 -->
    <h1>{{"5"*"5"}}</h1>
    <!-- / 除-->
    <h1>{{5/5}}</h1>
    <h1>{{5/5}}</h1>
 </div>
---------------------------------------------------------------------------------------------------
var app = new Vue({
  //挂载到id=app元素上
    el:"#app",
    num1: 10,
    num2: 20
});

4.3.三目运算符

在{{}}中的表达式可以使用data中数据，可以使用三元运算符,但是不能够使用其他语句

<div id="app">
    <!--三目运算  -->
    {{ show1?"真":"假"}}
</div>

var app = new Vue({
    el : "#app",
    data : {
        show1 : true
    }
});

4.4.字符串操作

直接使用字符串字面值作为字符串对象
使用data中的字符串对象

<div id="app">
    {{"这是字面值"}}<br/>
    {{"这是字面值".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>


var app = new Vue({
    el: "#app",
    data: {
        message: "这是data中的数据"
    }
});

4.5.对象操作

在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toUserString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>

var user = {
    name: "张三",
    age: 29,
    getAge: function () {
        return this.age
    },
    toUserString:function(){
        return "姓名:" + this.name + ",年龄:" + this.age;
    }
};
var app = new Vue({
    el: "#app",
    data: {
        user: user
    }
});

4.6.数组操作

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>

var app = new Vue({
    el: "#app",
    data: {
        hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
    }
});

5. VUE的指令

1. 指令介绍

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
一个标签元素上可以出现多个指令属性
指令只能够出现在Vue对象所挂载的标签范围内的标签中

常用指令如下：

v-model=“表达式” 数据双向绑定
v-text=“表达式”  设置标签中的文本
v-html=“表达式”  设置标签中的html
v-if(else else if)=“表达式”    判断条件    
v-for=“表达式”   循环
v-on=“表达式”    注册事件

2. v-text

语法

<标签 v-text="textValue"></标签>

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "<h1>这是一个Span!</h1>",
        user: {
            username: "lw"
        },
    }
});

给元素填充纯文本内容

3. v-html

通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

语法

<标签 v-html="htmlValue"></标签>

<div id="app">
    <div v-html="message"></div>
</div>

var app = new Vue({
    el: "#app",
    data: {
        message: "<h1>这是HTMl代码</h1>"
    }
});

和v-text的区别是v-html会把内容的html符号进行渲染

4.v-for（重点）

v-for可以作用于：数字，字符串，数组，对象

语法一：普通用法

<标签 v-for="item in 数据源">{{item}}</标签>
=====
item 表示循环数据源后的每一个元素
in 循环的关键字

语法二：带索引

<标签 v-for="(元素,索引) in 数据源">{{元素}}=={{索引}}</标签>

语法三：键，值，索引

这里的键是指对象的属性名，这种方式适合用来遍历对象的所有属性

<标签 v-for="(元素,键,索引) in 对象"></标签>

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
    <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>

var app = new Vue({
    el: "#app",
    data: {
        hobbys : ["爬山","游泳","打豆豆","睡觉"],
        student : {
            name: "小毛",
            age: 29,
            sex: "男",
        },
        num : 10,
        str : "itsource",
    }
});

学生列表案例

<div id="app">
    <table >
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
    </table>
</div>

var app = new Vue({
    el: "#app",
    data: {
        students: [
            {id:1,name: "刘备", age: 29, sex: "男"},
            {id:2,name: "貂蝉", age: 30, sex: "女"},
            {id:3,name: "吕布", age: 31, sex: "男"}
        ]
    }
});

5.v-bind

将data中的数据绑定到标签上，作为标签的属性

语法一

<标签 v-bind:标签属性名字="表达式"></标签>

语法二：简写

<标签 :标签属性名字="表达式"></标签>

语法三：为一个标签绑定一个对象作为该标签的多个属性

<标签 v-bind="对象"></标签>

<div id="app">
    <img src="../img/1.jpg" />
    
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <img :src="imgsrc" :title = "title"/>
    <input v-bind="props"/>
</div>

var app = new Vue({
    el: "#app",
    data: {
        imgsrc: "../img/1.jpg",
        title: "二哈!",
        props: {
            type: "text",
            name: "username",
            value: "来源码，实现高薪就业",
        }
    }
});

6. v-model 指令(`重点`)

在表单控件上创建双向绑定,表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,

当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定

v-model只作用于以下表单: input select textarea

<标签 v-model="表达式"></标签>

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}


  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>

var app = new Vue({
    el: "#app",
    data: {
        inputValue: "初始化的值",
        checkboxValue: ["踢足球"],
        radioValue: "打篮球",
        textareaValue: "你是一个优秀的软件工程师!",
        skills: "java",
    }
});

7. v-show

根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none

 <标签名 v-show="表达式"></标签名>

8. v-if

语法一

<标签名 v-if="表达式"> ... </标签名>

<div id="app">
    <div v-if="show">你看到我了吗？</div>
    <div v-if="score>=90">优秀</div>
</div>

var app = new Vue({
    el: "#app",
    data: {
        "show":true,
        "score":90,
    }
});

语法二

 <标签名 v-if="表达式"></标签名>
 <标签名 v-else></标签名>

前提：v-else一定要在它的前面使用过 v-if，而且只使用过一次

<div id="app">
    <div v-if="isVip">欢迎欢迎!!</div>
    <div v-else>滚动!!</div>
</div>

var app = new Vue({
    el: "#app",
    data: {
        isVip: true
    }
});

语法三

<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>

<div id="app">
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>

var app = new Vue({
    el: "#app",
    data: {
        score: 80
    }
});

9. v-on

使用v-on指令注册事件

<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
  简写方式
<标签 @事件句柄="表达式或者事件处理函数"></标签>

<div id="app">
  <h1>结果</h1>
    {{num}}
  <h1>表达式的写法</h1>
 <button v-on:click="num++">按钮</button><br/>
 <button @click="num++">按钮</button><br/>

 <h1>事件处理函数</h1>
 <button v-on:click="myclick">按钮</button><br/>
 <button @click="myclick">按钮</button><br/>
</div>

var app = new Vue({
    el: "#app",
    data: {
        num:0
    },
    methods:{
        myclick:function(){
            app.num++;
            console.log(this);
        }
    }
});

大家都爱学java

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ES6以及vue入门知识梳理

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范。为什么会出现这个规范呢？Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果官方解释：Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动。
复制链接

扫一扫