VUE简介
一、初始VUE
1、Vue是什么？
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，什么叫做渐进式呢？通俗的讲就是一层一层的，一步一步的来做事情的方式。什么又是框架呢？可以理解为一套完整的解决方案。总结起来理解，vue是一个框架，提供了一套完整的解决方案，同时这个框架是渐进式的，你不必使用整个框架的所有内容，可以根据自身的应用场景只使用一部分
2、框架和库？
框架：字面上理解为架子，会基于自身的特点为用户提供一整套的解决方案，倾向于创造一套需要你来遵守的规则和范例，你可以基于这套架子快速实现应用，但前提是你必须按照它的规则来写，例如：ThinkPHP框架，必须要求你按照它的命名规则、代码组织结构来写
库：讲代码集合成的一个产品，供程序员调用，例如：jquery库，只需要引入使用它的功能就可以了，至于你的应用怎样架构，项目目录怎样组织它并不关心
本质上它们都是一样的，框架可以理解为库的超集，框架中可以引入各种库
二、安装
1、通过CDN直接用 <script> 引入
可以通过CDN直接引入Vue 有开发版本和生成版本可供选择 开发版本：包含完整的警告和调试模式，对于制作原型或学习，你可以这样使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
生成版本：删除了警告，33.30KB min+gzip，对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
2、NPM下载
通过NPM下载Vue的源代码，然后通过本地工程路径进行引用
# 最新稳定版
$ npm install vue
这里的截图显示了在桌面创建一个新文件夹-->进入新文件夹-->通过npm下载vue
3、命令行工具 (CLI)
这个在以后的部门专门讲解...
三、快速开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo1--快速开始</title>
</head>
<body>
<div id='app'>
{{message}}
</div>
</body>
<!-- 引入CDN的vue.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<!-- 引入本地的vue.js -->
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
})
</script>
</html>
构造器
每个 Vue 应用都是通过构造函数 Vue 来创建一个 Vue 的根实例。
new Vue({
// 选项
})
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。在上面的例子中，我们传入了 el 来挂载元素，data 来进行数据的绑定。
new Vue({
// 挂载元素
el: '#app',
// 数据
data: {
message: 'Hello Vue!'
}
});
参数 el，是 element 的缩写，用于提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。参数值有 2 种类型，包括 string 和 HTMLElement。el:"#app"表示挂载目标是 id 为 app 的元素，也可写为el:document.getElementById('app')
参数 data 表示 Vue 实例的数据对象。上例中，data:{message:'Hello Vue!'}表示变量 message 所代表的真实值为 Hello Vue!
模板插值
上面有提到，如果只使用 Vue 最基础的声明式渲染的功能，则完全可以把 Vue 当做一个模板引擎来使用，也就是采用模板语法把数据渲染进 DOM。
Vue 使用双大括号语法来进行文本插值，下面的 message 相当于一个变量或占位符，最终会表示为真正的文本内容。
<div id='app'>
{{ message }}
</div>
Vue实例
可以通过new Vue函数创建出一个新的Vue实例
let vm = new Vue()
console.log(vm);
可以在创建Vue实例的时候传入相应的选项
let vm = new Vue({
el: '#app' //id名为app的元素作为应用的根节点
})
console.log(vm.$el) //这里打印出相应的根节点
符号开头的，用来和用户自定义的属性区分开
初始化时传入的data选项，用来存放相关数据，并且这些数据是响应式的
let vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
});
console.log(vm.$data.message);
vm.$data.message 与 vm.message是等价的
console.log(vm.$data.message === vm.message); //true
当修改message的值，页面的值也相应的更改
Comments