vue快速复习手册

1.基本使用

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>Vue的基本使用</title>

    <!-- 01.导包 -->

    <script src="./js/vue.js"></script>

    <script>

        // 03. 监听

        window.onload = function () {

            // 04:创建vue

            var vm = new Vue({

                // 绑定操作对象

                el:'.box',

                data: {

                    content: 'Vue的基本使用'

                }

            });

        }

    </script>

</head>

<body>

    <!-- 02:div标签(设置模板变量)-->

    <div class="box">{{content}}</div>

</body>

</html>

2.基本语法

2.1.操作数据

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>操作数据</title>

    <script src="./js/vue.js"></script>

    <script>

        window.onload = function () {

            // uve对象

            var vm = new Vue({

                el:'.box',

                data:{

                    content:'操作数据'

                }

            });

        }

    </script>

</head>

<body>

    <div class="box">

        <p>{{content}}</p>

    </div>

</body>

</html>

2.2.修改属性

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>02-操作数据</title>

    <script src="./js/vue.js"></script>

    <script>

        window.onload = function () {

            // uve对象

            var vm = new Vue({

                el:'.box',

                data:{

                    content:'操作数据',

                    linkdata:'百度链接',

                    url:'http://www.baidu.com'

                }

            });

        }

    </script>

</head>

<body>

    <div class="box">

        <!-- 第一种. v-bind: -->

        <!-- <a v-bind:href="url" target="_blank">{{linkdata}}</a> -->

        <!-- 第二种. : -->

        <a :href="url" target="_blank">{{linkdata}}</a>

        <p>{{content}}</p>

    </div>

</body>

</html>

2.3.调用方法

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>操作数据</title>

    <script src="./js/vue.js"></script>

    <script>

        window.onload = function () {

            // uve对象

            var vm = new Vue({

                // 标签对象

                el:'.box',

                // 数据和属性

                data:{

                    content:'操作数据',

                    linkdata:'百度链接',

                    url:'http://www.baidu.com',

                    count:0

                },

                // 方法

                methods: {

                    fnAddClick:function () {

                        // 跨域

                       this.count += 1;

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div class="box">

        <!-- 第一种.v-on: -->

        <!-- <button v-on:click='fnAddClick'>计数器:{{count}}</button> -->

        <!-- 第二种.@ -->

        <button @click='fnAddClick'>计数器:{{count}}</button>

        <a v-bind:href="url" target="_blank">{{linkdata}}</a>

        <p>{{content}}</p>

    </div>

</body>

</html>

小结：v-bind:简写: v-on: 简写@

3.条件渲染

关键字：v-if，v-else-if，v-else，v-show

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>条件渲染</title>

    <script src="./js/vue.js"></script>

    <script>

        window.onload = function () {

            var vm = new Vue({

                el:'.box',

                data:{

                    flag:4

                }

            });

        }

    </script>

</head>

<body>

    <div class="box">

        <!-- 01:v-if -->

        <!-- <p v-if='flag==1'>01:v-if</p> -->

        <!-- 02:v-else-if -->

        <!-- <p v-else-if='flag==2'>02:v-else-if</p> -->

        <!-- 03:v-else-if -->

        <!-- <p v-else-if='flag==3'>03:v-else-if</p> -->

        <!-- 04:v-else -->

        <!-- <p v-else>04:v-else</p> -->

        <!-- 05:v-show -->

        <!-- <p v-show='flag==3'>05:v-show</p> -->

    </div>

</body>

</html>

小结：

1.v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的。

2.注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突

4.列表渲染

关键字：普通列表，列表下标，有且只有一个对象，对象列表

<script>

    window.onload = function () {

    var vm = new Vue({

        el:'.box',

        data:{

            // 01: 普通列表

            itemList:[1, 2, 3, 4, 5],

            // 02: 列表下标

            indexList:['a','b','c','d'],

            // 03: 有且只有一个对象

            objData:{

                name:'小明',

                age:19

            },

            // 04: 对象列表

            objList:[

                {

                    name:'小明',

                    age:20

                },

                {

                    name:'小红',

                    age:21

                }

            ]

        }

    });

}

</script>

普通列表

<li v-for='item in itemList'>{{item}}</li>

列表下标

<li v-for='(item,index) in indexList'>角标{{index}}==数值{{item}}</li>

有且只有一个对象

<li v-for='item in objData'>{{item}}</li>

<li v-for='(obj,key) in objData'>属性值{{obj}}-----属性名{{key}}</li>

对象列表

<li v-for='obj in objList'>属性值1:{{obj.name}}==属性值2:{{obj.age}}</li>

小结：该指令适用于任何html标签

5.表单输入绑定（双向数据绑定）

关键字：单行文本框、多行文本框、单选框、多选框、下拉框

<!-- 01.单行文本框 -->

        <input type="text" v-model='content'>

        <p>{{content}}</p>

<!-- 02.多行文本框 -->

        <textarea v-model='content'></textarea>

        <p>{{content}}</p>

<!-- 03.单选框 -->

        <input type="radio" name="sex" value="男" v-model='content'>男

        <input type="radio" name="sex" value="女"  v-model='content'>女

        <p>{{content}}</p>

<!-- 04.多选框 -->

        <input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭

        <input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉

        <input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆

        <p>{{like}}</p>     

<!-- 05.下拉框 -->

        <select name="addr" v-model='address'>

            <option value="北京">北京</option>

            <option value="上海">上海</option>

            <option value="广州">广州</option>

            <option value="深圳">深圳</option>

        </select>

        <p>{{address}}</p>

小结：可以用 v-model 指令在表单<input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

6.ES6语法

关键字：语法介绍、变量声明、对象的简写、箭头函数

6.1.变量声明

let和const是新增的声明变量的开头的关键字，在这之前，变量声明是用var关键字，这两个关键字和var的区别是，它们声明的变量没有预解析，let和const的区别是，let声明的是一般变量，const申明的常量，不可修改。

var

console.log(iNum1);

// 在ES5中 声明变量使用var

var iNum1 = 10;

// 结果为:undefined, 因为使用 var 声明的变量, 有预解析

let

console.log(iNum1);

// 在ES6中 声明变量可以使用let

let iNum1 = 10;

// 查看后会发现报错:iNum1 is not defined, 因为使用let 声明的变量, 没有了预解析

const

const iNum1 = 10;

iNum1 = 20;

// 查看后会发现报错:Assignment to constant variable, 因为使用const声明的变量, 不允许重新赋值

6.2.ES6的对象的简写

ES5的写法

// ES5的对象写法

var oObj = {

    name:'小明',

    age:20,

    fnGetName: function () {

        alert(this.name);

    }

}

// 调用

oObj.fnGetName();

或者

// 创建一个空对象

var oObj = {};

// 添加属性

oObj.name = '小明';

oObj.age = 20;

// 添加方法

oObj.fnGetName = function () {

    alert(this.name);

}

// 调用

oObj.fnGetName();

ES6的写法（需要注意的是, 实现简写,有一个前提,必须变量名属性名一致）

// 定义两个变量

var name = '小明';

var age = 20;

// 创建对象

var oObj = {

    name,

    age,

    fnGetName: function () {

        alert(this.name);

    }

};

// 调用

oObj.fnGetName();

6.3.ES6的箭头函数

1.定义函数新的方式：

// 无参数无返回值

var fnTest = ()=> {

    alert('无参数无返回值');

}

// 一个参数无返回值

var fnTest = a => {

    alert(a + b);

}

// 有参数有返回值

var fnTest = (a,b)=> {

    return a + b;

}

2.改变this的指向

如果层级比较深的时候, this的指向就变成了window, 这时候就可以通过箭头函数解决这个指向的问题

// 定义一个对象

var oObj = {

    name:'小明',

    fnAlert: function () {

        setTimeout(()=>{

            alert(this.name);

        }, 1000);

    }

}

// 调用方法

oObj.fnAlert();

7.Vue对象实例生命周期

beforeCreate
- vm对象实例化之前
created
- vm对象实例化之后
beforeMount
- vm将作用标签之前
mounted(重要时机初始化数据使用)
- vm将作用标签之后
beforeUpdate
- 数据或者属性更新之前
updated
- 数据或者属性更新之后

完

vue快速复习手册的更多相关文章

Unity 游戏框架搭建 2019 (十八~二十) 概率函数 & GameObject 显示、隐藏简化 & 第二章小结与快速复习
在笔者刚做项目的时候,遇到了一个需求.第一个项目是一个跑酷游戏,而跑酷游戏是需要一条一条跑道拼接成的.每个跑道的长度是固定的,而怪物的出现位置也是在跑道上固定好的.那么怪物出现的概率决定一部分关卡的难 ...
Github快速入门手册
最近在试用Github,开源的思想也让人觉得把一些经验分享出来是非常好的事情.附件是doc文件,如有需要请注意查收.希望能对你有帮助. GITHUB基于互联网的版本控制快速入门手册如有不妥,欢迎指正 ...
H3 BPM J.V10.6.1 安装及快速使用手册
直接进入地址下载:http://bbs.h3bpm.com/read.php?tid=3103&fid=30,需要注册. 按照文档"H3 BPM J.V10.6.1 安装及快速使用手 ...
2. Apache Axis2 快速学习手册之概览
这篇博文和大家一起学习下Apache Axis2 官方文档的快速指南篇英文原文:http://axis.apache.org/axis2/java/core/docs/quickstartguide ...
（私人收藏）[开发必备]最全JQuery离线快速查找手册（可查询可学习，带实例）
[开发必备]最全JQuery离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/16bUd4iA3p0c5RHbzaC60IQe4zh
（私人收藏）[开发必备]最全Java离线快速查找手册（可查询可学习，带实例）
(私人收藏)[开发必备]最全Java离线快速查找手册(可查询可学习,带实例) https://pan.baidu.com/s/1L54VuFwCdKVnQGVc8vD1TQnwmj java手册 Ja ...
vue 快速入门系列 —— 虚拟 DOM
其他章节请看: vue 快速入门系列虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
vue 快速入门系列
vue 快速入门(未完结,持续更新中...) 前言为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...
vue 快速入门系列 —— 初步认识 vue
其他章节请看: vue 快速入门系列初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

随机推荐

最常见的 Git 问题和操作清单汇总
最常见的 Git 问题和操作清单汇总引言本文整理自工作多年以来遇到的所有 Git 问题汇总,之前都是遗忘的时候去看一遍操作,这次重新整理了一下,发出来方便大家收藏以及需要的时候查找答案. 一.必备 ...
多个div使用display:inline-block时候div之间有间隔
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带 ...
Redis分布式锁的实现原理
原文链接:https://mp.weixin.qq.com/s/y_Uw3P2Ll7wvk_j5Fdlusw
Python—实现钉钉后台开发
二.实现钉钉免登流程免登流程分四步:1.前端获取钉钉免登授权码code:2.后端获取access_token:3.使用授权码code和access_token换取用户userid:4.通过acces ...
Linux—磁盘管理
https://www.cnblogs.com/new-journey/p/10076387.html https://www.cnblogs.com/jiangxiaoxian/p/9610903. ...
VirtualBox设置自动适应屏幕
设备 --> 安装增强功能等待安装完成,就能自动适应屏幕大小了
北京地区dns
为了提高网页的访问打开速度我们可以配置一些解析速度较快的dns,下面小编搜集了一些常用的DNS地址,可以根据自己所在地区可以选择不同的dns 首先可以在我们的客户端打开cmd命令行工具测试一些,去pi ...
Docker容器数据卷介绍和命令
是什么一句话:有点类似我们Redis里面的rdb和aof文件先来看看Docker的理念: * 将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的 * ...
matplotlib---修改图例
matplotlib.pyplot.legend(*args, **kwargs) 参考文献: [1]python - matplotlib.legend()函数用法解析 - qq_33221533的 ...
python 格式化打印
#coding=utf-8 import time; start_time = time.time()for a in range(0,1001): for b in range(0,1001): f ...

vue快速复习手册

vue快速复习手册的更多相关文章

随机推荐

热门专题