Vue快速入门笔记（一）
文章目录
- 一、Vue基础
- 1、第一个Vue程序
- 2、el：挂载点
- 3、data：数据对象
- 二、模板语法
- 1、v-once
- 2、v-html
- 3、v-bind
- 4、v-text
- 5、v-on
- 三、计算属性和侦听器
- 1、计算属性
- 2、侦听器
- 四、Class与Style绑定
- 1、绑定HTML Class
- 2、绑定内联样式
- 五、条件渲染
- 1、v-if
- 2、v-else
- 3、v-else-if
- 4、v-show
- v-if与v-show的区别
- 六、列表渲染
- 1、v-for
- 七、表单输入绑定
- 1、v-model
- 八、组件基础
- 1、基本示例
- 2、通过 Prop 向子组件传递数据
- 九、网络应用
- 1、axios
- 2、axios+vue
一、Vue基础
1、第一个Vue程序
来自官方文档
引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
声明式渲染
<div id="app">
{{ message }}
div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2、el：挂载点
Vue实例的作用范围
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器
可以使用其他的选择器，但是建议使用ID选择器
是否可以设置其他的dom元素
可以使用其他的双标签，不能使用HTML和body
3、data：数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
<body>
<div id="app">
{{ message }}
<h2>
{{school.name}}
{{school.mobile}}
h2>
<ul>
<li>{{campus[0]}}li>
<li>{{campus[1]}}li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
school:{
name:"江西师范大学",
mobile:"123-321-9000"
},
campus:["瑶湖校区","青山湖校区"]
}
})
script>
body>
二、模板语法
1、v-once
- 使用 v-once 指令，能执行一次性地插值，当数据改变时，插值处的内容不会更新
2、v-html
- v-html指令的作用是设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
<body>
<div id="app">
<h1>{{ message }}h1>
<h1 v-once>{{ message }}h1>
<p>{{ rawHtml }}p>
<p><span v-html="rawHtml">span>p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
rawHtml:'hello'
}
})
script>
body>
3、v-bind
- v-bind指令的作用是为元素绑定属性
- 完整写法是v-bind:属性名
- 简写的话可以直接省略v-bind，只保留:属性名
- 需要动态的增删class建议使用对象的方式
<body>
<div id="app">
<br>
<img :src="imgSrc" style="width: 10em;" alt="" :title="imgTitle + '!!!'"
:class="{active:isActive}" @click="toggleActive">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc:"img/1.jpg",
imgTitle:"哈哈哈哈哈",
isActive:false
},
methods: {
toggleActive:function(){
this.isActive = !this.isActive;
}
},
})
script>
body>
4、v-text
- v-text指令的作用是设置标签的内容
- 默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
- 内部支持表达式
<body>
<div id="app">
<h2 v-text="message + '!'">testh2>
<h2 v-text="info + '!'">testh2>
<h2>{{message + '!'}}testh2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"hello",
info:"This is v-text"
}
})
script>
body>
5、v-on
- v-on指令的作用是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中的数据
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上.修饰符可以对事件进行限制
- .enter可以限制触发的按键为回车
- 事件的修饰符有多种
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<a v-on:click.stop="doThis">a>
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
<div v-on:click.capture="doThis">...div>
<div v-on:click.self="doThat">...div>
<a v-on:click.once="doThis">a>
<div v-on:scroll.passive="onScroll">...div>
注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
按键码
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<button v-on:click.ctrl="onClick">Abutton>
<button v-on:click.ctrl.exact="onCtrlClick">Abutton>
<button v-on:click.exact="onClick">Abutton>
<body>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doTest">
<input type="button" value="v-on简写" @click="doTest">
<input type="button" value="双击事件" @dblclick="doTest">
<h2 @click="changeFood">{{food}}h2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data:{
food:"西瓜"
},
methods: {
doTest:function(){
alert("v-on指令");
},
changeFood:function(){
this.food += "好好吃！"
}
},
})
script>
body>
三、计算属性和侦听器
1、计算属性
计算属性会将计算的结果进行缓存
<body>
<div id="example">
<p>{{ message }}p>
<p>{{ reversedMessage }}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例,会将计算的结果进行缓存
return this.message.split('').reverse().join('')
}
}
})
script>
body>
2、侦听器
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
<body>
<div id="app">
{{ message }}
<ul>
<li v-for="item in arr">{{item}}li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
arr:['小明','小红','小军']
},
computed: {
},
watch: {
message:function(val){
console.log("监听事件~~~~~~~");
console.log(val);
},
arr:function(val){
console.log(val);
}
},
})
script>
body>
四、Class与Style绑定
1、绑定HTML Class
<body>
<div id="app">
<div class="static" :class="{ active: isActive}">div>
<div v-bind:class="classObject">div>
<div v-bind:class="[activeClass, errorClass]">div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
classObject:{
active:true
},
activeClass: 'active',
errorClass: 'text-danger'
}
})
script>
body>
2、绑定内联样式
五、条件渲染
1、v-if
- v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过操纵dom元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false，从dom移除
2、v-else
- 可以使用 v-else 指令来表示 v-if 的"else 块"
v-else-if
3、v-else-if
- 顾名思义，充当 v-if 的"else-if 块"，可以连续使用
注意
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<body>
<div id="app">
<input type="button" value="切换显示" @click="toggleIsShow">
<input type="button" value="切换选项显示" @click="ABIsShow">
<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no h1>
<br/>
<h3 v-if="type === 'A'">Ah3>
<h3 v-else-if="type === 'B'">Bh3>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data:{
awesome:true,
type:'A',
},
methods: {
toggleIsShow:function(){
this.awesome = !this.awesome;
},
ABIsShow:function(){
this.type = (this.type == 'A') ? 'B': 'A'
}
},
})
script>
body>
4、v-show
- v-show指令的作用是根据真假切换元素的显示状态
- 原理是修改元素的display，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值。值为true元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
注意
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="切换图片" @click="changeImg">
<img v-show="isShow" :src="imgUrl" alt="">
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false,
imgUrl:"img/1.jpg"
},
methods: {
changeIsShow:function(){
this.isShow = !this.isShow
},
changeImg:function(){
if(this.imgUrl == "img/1.jpg")
this.imgUrl = "img/2.jpg"
else
this.imgUrl = "img/1.jpg"
}
},
})
script>
body>
v-if与v-show的区别
v-if:不显示时，第一次就直接不渲染，如果内容已经显示将其改为不显示，将内容直接从dom去除
v-show:不显示时，就会改为display:none，但是会渲染在dom上
频繁的切换v-show，反之使用v-if，前者的切换消耗小
六、列表渲染
1、v-for
- v-for指令的作用是根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
<body>
<div id="app">
<ul>
<li v-for="(it,index) in arr">
{{ index + 1}}城市:{{ it }}
li>
ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
h2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
arr:["北京","上海","深圳"],
vegetables:[
{name:"番茄"},
{name:"西红柿"}
]
}
})
script>
body>
七、表单输入绑定
1、v-model
- v-model指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据<–>表单元素的值
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入绑定title>
head>
<body>
<div id="app">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}p>
<br>
<textarea v-model="messages" placeholder="多行文本">textarea><br>
<span>Multiline message is:span>
<p style="white-space: pre-line;">{{ messages }}p>
<br>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}label>
<br><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>
<br>
<span>Checked names: {{ checkedNames }}span><br>
<br>
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">Onelabel>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Twolabel>
<br>
<span>Picked: {{ picked }}span>
div>
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>Selected: {{ selected }}span>
div>
<br><br>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Tsundere',
messages: 'tsundere',
checked: false,
checkedNames:[],
selected: '',
picked: '',
selecteds:[]
},
})
script>
body>
html>
八、组件基础
1、基本示例
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter>button-counter>
div>
new Vue({ el: '#components-demo' })
注意：data必须是一个函数
2、通过 Prop 向子组件传递数据
注意：每个组件必须只有一个根元素
<body>
<div id="components-demo">
<button-counter>button-counter>
div>
<hr>
<div id="blog-post-demo">
<blog-post v-for="post in posts" :key="post.id" :title="post.title" >blog-post>
div>
<hr>
<div id="post">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog v-for="post in posts" :post="post" v-on:enlarge-text="postFontSize += $event">blog>
div>
div>
<hr>
<div id="text">
<custom-input v-model="searchText">custom-input>
<p>{{searchText}}p>
div>
<hr>
<div id="alert">
<alert-box>alert-box>
div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: ''
})
new Vue({
el: '#components-demo'
})
// 定义一个名为blog-post的组件
Vue.component('blog-post', {
props: ['title'],
template: '{{ title }}
'
})
new Vue({
el: '#blog-post-demo',
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
// 定义一个名为post的组件
// 子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
Vue.component('blog',{
props:['post'],
template:'\
{{ post.title }}
\
\
\
'
})
new Vue({
el:"#post",
data:{
posts:[
{ id: 1, title: 'My journey with Vue',content:'123' },
{ id: 2, title: 'Blogging with Vue' ,content:'456' },
{ id: 3, title: 'Why Vue is so fun',content:'789' }
],
postFontSize:1
}
})
Vue.component('custom-input', {
props: ['value'],
template: `
`
})
new Vue({
el:"#text",
data:{
searchText:''
}
})
Vue.component('alert-box', {
template: `
Error!
九、网络应用
1、axios
- axios必须先导入才可以使用
- 使用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容，或错误信息
官网地址：https://github.com/axios/axios
2、axios+vue
- axios回调函数中的this已经改变，无法访问到data中数据
- 把this保存起来，回调函数中直接使用保存的this即可