Vue自学笔记（待补充）

最新推荐文章于 2024-06-13 23:47:14 发布

纸箱里的猫&

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量145

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_53799262/article/details/119671753

版权

Vue笔记

Writing In The Front：

@Author：纸箱里的猫

@Description：Vue自用学习笔记

@Last Updated Date：2021.7.20

@Learning Completion Date：2021.7.16-2021.7.20

@Writing The Software：Typora

1.什么是Vue

1.1 概念

Vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，Vue被设计为可以自底而上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

1.2 导入

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

1.3 快速入门

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

结果：Hello Vue!

2.Vue基本语法

2.1 v-bind

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

结果：鼠标悬停几秒钟查看此处动态绑定的提示信息！

===表示数据类型和数值都相同

2.2 判断-循环（v-if、v-for）

if

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

for

<div id="app-4">  <ol>    <li v-for="todo in todos">      {{ todo.text }}    </li>  </ol></div>

var app4 = new Vue({  el: '#app-4',  data: {    todos: [      { text: '学习 JavaScript' },      { text: '学习 Vue' },      { text: '整个牛项目' }    ]  }})

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

2.3 Vue绑定事件 (v-on)

测试代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    <button v-on:click="sayHi">点我</button></div><!--    导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            message: "hello,vue!!"        },        methods: {//方法必须定义在Vue的Methods对象中            sayHi: function () {                alert(this.message);            }        }    });</script></body></html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-szxOcY2s-1628824994730)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210717143308486.png)]

3. Vue双向绑定 (v-model)

3.1 什么是双向数据绑定

Vue.js是一个MVVM框架，级数据双向绑定，及当数据发生变化时，视图也就发生变化；当视图发生变化时，数据也会跟着同步变化。这也是Vue.js的精髓之处。

3.2 为什么要实现数据的双向绑定

对于我们处理表单，Vue.js的双向绑定就会是我们如虎添翼。即两者不排斥，在全局性数据流中使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

3.3 在表单中使用v-model

测试代码1 input type=“text”：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    输入的文本：<input type="text" v-model="message">{{message}}</div><!--    导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            message: "123456"        },    });</script></body></html>

测试代码2 input type=“radio”：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    性别：    <!--name属性是为了保证它们是一组的单选框-->    <!--v-model这里绑定的是radio中Value的值-->    <input type="radio" name="sex" value="男" v-model="sex" > 男    <input type="radio" name="sex" value="女" v-model="sex"> 女    <p>        选中了谁：{{sex}}    </p></div><!--    导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            sex: ""        },    });</script></body></html>

测试代码3 下拉框select：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    下拉框：    <select v-model="selected">        <!-- disabled表示不可选中-->        <option value="" disabled>--请选择--</option>        <option value="A">A</option>        <option value="B">B</option>        <option value="C">C</option>    </select>    <p>Value:{{selected}}</p></div><!--    导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    var vm = new Vue({        el: "#app",        data: {            selected: ""        },    });</script></body></html>

注意：下拉框在ios中要加一行–请选择–

3. Vue组件(component)

什么是组件

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板。通常一个应用会以一棵嵌套的组件树的形式来组织：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2eWCDcYa-1628824994732)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210717142200376.png)]

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    <!-- v-bind="item":for循环和item绑定了-->    <!-- 组件传递需要用props-->    <myfirstcomponent v-for="item in items" v-bind:aaa="item">    </myfirstcomponent></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    //定义一个Veu组件component，名字不要有大写    //？template中不能直接访问下面data中的数据，所以在使用组件标签时把取到的值绑定到props的接收参数中    Vue.component("myfirstcomponent",{        props: ["aaa"],        template: "<li>{{aaa}}</li>"    });    var vm = new Vue({        el: "#app",        data: {            items: ["123","456","789"]        }    });</script></body></html>

说明：

v-for="item in items" ：遍历Vue实例中定义名为items的数组，并创建同等数量的组件
v-bind:aaa="item"：将遍历的item项绑定到组件中props定义名为aaa的属性上； =号左边aaa为props定义的属性名，右边的为item in items 中遍历的item项的值

4. Axios异步通信

什么是Axios

Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信，其功能特点如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NDTZO7u-1628824994734)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210717152026644.png)]

为什么要使用Axios

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U6aPi0dv-1628824994735)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210717152646455.png)]

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!-- v-clock: 解决 {{}} 闪烁问题-->    <style>        [v-clock]{            display: none;        }    </style></head><body><div id="vue" v-clock>    <p>{{info}}</p>    <p>{{info.name}}</p>    <a v-bind:href="info.url">点我跳转百度</a></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--导入Axios--><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>    var vm = new Vue({        el: "#vue",        data:{            info:{            }        },        mounted(){  //钩子函数  链式编程   ES6新特性            axios.get('../data.json').then(response=>(this.info = response.data))        }    });</script></body></html>

5.计算属性

什么是计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点来说，它就是一个能够将计算结果缓存起来的属性（将星望转化成了静态的属性），仅此而已：可以想象为缓存。

计算出来的结果，保存在属性中，内存中运行：虚拟Dom

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="vue">    <!--  一个带（），一个不带-->    <p>currentTime1：{{currentTime1()}}</p>    <p>currentTime2：{{currentTime2}}</p></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    var vm = new Vue({        el: "#vue",        data:{            message: "HELLOWORLD"        },        methods: {            currentTime1: function () {                return Date.now();//返回一个时间戳            }        },        computed: {//计算属性：methods和computed 方法名可以重名，但不建议使用，会优先调用methods            currentTime2: function () {                this.message;                return Date.now();//返回一个时间戳            }        }    });</script></body></html>

注意：计算属性，methods和computed 方法名可以重名，但不建议使用，会优先调用methods

说明：

methods：定义方法，调用方法使用currentTime1()，需要带括号。
computed ：定义计算属性，调用属性使用currentTime2，不需要带括号。this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新。可以在浏览器控制台使用this.message=""，改变下数据的值，再次测试观察效果。

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定产生开销，那如果这个结果不是经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算属性结果进行缓存，以节约我们的系统开销。

6.插槽slot

内容分发

在Vue.js中我们使用元素作为承载分发内容的出入口，作者称其为插槽，可以应用在组合组件的场景中

测试代码

比如准备一个代办事项组件（todo），该组件由代办标题（todo-title）和代办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="vue">    <todo>        <todo-title slot="todo-title" :title="title"></todo-title>        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>    </todo></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    Vue.component("todo",{        template: '<div>\                        <slot name="todo-title"></slot>\                        <ul>\                            <slot name="todo-items"></slot>\                        </ul>\                    </div>'    });    Vue.component("todo-title",{        props: ["title"],        template: "<div>{{title}}</div>"    });    Vue.component("todo-title",{        props: ["item"],        template: "<li>{{item}}</li>"    });    var vm = new Vue({        el: "#vue",        data: {            title: "123456789",            todoItems: ["123","456","789"]        }    });</script></body></html>

说明：我们的todo-title和todo-title组件被分别分发到了todo组件的todo-title和todo-title插槽中。

6.自定义事件内容分发

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CnElBAyc-1628824994736)(C:\Users\10512\AppData\Roaming\Typora\typora-user-images\image-20210719104852804.png)]

数据项在Vue实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue提供了自定义事件的功能很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’,参数)。

测试代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="vue">    <todo>        <todo-title slot="todo-title" :title="title"></todo-title>        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :aaa="item" :bbb="index" v-on:remove="removeItems(index)"></todo-items>    </todo></div><!--导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>    Vue.component("todo",{        template: '<div>\                        <slot name="todo-title"></slot>\                        <ul>\                            <slot name="todo-items"></slot>\                        </ul>\                    </div>'    });    Vue.component("todo-title",{        props: ["title"],        template: "<div>{{title}}</div>"    });    Vue.component("todo-items",{        props: ["aaa","bbb"],        template: "{{bbb}}----<li>{{aaa}} <button @click='remove'>删除</button> </li>",        methods: {            remove: function (index) {                // this.emit 自定义事件分发                this.$emit("remove",index);            }        }    });    var vm = new Vue({        el: "#vue",        data: {            title: "123456789",            todoItems: ["123","456","789"]        },        methods: {            removeItems: function (index) {                console.log("删除了"+this.todoItems[index]+"OK");                this.todoItems.splice(index,1);//一次删除一个元素            }        }    });</script></body></html>

说明

1.在vue实例中，增加了methods对象并定义了一个名为removeItems的方法

 var vm = new Vue({        el: "#vue",        data: {            title: "123456789",            todoItems: ["123","456","789"]        },        methods: {            removeItems: function (index) {                console.log("删除了"+this.todoItems[index]+"OK");                this.todoItems.splice(index,1);//一次删除一个元素            }        }    });

2.修改todo-items代办内容组件的代码，增加一个删除按钮，并绑定事件

Vue.component("todo-items",{        props: ["aaa","bbb"],        template: "{{bbb}}----<li>{{aaa}} <button @click='remove'>删除</button> </li>",        methods: {            remove: function (index) {                // this.emit 自定义事件分发                this.$emit("remove",index);            }        }    });

3.修改todo-items代办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法中

<todo-items slot="todo-items" v-for="(item,index) in todoItems" :aaa="item" :bbb="index" v-on:remove="removeItems(index)"></todo-items>

Vue-cli

什么是vue-cli

vue-cli官方提供的一个脚手架，用于快速生成一个vue项目模板；

预先定义好的目录结构及基础代码，使我们的开发更加的快速

…

Extra1.自学视频教程链接

https://www.bilibili.com/video/BV18E411a7mC

Extra2.修改及备注

纸箱里的猫&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自学笔记（待补充）

Vue笔记Writing In The Front：@Author：纸箱里的猫@Description：Vue自用学习笔记@Last Updated Date：2021.7.20@Learning Completion Date：2021.7.16-2021.7.20@Writing The Software：Typora目录文章目录Vue笔记目录1.什么是Vue1.1 概念1.2 导入1.3 快速入门2.Vue基本语法2.1 v-bind2.2 判断-循环（v-if、v
复制链接

扫一扫