Vue从零开始之Vue基础
文章目录
- 什么是Vue?
- Vue使用
- 下载node.js
- 兼容性
- 导入文件
- 第一个项目
- Vue 实例的生命周期
- 钩子函数的触发时机
- Vue常见问题
- input复用问题
- Vue语法
- vue对象
- 绑定数据
- Vue.set 修改数组的值
- 条件判断语句 v-if
- 连续的条件判断语句
- 是否展示元素 v-show
- 循环遍历语句 v-for
- 只渲染一次 v-once
- 解析标签进行显示 v-html
- 不解析直接显示 v-text
- 不进行转义 v-pre
- vue解析元素后会自动将 `v-cloak` 属性删除
- 表单输入 v-model
- v-model 修饰符
- 监听事件 v-on
- v-on修饰符
- 绑定标签的属性 v-bind
- 动态绑定class
- 动态绑定css样式style
- Vue 计算属性
什么是Vue?
Vue就是一个MVVM模式的实现者,MVVM最重要的就是ViewModel,ViewModel是为了实现数据的双向绑定,就是为了解耦.
- Model：模型层，在这里表示 JavaScript 对象
- View：视图层，在这里表示 DOM（HTML 操作的元素）
- ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
在 MVVM 架构中，是不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer(观察者)
- ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel 能够监听到视图的变化，并能够通知数据发生改变
Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定. 并且是一个渐进式框架
Vue使用
布局,语法,组件,网络
下载node.js
官网下载
兼容性
Vue 不支持 IE8 及以下版本，但它支持所有 兼容 ECMAScript 5 的浏览器。
导入文件
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]">script>
第一个项目
html:5+tab生产h5模板
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="vue">
{{message}}
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue!'
}
});
script>
body>
html>
说明
- el:’#vue’：绑定元素的 ID
- data:{message:‘Hello Vue!’}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!
- 此时就可以在控制台直接输入 vm.message=‘xxx’ 来修改值，中间是可以省略 data 的.在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 数据绑定 功能实现的；MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
Vue 实例的生命周期
Vue 实例有一个完整的生命周期，也就是从 开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载 等一系列过程
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。
注意： created 钩子函数和 mounted 钩子函数的区别
钩子函数的触发时机
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
Vue常见问题
input复用问题
Vue进行DOM渲染时,出于性能的考虑,会尽可能复用已存在的元素,而不是创建新的元素.
导致删除原input渲染一个新的input的时候用户输入的信息还在.
解决:
- 当两个input的key相同时会复用
- 不同时会创建一个新的元素而不是复用已存在的
<span v-if="isM"><input .... key="username">span>
<span v-else><input .... key="email">span>
Vue语法
vue对象
被vue接管的属性或方法中:
- 如果某个参数符合变量的命名规范,Vue会将其当成属性名或方法名进行解析,这时如果未定义则会产生错误(Property or method “变量” is not defined on the instance but referenced during render.).
- 使用引号包裹,Vue就不会自行进行解析了.
<script type="text/javascript">
var vm = new Vue({
//el绑定元素id
el: '#vue',
//data初始化数据, 类型为: 对象|function
data: {
message: 'Hello Vue!'
},
//data组件的定义只接受 function
//data: function () {
// return { a: 1 }
//},
//methods初始化方法,调用方法需要带()
//方法中使用this调用data中的数据
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
},
//过滤器,类似linux的管道流
//使用过滤器: {{item.price | showPrice}}
filters:{
//过滤方法
showPrice(price){
return xxx
}
},
//计算属性,属性的值会被缓存,调用计算属性不带()
computed: {
currentTime2: function () {
this.message;
return Date.now();
}
},
//各种钩子(回调)函数,不能使用箭头函数来定义一个生命周期方法,因为箭头函数的this绑定了父上下文
created: function(){
//xxxx
},
// 注册组件
components: {
myli: {
//组件信息
}
}
});
script>
绑定数据
- 行内使用:
{{msg}}双花括号取data中对应变量的值- {{count * 2}} / {{msg+ ’ ’ +msg2}} / {{ 方法() }} / {{计算属性}}
- 标签内: 直接使用属性名取值. 前提是标签的属性已经被vue接管
Vue.set 修改数组的值
直接通过数组下标修改值,Vue不会重新将其渲染到页面,可以使用Vue.set或数组的splice方法来修改数组指定下标的值.
Vue.set(要修改的数组,索引值,修改后的值)
条件判断语句 v-if
<div id="vue">
<h1 v-if="ok">yesh1>
<h1 v-else>noh1>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm=new Vue({
el:'#vue',
data:{
ok:true
}
});
script>
注意： 使用 v-* 属性绑定数据是不需要 双花括号 包裹的. 微信小程序要包裹. 控制台使用vm.ok=true 修改数据
连续的条件判断语句
<div id="vue">
<h1 v-if="type==='a'">ah1>
<h1 v-else-if="type==='b'">ah1>
<h1 v-else-if="type === 'C'">Ch1>
<h1 v-else>其他h1>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm=new Vue({
el:'#vue',
data:{
type:'a'
}
});
script>
===全等于 控制台使用vm.type='b’修改数据
是否展示元素 v-show
v-if和v-show的区别:
- v-if是直接删除和创建元素
- v-show是添加行内样式display:none
循环遍历语句 v-for
可以遍历出对象或同时遍历出对象和下标
<div id="vue">
//遍历数组
<ul>
<li v-for="(item,index) in items">
{{item.message}}+{{index}}
li>
<li v-for="item in items">
{{item.message}}+{{index}}
li>
ul>
//遍历对象中的属性
<ul>
<li v-for="value in info">{{value}}li>
ul>
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}li>
ul>
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}li>
ul>
// 使用<template>循环渲染一段包含多个元素的内容
<ul>
<template v-for="item in items">
<li>{{ item.msg }}li>
<li class="divider" role="presentation">li>
template>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm=new Vue({
el:'#vue',
data:{
items:[
{message:"a"},
{message:"b"},
{message:"c"}
],
infor:{
name: 'xiao',
age: 18,
height: 188
}
}
});
script>
官方建议在使用v-for时在对应的元素上添加:key="xxx"属性,使用Diff算法提高更新虚拟DOM速度.但要保证key指定的值唯一不能重复
只渲染一次 v-once
v-once修饰的元素或组件只渲染一次,不会随数据的改变而改变
<h2 v-once>{{msg}}h2>
解析标签进行显示 v-html
<h2 v-html="url">h2>
data: {
url: '<a>啊啊啊a>'
}
不解析直接显示 v-text
//啊啊啊 会被 你好 替换
<h2 v-text="msg">啊啊啊h2>
data: {
msg: '你好'
}
不进行转义 v-pre
会直接在页面显示 {{msg}} 而不是对应的值
<h2 v-pre>{{msg}}h2>
vue解析元素后会自动将 v-cloak 属性删除
可用于未解析完成前不显示任何内容
<style>
[v-cloak]{
display: none;;
}
style>
<h2 v-cloak>{{msg}}h2>
表单输入 v-model
UI控件的数据双向绑定,将页面中的数据和js中的数据绑定起来. v-model相当于v-bind+input事件.
v-model指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
v-model绑定相同变量的单选/复选框默认成为一组,不需要指定name属性
<div id="vue">
单行文本：<input type="text" v-model="message" /> 单行文本是：{{message}}<br/>
多行文本：<textarea v-model="message">textarea> 多行文本是：{{message}}<br/>
单复选框：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}label><br/>
多复选框：
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jacklabel>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">Johnlabel>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mikelabel>
<span>选中的值: {{ checkedNames }}span><br/>
单选按钮：
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Onelabel>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<span>选中的值: {{ picked }}span><br/>
下拉框：
<select v-model="selected">
<option disabled value="">请选择option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>选中的值: {{ selected }}span>
value值绑定: 从data中取值设置为表单元素的value
<label v-for="item in items" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies" >{{item}}
label>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message:'',
checked: false,
checkedNames: [],
picked:'',
selected: '',
items: ['足球','篮球','乒乓球'],
hobbies: []
}
});
script>
注意： v-model 会忽略所有表单元素的value, checked、selected 属性设置的初始值而总是将 Vue 实例的数据作为初始值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
注意: 如果 v-model 表达式的初始值未能匹配任何选项， 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
v-model 修饰符
v-model.修饰符
- .lazy 懒加载:表单失去焦点或回车时才会更新数据(默认是同步的)
- .number 将输入的内容修改为数字类型.使用v-model绑定数据时,无论输入什么默认当做字符串处理
- .trim 去重输入内容首尾的空格
监听事件 v-on
v-on:可以缩写为@
参数传递问题:
- 使用v-on进行事件监听并且方法无形参时,方法的()可以省略
- 方法有一个形参,但调用时省略了().Vue会将浏览器生成的event事件对象传入到方法中
- 方法有多个形参时, 方法的实参使用
$event,传递浏览器生成的event事件对象
<div id="vue">
<button v-on:click="sayHi">点我button>
<button v-on:click="counter++">{{counter}},点击加一button>
//使用v-bind+input事件实现v-model的效果
<input type="text" :value="message" v-on:input="messgae = $event.target.value">{{counter}},点击加一input>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello World',
counter: 0
},
// 在 `methods` 对象中定义方法
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
}
});
script>
v-on修饰符
- .stop: 阻止事件冒泡.
- 如果未使用stop点击按钮,btnClick和divClick两个事件都会触发.
- 使用后点击按钮触发btnClick,点击aaaa触发divClick.
<div @click="divClick">
aaaaaaa
<button @click.stop="btnClick">按钮button>
div>
- .prevent: 阻止默认事件发生
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitclick">
form>
- .keyCode(键代码)|keyAlias(键别名): 监听键盘某个按键
- .enter: 监听回车键
<input type="text" @keyup.enter="keyUp">
- .once: 只触发一次事件
<input type="text" @keyup.once="keyUp">
- .native: 监听组件根元素的原生事件
绑定标签的属性 v-bind
v-bind:可以缩写为:
使用v-bind接管herf后才会被解析为data中的数据,不然会被当做普通的字符串
<a v-bind:href="info.url" target="_blank">{{info.url}}a>
//为true时渲染该属性,false时不渲染
<button :diasbled="boolean">按钮button>
动态绑定class
- 对象语法:
当类名对应的boolean值为true时会绑定该类名,为false时则不绑定. 对象的key一定不会被vue解析,value如果使用单引号包裹则不会被解析
<h2 :class="{类名1: boolean, 类名2: boolean}">{{msg}}h2>
<h2 class="title" :class="{active: isActive, line: isLine}">{{msg}}h2>
data: {
isActive: 'true',
isLine: 'false'
}
- 数组语法: 数组中未使用单引号包裹的会解析为data中的值,使用单引号包裹的直接显示不会被解析
<h2 :class="[active,line,'title']">{{msg}}h2>
data: {
active: 'aaa',
line: 'bbb'
}
动态绑定css样式style
- 对象语法:
<h2 :style="{fontSize: finalSize, color: finalColor}">{{msg}}h2>
data: {
msg: '你好',
finalSize: '100px',
finalColor: 'red'
}
- 数组语法:
<h2 :style="[my1,my2]">{{msg}}h2>
data: {
msg: '你好',
my1: {
fontSize: '100px'
},
my2{
color: 'red'
}
}
Vue 计算属性
首先它是个 属性 其次这个属性有 计算 的能力.简单点说，它就是一个能够将计算结果缓存起来的属性.
computed计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
<div id="vue">
<p>调用当前时间的方法：{{currentTime1()}}p>
<p>当前时间的计算属性：{{currentTime2}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: 'Hello Vue'
},
methods: {
currentTime1: function () {
return Date.now();
}
},
//计算属性
computed: {
currentTime2: function () {
this.message;
return Date.now();
},
//计算属性完整写法:由于set方法通常不会使用,就简写成了上面的写法
fullname: {
set: function(){
//...
},
get: function(){
//...
}
}
}
});
script>
- methods：定义方法，调用方法使用 currentTime1()，需要带括号
- computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；属性的值会被缓存起来
- methods 和 computed 里不能重名