vue快速上手指北
1.Vue简介
1.1. Vue是什么
Vue.JS是优秀的前端 JavaScript 框架
库和框架的区别:
-
库(如jQuery)
库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
-
框架
框架提供了一套完整解决方案,
使用者要按照框架所规定的某种规范进行开发
1.2. 为什么要学习 Vue
随着项目业务场景的复杂,传统模式（html+jquery）已无法满足需求
就出现了Angular/React/Vue等框架
- 企业需求
- 主流框架之一(React Angular Vue)
- 易用、灵活、高效
1.3. Vue 能做什么
- 最大程度上解放了 DOM 操作
- 单页web项目(SinglePageApplication项目,例如Worktile官网)开发
- 传统网站开发
1.4. 核心特性
- 双向数据绑定
- 通过 指令 扩展了 HTML，通过 表达式 绑定数据到 HTML
- 解耦视图与数据
- 可复用组件
- 虚拟DOM
- M-V-VM模型
- 数据驱动视图
1.5. 学习链接
2. Vue快速入门
2.1. 安装Vue
直接下载源码然后通过路径引入
2.2. Vue入门程序 HelloWorld
作用:将数据应用在html页面中
- body中,设置Vue管理的视图
<div id="app"></div> - 引入vue.js
- 实例化Vue对象
new Vue(); - 设置Vue实例的选项:如el、data...
new Vue({选项:值}); - 在
<div id='app'></div>中通过{{ }}使用data中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue快速入门</title>
</head>
<body>
<!--设置vue管理的视图-->
<div id="app">
<!--在视图里使用Vue实例中data里面的list数据-->
<p>{{ list }}</p>
</div>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<!--实例化vue对象-->
<script type="text/javascript">
new Vue({
el : '#app',
data : {
list : '我是模拟发起ajax请求后.从服务器端返回的数据'
}
});
</script>
</body>
</html>
2.3. Vue参数详解
el
el作用:指定当前Vue实例所管理的视图,值通常是id选择器
- el的值可以是css选择器,通常是id选择器
- el的值不能是html标签和body标签
data
data作用:指定当前Vue实例的数据对象
- data中的数据是响应式数据
- 值可以是一个对象
- 所有数据部分写在data中
- 在当前Vue实例所管理的视图中通过属性名使用data中的数据
- 可以通过vm.$data.属性 访问数据
- 可以通过vm.属性 访问数据(更简单)
methods
methods作用:指定当前Vue实例中的方法
-
可以直接通过vm实例访问这些方法，
-
方法中的 this 自动绑定为 Vue 实例。
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--设置vue所管理的视图-->
<div id="a">
<!--在vue视图中, 使用Vue实例中data里面的数据-->
{{msgA}} --- {{fn1()}}
</div>
<!--引入Vue.js-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
<!--创建Vue实例-->
const vm = new Vue({
el:"#a",
data:{
msgA:'第一个Vue实例对象'
},
methods:{
fn1:function(){
console.log(this.msgA);
console.log('vm实例中的methods里的fn1方法被调用');
},
fn2:function(){
this.fn1();
console.log('fn2方法被调用');
},
}
});
</script>
</body>
</html>
插值表达式
作用:会将绑定的数据实时的显示出来:
- 通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
- 在插值表达式中不能写js语句, 例如
var a = 10; 分支语句 循环语句
格式
{{}}
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插值表达式</title>
</head>
<body>
<!-- 设置Vue所管理的视图 -->
<div id= "app">
<!-- 获取Vue对象中data里的数据 -->
{{name}}
<p>{{name}}</p>
<p>{{name+'哈哈哈'}}</p>
<p>{{name.split("")}}</p>
<p>{{age>18?'成年':'未成年'}}</p>
</div>
<!-- 加载Vue.js文件 -->
<script type="text/javascript" src="js/vue.js"></script>
<!-- 创建Vue对象 -->
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
name:'迪丽热巴',
age:20
}
});
</script>
</body>
</html>
3. Vue常用指令
Vue框架提供的语法, 扩展了html标签的功能、大部分的指令的值是js的表达式. 用于取代DOM操作
3.1. v-text和v-html
很像innerText和innerHTML
document.getElementById("mydiv").innerHTML = "<h1>海马</h1>"; // 有html效果
document.getElementById("mydiv").innerText = "<h1>海马</h1>"; // 没有html效果, 将整个作为字符串处理
- v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-text和插值表达式的区别
- v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 设置vue所管理的视图 -->
<div id="app">
<!-- 获取Vue对象中data里的数据 -->
<p>{{text}},我是p标签中的内容</p>
<p v-text="text">我是p标签中的内容</p>
<p v-text="html">我是p标签中的内容</p>
<p v-html="text">我是p标签中的内容</p>
<p v-html="html">我是p标签中的内容</p>
</div>
<!-- 引入Vue.js文件 -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 创建Vue对象 -->
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
text:'点我试试看',
html:'<a href="http://www.itcast.cn">试试就试试</a>'
}
});
</script>
</body>
</html>
3.2. v-if和v-show
作用:根据表达式的bool值进行判断是否渲染该元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 设置vue所管理的视图 -->
<div id="app">
<!-- 获取vue对象中data里的数据 -->
<p v-if="isShow">我是v-if数据</p>
<p v-show="isShow">我是v-show数据</p>
</div>
<!-- 引入Vue.js -->
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 创建Vue对象 -->
<script type="text/javascript">
new Vue({
el:'#app',
data:{
isShow:false
}
});
</script>
</body>
</html>
v-if的值为false的时候是直接删除该标签，而v-show则是采用css样式设置为不显示的方式
v-if有更高的切换开销，而v-show有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用v-show较好；
如果在运行时条件很少改变，则使用v-if较好。
3.3. v-on
-
作用:使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。 -
语法:
-
v-on:事件名.修饰符 = "methods中的方法名"; v-on的简写方法:@事件名.修饰符 = "methods中的方法名" -
修饰符
- .stop 调用 event.stopPropagation()。
- .prevent 调用event.preventDefault()。
- .capture 添加事件侦听器时使用 capture 模式。
- .self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native 监听组件根元素的原生事件。
- .once 只触发一次回调。
- .left (2.2.0) 只当点击鼠标左键时触发。
- .right (2.2.0) 只当点击鼠标右键时触发。
- .middle (2.2.0) 只当点击鼠标中键时触发。
- .passive (2.3.0) 以 { passive: true } 模式添加侦听器
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="location.href='http://www.baidu.com'">百度</button>
<button onclick="method1()">百度</button>
<div id="app">
<!--需求: 点击按钮 修改 点击次数-->
<!--在事件内 直接书写js代码-->
<!--1 原始方式-->
<button v-on:click="count++">按钮1</button>
<!--2 简化方式-->
<button @click="count++">按钮2</button>
<!--3 给事件绑定方法-->
<button @click="fn1()">按钮3</button>
<!--4 给事件绑定方法, 还要给方法传递参数-->
<button @click="fn2(count)">按钮4</button>
<!--5 限制点击事件只会被执行一次-->
<button @click="fn3()">按钮5</button>
<button @click="fn3">按钮52222222</button>
<button @click.once="fn3()">按钮6</button>
<p>上面的按钮被点击的次数: {{count}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
count : 0
},
methods : {
fn1 : function() {
console.info("方法一 被调用了... ...")
this.count++;
},
fn2 : function(cou) {
console.info("按钮被点击的次数: " + cou);
},
fn3 : function () {
console.info("方法三 被调用了... ...")
}
}
});
</script>
</body>
</html>
3.4. v-for
v-for作用: 列表渲染,当遇到相似的标签结构时,就用v-for去渲染
- 格式
- 数组或集合
(item,index) in 数组或集合 参数item:数组中的每个元素 参数index:数组中元素的下标 - 对象
(value, key, index) in 对象 参数index:对象中每对key-value的索引 从0开始 参数key:键 参数value:值
- 数组或集合
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--获取vue中data里面的数据-->
<!--遍历数组-->
<p v-for="(item, index) in arr">{{index+1}} ===== {{item}}</p>
<hr/>
<!--遍历对象-->
<p v-for="(value, key, index) in person">{{index+1}} ==== {{key}} ==== {{value}}</p>
<hr/>
<!--遍历对象数组-->
<p v-for="(person, index) in personArr">{{index+1}} ===== {{person.name}} ==== {{person.age}} ===== {{person.gender}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el : "#app",
data : {
arr : ["张三", "李四", "王五"],
person : {name:"刘备", age:"25", gender:"男"},
personArr : [
{name:"刘备", age:"25", gender:"男"},
{name:"关羽", age:"28", gender:"男"},
{name:"张飞", age:"29", gender:"男"},
]
}
});
</script>
</body>
</html>
3.5. v-bind
作用: 可以绑定标签上的属性。
格式:
v-bind:属性="值"
简写格式
:属性="值"
属性值一部分进行替换的格式
:属性="'常亮值' + vue对象data中的数据"
代码演示
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>v-bind</title>
</head>
<body>
<div id="app">
<!--完整写法-->
<font size="5" v-bind:color="ys1">颜色1</font>
<!--简写-->
<font size="5" :color="ys2">颜色2</font>
<hr>
<!--拼接的写法-->
<a href="http://www.baidu.com">百度</a><br/>
<a :href="'http://' + url">百度2</a><br/>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
ys1:"red",
ys2:"yellow",
url:"www.baidu.com"
}
});
</script>
</body>
</html>
3.6. v-model
作用: 表单元素的绑定
特点: 双向数据绑定
- vue对象中的数据发生变化可以更新到界面
- 通过界面可以更改vue对象中数据
v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在data选项中声明初始值。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
</head>
<body>
<div id="app">
姓名:<input type="text" id="username" v-model="user.username"><br>
密码:<input type="password" id="password" v-model="user.password"><br>
<input type="button" @click="fun" value="获取">
<input type="button" @click="fun2()" value="修改">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
//表示当前vue对象接管了div区域
data:{
//设置初始值
user:{username:"zhangsan",password:"123"} ,
},
methods:{
fun:function(){
//获取界面输入后,更新的值
console.info(this.user.username);
console.info(this.user.password);
},
fun2:function() {
//对数据的值 再次赋值进行更新
this.user.username = "武松";
this.user.password = "555555555";
}
}
});
</script>
</body>
</html>
4. Vue的生命周期
Vue生命周期生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。
vue生命周期可以分为八个阶段，分别是：
- beforeCreate（创建前）
- created（创建后）
- beforeMount(载入前)
- mounted（载入后）
- beforeUpdate（更新前）
- updated（更新后）
- beforeDestroy（销毁前）
- destroyed（销毁后）
我们如果想在页面加载完毕后就要执行一些操作的话，可以使用created和mounted钩子函数
5. Vue的Ajax异步请求 axios
在Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作。
axios :不是vue的插件，可以在任何地方使用，推荐
说明: 既可以在浏览器端又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp
如果遇到jsonp请求, 可以使用插件
jsonp实现
5.1. 发送get请求
axios.get('/user?id=12345')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.dir(error)
});
5.2. 发送post请求
axios.post('/user', "name=迪丽热巴&age=23")
.then(response => {
console.log(response.data);
})
.catch(error => {
console.dir(err)
});
浙公网安备 33010602011771号