Vue学习之路（基础篇）

程序员小王的博客：程序员小王的博客
欢迎点赞 收藏 ?留言
如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕
java自学的学习路线：java自学的学习路线

一. Vue 引言
文章图片

渐进式 JavaScript 框架 --摘自官网

# 渐进式 1. 易用html css javascript上手比较容易 2. 高效开发前端页面 非常高效 3. 灵活开发灵活 多样性 4. 渐进式： a.易用 vue.js 上手非常快 b.灵活 vue生态系统非常强大 vue基础核心 vue组件 c.高效 vue体积小 20kb 超快虚拟dom(网页形成dom树) vue底层深度优化# 总结 Vue 是一个渐进式javascript 框架 js 简化页面js操作 JQuery也是一个js框架，简化js开发 bootstrap 是一个css框架封装css# 后端服务端开发人员: Vue 渐进式javascript框架: 让我们通过操作很少的DOM, 甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM# Vue 作者 尤雨溪国内的 独立开源开发者（自由职业者） 现全职开发和维护vue.js 2014年开发vue2.0目前最火

1.1 vue的优势

通俗定义： 1.vue的出现可以让我们在页面中完成复杂操作，可以简化 dom编程甚至不写任何的dom编程代码 2.vue内置双向绑定机制MVVM机制---前后端分离 html+js-->html+css+JQuery-->vue(前后端分离)-->前端系统+json（ajax）+后端系统

二. Vue入门 2.1 下载Vuejs

//开发版本:src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">//生产版本:src="https://cdn.jsdelivr.net/npm/vue">

2.2 Vue第一个入门应用

src="https://www.it610.com/article/js/vue-min.js">

first page 获取vue中的数据：{{message}}} count的运算值：{{count+3+2+5}} name的值的长度：{{name.length}} username的值大写：{{name.toUpperCase()}} username的值是否为wanghj:{{username== 'wanghj'}}

type="text/javascript"> //vue代码 {id:"liuh"} //创建vue实例（对象） new Vue({ el: "#app",//element 简写 指定vue实例作用范围 data: {//用于给vue实例绑定数据 message: "hello vue!", count:0, name:"王恒杰", username:"wanghj" } })

• 注意：

1、一张html页面只能定义一个vue实例

2、el属性指定vue实例的作用范围，vue只能在实例范围内才会生效

3、data属性是在为vue实例绑定一些数据，可以通过{{data中的属性的名字}}，获取对应属性值
4、vue实例中el属性可以书写任何css选择器，但是推荐id选择器
因为一个vue实例只能作用于一个具体的作用范围

文章图片

2.3 Vue中的复杂数据

基本数据：{{message}}对象数据类型：{{user}}} 对象类型的数据的值：{{user.id}}---{{user.name}}---{{user.age}}数组类型数据：{{names}} 数组第一个值：{{names[0]}} 数组中第二个对象的姓名：{{users[0].name}}

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el: "#app",//指定vue实例 data: {//为实例创建数据 message: "hello whj", //对象类型的数据 user:{id:1,name:"王恒杰",age:18}, //定义数组类型数据 names:["wanghj","yangfj","dengzw","wangcy"], //定义对象类型的数组 users:[ {id:1,name:"王恒杰",age:18}, {id:2,name:"杨福君",age:19}, {id:3,name:"邓正武",age:21} ] } })

文章图片

三. v-text和v-html 3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中** innerText**

>{{ message }} v-text="message">{{msg}}王恒杰王恒杰王恒杰王恒杰v-text="msg">

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app", data:{ message:"hello vue", msg:"whj" } })

# 总结 1.{{}}(插值表达式)和v-text获取数据的区别在于 a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据 b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

• {{}}出现插值闪烁

文章图片

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML

>{{message}}
v-text="message">
v-html="message">xxxxxx

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app", data:{ message:"点击获取数据" } })

3.3 v-html与v-text的区别
(1)例1：

{{msg}}v-text="content">
v-html="content">

src="https://www.it610.com/article/js/vue.js"> > new Vue({ el:"#app", data:{content:" 点我查看详情" } });

文章图片

(2）例2：

两个{}{}(插值表达式)展示:{{message}}

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el:"#app", data:{ message:"vue欢迎你", context:"王恒杰优秀" } })

文章图片

四.vue中事件绑定(v-on) 4.1 绑定事件基本语法
????#### （1）基础

点我

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el:"#app", data:{ message:"王恒杰" }, methods:{ test1:function () { alert("王恒杰长的最好看？"); } } })

文章图片

????- 注意事项：v-on报红问题

文章图片

（2）this的用法

methods:{//在实例中定义函数 test1:function (){ //将data中的score分数+1 this 当前的实例对象 console.log(this); } }

文章图片

（3）通过this.属性名获取属性值进行操作

{{message}} {{score}} 点我

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el:"#app", data:{ message:"王恒杰", score:"99" }, methods:{//在实例中定义函数 test1:function (){ //将data中的score分数+1 this 当前的实例对象 this.score++; } } })

文章图片

{{message}} {{score}} 点我

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el:"#app", data:{ message:"王恒杰", score:"99" }, methods:{//在实例中定义函数 test1:function (){ //将data中的score分数+1 this 当前的实例对象 this.score++; this.test2(); }, test2:function () { console.log("少考一点分，要报表了！！！") } } })

文章图片

#总结: 事件事件源:发生事件dom元素事件: 发生特定的动作click....监听器 发生特定动作之后的事件处理程序 通常是js中函数1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如v-on:click2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名3.在vue中事件的函数统一定义在Vue实例的methods属性中4.在vue定义的事件中this指的就是当前的Vue实例, 日后可以在事件中通过使用this获取Vue实例中相关数据调用methods中相关方法

（4）事件案例

{{message}} {{score}} 点击分数+1 点击分数+任意 点击分数+任意，message拼接一个字符串

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el:"#app", data:{ message:"王恒杰", score:"59" }, methods:{//在实例中定义函数 incr:function(){ this.score++; }, addMore:function (number) { this.score+=number; }, addMoreAndString:function (num,grade,a,b) { this.score+=num; this.message+=grade; console.log(a); console.log(b) } }, obj:function (obj) { console.log(obj) } })

文章图片

注意：
1、双向绑定机制 MVM，Model<==> ViewModel(视图模型，监听器，监听model的改变，一旦改变影响View)==>View(视图) data数据：model {{message}}这个就是view
4.2 Vue中事件的简化语法

{{name}} {{score}}点击+1 点击-1

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el: "#app",//指定vue实例 data: {//为实例创建数据 name:"王恒杰", score:59 }, methods:{ incr(){ this.score++; }, desc(){ this.score--; } } })

文章图片

# 总结: 1.日后在vue中绑定事件时可以通过@符号形式 简化v-on 的事件绑定

4.3 Vue事件函数两种写法

>{{count}}

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app", data:{ count:1, }, methods:{ /*changecount:function(){ this.count++; }*/ changecount(){ this.count++; } } });

# 总结: 1.在Vue中事件定义存在两种写法 一种是 函数名:function(){} 一种是函数名(){} 推荐

• 简化语法及简化函数写法

{{msg}} {{count}}点击年龄+1点击年龄+1点击年龄+N

src="https://www.it610.com/article/js/vue.js"> > new Vue({ el:"#app", data:{ msg:"王恒杰", count:0, }, methods:{ incrementAge:function(){ this.count++; }, //简化函数原定义函数：函数名：function(){}==>函数名（）{} test(n){ this.count+=n; } },});

4.4 Vue事件参数传递

姓名：{{users[1].name}} 分数：{{score}}

src="https://www.it610.com/article/js/vue-min.js"> > new Vue({ el: "#app", data: { users: [ {"id": 1, "name": "王恒杰", "score": 81}, {"id": 2, "name": "杨福君", "score": 60}, {"id": 3, "name": "王晨阳", "score": 82} ], score:81 }, methods: { incr(msg) { this.score++; console.log(msg); } } })

文章图片

# 总结: 1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

• v-on传递参数案例

{{msg}} 年龄：{{count}} 点我每次给年龄+1点我每次给年龄+不确定点我每次给年龄+不确定,同时msg+"你好"点我每次给年龄+不确定,同时msg+"你好"

src="https://www.it610.com/article/js/vue.js"> > new Vue({ el:"#app", data:{ msg:"王恒杰", count:20 }, methods:{ incrementAge:function (){ this.count++; }, //函数上面添加变量 changeAge:function(n){ console.log(n); this.count+=n; }, //传零散数据 changeAgeAndMsg:function(n,msg){ console.log(n); console.log(msg); this.count+=n; this.msg="你好！"+msg; }, //传对象 changeAgeAndMsg2:function(param){ console.log(param); this.count+=param.n; this.msg="你好！"+param.msg; } } });

五.v-show v-if v-bind 5.1 v-show

v-show:用来控制页面中某个标签元素是否展示

天津商业大学欢迎你的加入! 天津商业大学欢迎你的加入这是vue中定义变量true!

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app", data:{ show:false, }, methods:{ //定义时间 showmsg(){ this.show =!this.show; } } })

# 总结 1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏 2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示

百知教育 百知教育欢迎你的加入

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> > const app = new Vue({ el:"#app", data:{ show:false }, methods:{} });

• v-if与v-show的区别

{{msg}} {{msg}}

src="https://www.it610.com/article/js/vue.js"> > new Vue({ el:"#app", data:{ msg:"王恒杰", isshow:false }, methods:{} });

v-show在谷歌里面的控制台 由css实现

文章图片

5.2.1:v-if&&v-show案例

{{msg}} {{msg}} 用来隐藏h2标签 用来显示h1标签 用来显示、隐藏h2用来显示、隐藏h2(直接操作data的属性)

src="https://www.it610.com/article/js/vue.js"> > new Vue({ el: "#app", data: { msg: "王恒杰", isShow: true }, methods: { hidenH2() { this.isShow = false; }, showH2() { this.isShow = true; }, showHiddenH2() { //替换 this.isShow=!this.isShow; // if (this.isShow) { //this.isShow = false; // } else { //this.isShow = true; // }} } });

• v-if&v-show案例

{{msg}}

="js/vue.js"> > new Vue({ el:"#app", data:{ msg:"天津商业大学", isShow:true, }, methods:{ hidden:function (){ this.isShow=false; } }});

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

文章图片

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> >const app = new Vue({ el:"#app", data:{ msg:"天津商业大学官方logo!!!!", showCss:true, }, methods:{ } })

5.4 v-bind 简化写法

? vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

文章图片

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> >const app = new Vue({ el:"#app", data:{ msg:"TJCU官方logo!!!!", showCss:true, src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=https://www.it610.com/article/http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg" }, methods:{ addCss(){ this.showCss= !this.showCss; }, changeSrc(){ this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg"; } } })

六.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

1: 基础获取对象 >{{user.id}}
>{{user.name}}
>{{user.age}}
>{{user.address}}
>{{user.content}}
2:展示对象内容 v-for="(u,key,index) in user">{{key}}-{{u}}-{{index}}遍历普通数组

• {{index}}_{{name}}

遍历对象数组

ID	name	address	age	content
{{user.id}}	{{user.name}}	{{user.address}}	{{user.age}}	{{user.content}}

src="https://www.it610.com/article/js/vue-min.js"> > //vue代码 new Vue({ el: "#app",//vue的实例作用范围 data: {//vue中定义的一系列数据 user:{id: 1, name: "王恒杰", age: 21, address: "天津商业大学", content: "好好学习，天天向上"}, names:["王恒杰","杨福君","邓正武","王晨阳"], users:[ {id: 1, name: "王恒杰", age: 21, address: "天津商业大学", content: "好好学习，天天向上"}, {id: 2, name: "杨福君", age: 21, address: "天津商业大学", content: "好好学习，天天向上"}, {id: 3, name: "王晨阳", age: 21, address: "天津商业大学", content: "好好学习，天天向上"}, ] }, methods: {//vue中定义的一系列函数 方法}})

文章图片

# 总结 1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

七 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

文章图片

• 零散数据建的双向绑定

姓名：
密码：
年龄：
地址：

src="https://www.it610.com/article/js/vue-min.js"> > //vue代码 new Vue({ el: "#app",//vue的实例作用范围 data: {//vue中定义的一系列数据 name:"", pwd:"", age:18, addr:"" }, methods:{ register(){ //获取用户输入的数据 console.log(this.name); console.log(this.pwd); console.log(this.age); console.log(this.addr); // } } })

文章图片

• 对象的双向绑定

姓名：
密码：
年龄：
地址：

src="https://www.it610.com/article/js/vue-min.js"> > //vue代码 new Vue({ el: "#app",//vue的实例作用范围 data: {//vue中定义的一系列数据 user:{} }, methods:{ register(){ //获取用户输入的数据 console.log(this.user.name); console.log(this.user.pwd); console.log(this.user.age); console.log(this.user.addr); console.log(this.user); //发送ajax请求 $.get("url",user,function () {},"json") } } })

文章图片

# 总结 1.使用v-model指令可以实现数据的双向绑定 2.所谓双向绑定 表单中数据变化导致vue实例data数据变化 vue实例中data数据的变化导致表单中数据变化 称之为双向绑定# MVVM架构双向绑定机制 Model: 数据Vue实例中绑定数据VM:ViewModel监听器View:页面页面展示的数据

八. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符 .stop停止 .prevent 阻止 .self独自 .once一次

8.1 stop事件修饰符

用来阻止事件冒泡

• ** 事件冒泡：** 父子标签监听相同的事件属性，触发子标签事件时，同时扩散到父标签，导致父标签事件也运行