Vue——邂逅Vue
Vue——Vue的基础语法
Vue——Vue的组件化
Vue——slot_插槽的基本使用

文章目录

1：为什么学习Vue
2：Vue介绍
3：Vue初体验
4：Vue的实例
- 4.1 创建一个vue实例
- 4.2 数据与方法
- 4.3 实例生命周期钩子
- 4.4生命周期图示
5：MVVM模型

1：为什么学习Vue

近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。如果你现在正在换工作,你会发现招聘前端的需求中, 10个有8个都对Vue有或多或少的要求。

2：Vue介绍

Vue (读音/vju:/ ,类似于view) ,不要读错。
Vue是一个渐进式的框架,与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

什么是渐进式呢?

1：渐进式意味着你可以将Vue作为你应用的一部分嵌入其中 ,带来更丰富的交互体验。
2：或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
3：比如Core+Vue-router+Vuex ,也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能

1：解耦视图和数据
2：可复用的组件
3：前端路由技术
4：状态管理
5：虚拟DOM

Vue特点
组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。
天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层，代码解耦更易于读写。
生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案。

这些特点,我们不需要一个个去记住 ,我们在后面的学习和开发中慢慢体会到

学习Vue的前提?
从零学习Vue开发,并不需要你具备其他类似于Angular，React ,甚至是jQuery的经验。
但是你需要具备一定的HTML、 CSS、 JavaScript基础。

3：Vue初体验

我们也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

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

或者

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

代码示例

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">// Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<h1> {{message}}</h1><h1> {{data}}</h1><ul><li v-for="item in movies">{{item}}</li></ul><h2>当前计数{{counter}}</h2><button v-on:click="add">+</button>,<button v-on:click="sub">-</button>    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span></div><script>const demo=new Vue({el: '#app',data: {message: '你好vue',data: "9点",movies: ['战狼','人民的名义','哪吒'],counter: 0,messages: '页面加载于 ' + new Date().toLocaleString()},methods: {add: function(){console.log("add执行");this.counter++;},sub: function(){this.counter--;}}})</script></body>
</html>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

注意在 add和sub方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

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

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。
根据上面的代码，我们还得出下面的三张图片的结论

进行测试结果如下

4：Vue的实例

4.1 创建一个vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({// 选项
})

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

当创建一个 Vue 实例时，你可以传入一个选项对象。这小结主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，也可以在 API 文档中浏览完整的选项列表。
API

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例
└─ TodoList├─ TodoItem│  ├─ DeleteTodoButton│  └─ EditTodoButton└─ TodoListFooter├─ ClearTodosButton└─ TodoListStatistics

我们会在稍后的组件系统章节具体展开。不过现在，只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

4.2 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }// 该对象被加入到一个 Vue 实例中
var vm = new Vue({data: data
})// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如： vm.b = ‘hi’
那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：

data: {newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null
}

注意：这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。如下实例

var obj = {foo: 'bar'
}Object.freeze(obj)new Vue({el: '#app',data: obj
})
<div id="app"><p>{{ foo }}</p><!-- 这里的 `foo` 不会更新！ --><button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

var data = { a: 1 }
var vm = new Vue({el: '#example',data: data
})vm.$data === data // => true
vm.$el === document.getElementById('example') // => true// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用
})

4.3 实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({data: {a: 1},created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

4.4生命周期图示

下图展示了实例的生命周期。我们不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

           beforeCreate() {console.log("=========beforeCreate=============");console.log("数据模型未加载：" + this.name, this.num);console.log("方法未加载：" + this.show());console.log("html模板未加载：" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("数据模型已加载：" + this.name, this.num);console.log("方法已加载：" + this.show());console.log("html模板已加载：" + document.getElementById("num"));console.log("html模板未渲染：" + document.getElementById("num").innerText);},beforeMount() {console.log("=========beforeMount=============");console.log("html模板未渲染：" + document.getElementById("num").innerText);},mounted() {console.log("=========mounted=============");console.log("html模板已渲染：" + document.getElementById("num").innerText);},beforeUpdate() {console.log("=========beforeUpdate=============");console.log("数据模型已更新：" + this.num);console.log("html模板未更新：" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("数据模型已更新：" + this.num);console.log("html模板已更新：" + document.getElementById("num").innerText);}

5：MVVM模型

View层:视图层

在我们前端开发中，通常就是DOM层。其主要的作用是给用户展示各种信息。

Model层:数据层

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。在我们计数密的案例中，就是后面抽取出来的obj, 当然，里面的数据可能没有这么简单。

VueModel层:视图模型层

视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding， 也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data.

我们对上面的计数器模型作如下解释

MVC和MVVM的关系图解

Vue——邂逅Vue相关推荐

vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
Vue3 + TS（一）- 邂逅Vue
一.认识Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 1.1 Vue 的安装安装方式: CDN引入: 下载Vue的js文件,并手动引入: 通过 ...
简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在使用vue开发项目的过程中,经常会遇到这样 ...
vuejs和html语言一样么,vue和vue.js有区别吗？
vue和vue.js没有区别,vue就是vue.js的简称.vue是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框架! Vue (读音 /vjuː/,类似于 ...
Vue：Vue的＜ span ＞文字怎么加粗？
Vue:Vue的< span >文字怎么加粗? 资源 span文字加粗_span盒子对象内字体加粗
Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图
Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图一.预科知识 Vue CLI ECharts 二.资源在Vue中使用echarts 如何在 Vue 项目中使用 echart ...
Vue 脚手架||Vue 脚手架的基本用法
Vue 脚手架 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/ npm install -g @vue/cli 检测是否安装成功 ...
vue是什么_什么是VUE？vue有什么作用？
什么是vue?Vue.js是一套构建用户界面的渐进式框架,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复 ...
html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...

Vue——邂逅Vue