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:'<span v-html="rawHtml">hello</span>'}})</script>
</body>

3、v-bind

v-bind指令的作用是为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名
需要动态的增删class建议使用对象的方式

<body><div id="app"><!-- <img v-bind:src="imgSrc" alt=""> --><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 + '!'">test</h2><h2 v-text="info + '!'">test</h2><h2>{{message + '!'}}test</h2></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><!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div><!-- 2.1.4 新增 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a><!-- 2.3.0 新增 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit"><!-- 你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。 -->
<input v-on:keyup.page-down="onPageDown">

按键码
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

.exact修饰符
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

<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: {// 计算属性的 getterreversedMessage: 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'">A</h3><h3 v-else-if="type === 'B'">B</h3></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"elsethis.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指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<–>表单元素的值

<!DOCTYPE html>
<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">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><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">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div><!-- 单选 --><div id="example-5"><select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div><br><br><!-- 多选 --><!-- <div id="example-6"><select v-model="selected" multiple style="width: 50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selecteds }}</span></div> --></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: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

组件是可复用的 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><!--通过 Prop 向子组件传递数据 监听子组件事件--><div id="post"><div :style="{ fontSize: postFontSize + 'em' }"><!-- 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件 --><!-- 使用事件抛出一个值,通过 $event 访问到被抛出的这个值 --><blog v-for="post in posts" :post="post" v-on:enlarge-text="postFontSize += $event"></blog></div></div>    <hr><!-- 在组件上使用v-model --><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: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})new Vue({el: '#components-demo'})// 定义一个名为blog-post的组件Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'})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:'<div class="blog-post">\<p>{{ post.title }}</p>\<button v-on:click="$emit(\'enlarge-text\',0.1)">\Enlarge text\</button>\<div v-html="post.content"></div>\</div>'})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: `<input:value="value"@input="$emit('input', $event.target.value)">`})new Vue({el:"#text",data:{searchText:''}})Vue.component('alert-box', {template: `<div class="demo-alert-box"><strong>Error!</strong><slot></slot></div>`})new Vue({el:"#alert"})</script>
</body>