Vue——邂逅Vue

最新推荐文章于 2020-10-07 23:14:22 发布

福建选手阿俊

最新推荐文章于 2020-10-07 23:14:22 发布

阅读量288

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44891295/article/details/105334590

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

文章目录

1：为什么学习Vue
2：Vue介绍
3：Vue初体验
4：Vue的实例
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的关系图解

福建选手阿俊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue——邂逅Vue

文章目录1：为什么学习Vue2：Vue介绍3：Vue初体验1：为什么学习Vue近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。如果仅仅还是传统的各种cms开源代码建站仿站，显然你的技术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那么vue将会使你未来技术长足成长的不二选择。如...
复制链接

扫一扫

专栏目录