一、 Vue.js简介
一、 Vue.js简介
1. Vue.js是什么
**Vue.js**也称为Vue，读音/vju:/，类似view，错误读音v-u-e
版本：v1.0 v2.0
+ 是一个构建用户界面的框架
+ 是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定
+ 数据驱动+组件化的前端开发（核心思想）
+ 通过简单的API实现**响应式的数据绑定**和**组合的视图组件**
+ 更容易上手、小巧
参考：[官网](https://cn.vuejs.org/)
2.vue和angular的区别
2.1 angular
+ 上手较难
+ 指令以ng-xxx开头
+ 所有属性和方法都存储在$scope中
+ 由google维护
2.2 vue
+ 简单、易学、更轻量
+ 指令以v-xxx开头
+ HTML代码+JSON数据，再创建一个vue实例
+ 由个人维护：**尤雨溪**，华人，目前就职于阿里巴巴，2014.2开源了vue.js库
共同点：`都不兼容低版本IE`
对比：GitHub上vue的stars数量大约是angular的两倍
二、起步
1. 下载核心库vue.js
npm info vue
npm init --yes
cnpm install vue --save
vue2.0和1.0相比，最大的变化就是引入了Virtual DOM（虚拟DOM）,页面更新效率更高，速度更快
2. Hello World（对比angular）
2.1 angular实现
js:
let app=angular.module('myApp',[]);
app.controller('MyController',['$scope',function($scope){
$scope.msg='Hello World';
}]);
html:
<html ng-app="myApp">
<div ng-controller="MyController">
{{msg}}
</div>
</html>
2.2 vue实现
js:
new Vue({
el:'itany', //指定关联的选择器
data:{ //存储数据
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>
3. 安装vue-devtools插件，便于在chrome中调试vue
直接将vue-devtools解压缩，然后将文件夹中的chrome拖放到扩展程序中
//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue启动时生成生产消息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Hello World</title><script src="js/vue.js"></script><script>window.οnlοad=function(){//配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为falseVue.config.devtools=false;Vue.config.productionTip=false; //阻止vue启动时生成生产消息var vm=new Vue({el:'#itany', //指定关联的元素data:{ //存储数据msg:'Hello World'}});}</script>
</head>
<body><div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 --></div><h3>{{msg}}</h3>
</body>
</html>三、 常用指令
1. 什么是指令？
用来扩展html标签的功能
angular中常用的指令：
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if
2. vue中常用的指令
+ v-model
双向数据绑定，一般用于表单元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用指令：v-model</title><script src="js/vue.js"></script><script>window.οnlοad=function(){new Vue({// el:'.itany',el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的data:{name:'', //即使没有值，也不能省略，报错age:21,flag:true,nums:[12,4,23,5],user:{id:9527,name:'唐伯虎'}}});}</script>
</head>
<body><!-- <div id="itany"> --><!-- <div class="itany"> --><div>用户名：<input type="text" v-model="name"><br>{{name}} <br>{{age}} <br>{{flag}} <br>{{nums}} <br>{{user}}</div>
</body>
</html>+ v-for
对数组或对象进行循环操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隐式变量，如$index、$key
在vue2.0中去除了隐式变量，已被废除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用指令：v-for</title><script src="js/vue.js"></script><script>window.οnlοad=function(){new Vue({el:'#itany',data:{arr:[12,4,5,34,2,11],user:{id:9527,name:'唐伯虎',age:25},arr2:[12,4,5,34,2,11,12],users:[{id:9527,name:'唐伯虎',age:25},{id:1001,name:'秋香',age:22},{id:1002,name:'石榴姐',age:24}]}});}</script>
</head>
<body><div id="itany"><!-- {{arr}} --><ul><!-- 普通循环 --><!-- <li v-for="value in arr">{{value}}</li> --><!-- <li v-for="value in user">{{value}}</li> --><!-- 键值循环 --><!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> --><!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> --><!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by --><!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> --><li v-for="(user,index) in users">{{index+1}},{{user.id}},{{user.name}},{{user.age}}</li></ul></div>
</body>
</html>+ v-on
用来绑定事件，用法：v-on:事件="函数"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用指令：v-on</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{ //存储数据arr:[12,34,45,23,5]},methods:{ //存储方法show:function(){console.log('show方法');},add(){// console.log(this); //this表示当前vue实例// console.log(this===vm); //truethis.arr.push(666); //使用this访问当前实例中的成员// this.show();}}});}</script>
</head>
<body><div id="itany"><!-- <button οnclick="show()">点我</button> --><button v-on:click="show">点我</button><button v-on:click="add()">向数组中添加一个元素</button><br>{{arr}}<hr><button v-on:mouseover="show">鼠标经过</button><button v-on:dblclick="show">鼠标双击</button></div>
</body>
</html>+ v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常用指令：v-show</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{ flag:true},methods:{ change(){this.flag=!this.flag;}}});}</script>
</head>
<body><div id="itany"><!-- <button v-on:click="change">隐藏</button> --><button v-on:click="flag=!flag">隐藏</button><hr><div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div></div>
</body>
</html>四、 练习：用户管理
使用BootStrap+Vue.js
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习：用户管理</title><script src="js/vue.js"></script><link rel="stylesheet" href="bootstrap/bootstrap.min.css"><script src="bootstrap/jquery.min.js"></script><script src="bootstrap/bootstrap.min.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'.container',data:{ users:[{name:'tom',age:24,email:'tom@itany.com'},{name:'jack',age:23,email:'jack@sina.com'}],user:{},nowIndex:-1 //当前要删除项的索引},methods:{ addUser(){this.users.push(this.user);this.user={};},deleteUser(){if(this.nowIndex===-1){ //删除所有this.users=[];}else{this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个}}}});}</script>
</head>
<body><div class="container"><h2 class="text-center">添加用户</h2><form class="form-horizontal"><div class="form-group"><label for="name" class="control-label col-sm-2 col-sm-offset-2">姓 名：</label><div class="col-sm-6"><input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名"></div></div><div class="form-group"><label for="age" class="control-label col-sm-2 col-sm-offset-2">年 龄：</label><div class="col-sm-6"><input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄"></div></div><div class="form-group"><label for="email" class="control-label col-sm-2 col-sm-offset-2">邮 箱：</label><div class="col-sm-6"><input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱"></div></div><div class="form-group text-center"><input type="button" value="添 加" class="btn btn-primary" v-on:click="addUser"><input type="reset" value="重 置" class="btn btn-primary"></div></form><hr><table class="table table-bordered table-hover"><caption class="h3 text-center text-info">用户列表</caption><thead><tr><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">邮箱</th><th class="text-center">操作</th></tr></thead><tbody><tr v-for="(user,index) in users" class="text-center"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td>{{user.email}}</td><td><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button></td></tr><tr><td colspan="5" class="text-right"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button></td></tr></tbody></table><!-- 模态框，弹出框 --><div class="modal fade" id="del"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4><h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4></div><div class="modal-body text-center"><button class="btn btn-primary" data-dismiss="modal">取消</button><button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button></div></div></div></div></div>
</body>
</html>五、 事件和属性
1. 事件
1.1 事件简写
v-on:click=""
简写方式 @click=""
1.2 事件对象$event
包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件简写和事件对象$event</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',methods:{ show(){console.log(111);},print(e){// console.log(e);console.log(e.target.innerHTML); //DOM对象console.log(this);}}});}</script>
</head>
<body><div id="itany"><button v-on:click="show">点我</button><button @click="show">点我</button><hr><button @click="print($event)">Click Me</button></div>
</body>
</html>1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象
b)vue方式，不依赖于事件对象
@click.stop
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件冒泡和默认行为</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',methods:{ show(){console.log(111);// e.stopPropagation();},print(){console.log(222);},write(){console.log(333);},study(){console.log(444);// e.preventDefault();}}});}</script>
</head>
<body><div id="itany"><div @click="write"><p @click="print"><!-- <button @click="show($event)">点我</button> --><button @click.stop="show">点我</button></p></div><hr><!-- <a href="#" @click="study($event)">俺是链接</a> --><a href="#" @click.prevent="study">俺是链接</a></div>
</body>
</html>1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title><script src="js/vue.js"></script><script>/*** 自定义键位别名*/Vue.config.keyCodes={a:65,f1:112}window.οnlοad=function(){let vm=new Vue({el:'#itany',methods:{ show(e){console.log(e.keyCode);if(e.keyCode==13){console.log('您按了回车');}},print(){// console.log('您按了回车');// console.log('您按了方向键上');console.log('11111');}}});}</script>
</head>
<body><div id="itany"><!-- 键盘事件：@keydown、@keypress、@keyup --><!-- 用户名：<input type="text" @keydown="show($event)"> --><!-- 简化按键的判断 --><!-- 用户名：<input type="text" @keydown="show($event)"> --><!-- 用户名：<input type="text" @keydown.13="print"> --><!-- 用户名：<input type="text" @keydown.enter="print"> --><!-- 用户名：<input type="text" @keydown.up="print"> -->用户名：<input type="text" @keydown.f1="print"><!-- 事件修饰符 --><button @click.once="print">只触发一次</button></div>
</body>
</html>1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
2. 属性
2.1 属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写：
v-bind:src="" 简写为 :src=""
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性绑定和属性的简写</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',w:'200px',h:'100px'}});}</script>
</head>
<body><div id="itany"><!-- <img src="{{url}}"> --><!-- 可以直接访问vue中的数据，不需要使用{{}} --><!-- <img v-bind:src="url"> --><img :src="url" :width="w" :height="h"></div>
</body>
</html>2.2 class和style属性
绑定class和style属性时语法比较复杂：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>class和style属性</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{bb:'aa',dd:'cc',flag:true,num:-2,hello:{aa:true,cc:true},xx:{color:'blue',fontSize:'30px'},yy:{backgroundColor:'#ff7300'}}});}</script><style>.aa{color:red;font-size:20px;}.cc{background-color:#ccc;}</style>
</head>
<body><div id="itany"><!-- class属性--><!-- <p class="aa">南京网博</p> --> <!-- 可以访问，普通css方式 --><!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 --><!-- 方式1:变量形式 --><!-- <p :class="bb">南京网博</p> --><!-- 方式2：数组形式，同时引用多个 --><!-- <p :class="[bb,dd]">南京网博</p> --><!-- 方式3：json形式，常用！！！ --><!-- <p :class="{aa:true,cc:flag}">南京网博</p> --><!-- <p :class="{aa:num>0}">南京网博</p> --><!-- 方式4：变量引用json形式 --><!-- <p :class="hello">南京网博</p> --><!-- style属性--><p :style="[xx,yy]">itany</p></div>
</body>
</html>六、 模板
1. 简介
Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据
模板就是{{}}，用来进行数据绑定，显示在页面中
也称为Mustache语法
2. 数据绑定的方式
a.双向绑定
v-model
b.单向绑定
方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决
方式2：使用v-text、v-html
3. 其他指令
v-once 数据只绑定一次
v-pre 不编译，直接原样显示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="js/vue.js"></script><script>window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{msg:'welcome to itany'},created:function(){// alert(111);}});}</script><style>/* 必须配置css样式，否则不生效 */[v-cloak]{ display:none;}</style>
</head>
<body><div id="itany"><input type="text" v-model="msg"><h3>aaa<span v-cloak>{{msg}}</span></h3><h3 v-text="msg"></h3><h3 v-html="msg"></h3><h3 v-once>{{msg}}</h3><h3 v-pre>{{msg}}</h3></div>
</body>
</html>七、 过滤器
1. 简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：{{ data | filter1(参数) | filter2(参数)}}
2. 关于内置过滤器
vue1.0中内置许多过滤器，如：
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已经删除了所有内置过滤器，全部被废除
如何解决：
a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
b.使用自定义过滤器
3. 自定义过滤器
分类：全局过滤器、局部过滤器
3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
3.l 自定义局部过滤器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义过滤器</title><script src="js/vue.js"></script><script>/*** 自定义全局过滤器*/Vue.filter('addZero',function(data){// console.log(data);return data<10?'0'+data:data;});/*Vue.filter('number',(data,n) => {// console.log(data,n);return data.toFixed(n);});*/Vue.filter('date',data => {let d=new Date(data);return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();});window.οnlοad=function(){let vm=new Vue({el:'#itany',data:{currentTime:Date.now()},filters:{ //局部过滤器number:(data,n) => {return data.toFixed(n);}}});}</script>
</head>
<body><div id="itany"><!-- <h3>{{3 | addZero}}</h3> --><!-- 课后作业：自己实现toFiexed()四舍五入的功能 --><h3>{{12.345678 | number(2)}}</h3><!-- <h3>{{12.045 | number(2)}}</h3> --><h3>{{currentTime | date}}</h3></div>
</body>
</html>一、 Vue.js简介相关推荐
- Vue.js简介和入门使用
vuejs 简介 Vue.js (vuejs.org) 渐进式 JavaScript 框架 vuejs 是基于MVVM 思想的框架 vuejs 是以数据驱动为主的框架 vuejs 是以组件化进行开发的 ...
- Vue.js 简介及核心特性
一.Vue是什么 Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架.[这里有个小故事,在注册view时发现被占用了 ...
- Vue.js 简介与入门指南
- vue.js 入门，简介
vue的源代码下载--开发版本和生产版本 https://cn.vuejs.org/js/vue.js https://cn.vuejs.org/js/vue.min.js vue中文学习官网 htt ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- js 移动端 滑块验证码插件_VUE技术详解，Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- html折叠菜单列子,基于Vue.js+bootstrap4的左侧可伸缩式菜单
一.Vue.js简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- 第二节：简易安装 和 快速入门Vue.js
上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了. 1 简易安装 要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高 ...
- 在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录 介绍 先决条件 Node.js的介绍 您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介 安装Vue.js V4 NET Core介绍 安装Visua ...
- 使用ASP.NET Core MVC的Vue.Js
目录 内容主题 VUE.JS简介 DOT NET Core 下载和安装Visual Studio 2017 ASP.NET Core Spa模板 基础知识和设置 Node.js 节点包管理(NPM) ...
最新文章
- Centos 7 让docker飞一会儿
- 华为harmonyos 2.0,华为王成录博士：HarmonyOS 2.0给消费者不一样的体验
- 构建一个增量推荐系统
- 用YII实现多重查询(基于tag)
- 拓展欧几里得模板/求逆元模板（java）
- CentOS下禁止防火墙
- oracle触发器中保存临时数据,Oracle使用游标触发器存储实操
- java编写正则表达式_如何用Java编写最快的表达式评估器之一
- 【HDU - 5455】Fang Fang（水题，有坑）
- 如何开展工业视觉检测？Halcon 圣经告诉你答案
- APP界面的数据可视化设计临摹学习模板
- 安卓飞机大战（六） 动态Gif图的添加
- Elasticsearch海量搜索引擎
- Web渗透攻击实战（2）—获取网站后台登录用户名密码
- android 置灰不可点击,android 按钮置灰效果
- 宏源药业上市破发：跌幅16% 公司市值168亿超募17亿
- 新任亚马逊掌舵者凭什么是他？
- YOLO目标检测算法轻量化改进的过程记录
- Cannot access memory at adress 0xbf9
- 必看!一名全栈工程师的必备“百宝箱”