06月23, 2019

VUE--VUE基础--VUE简介

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

-w855 这里的截图显示了在桌面创建一个新文件夹-->进入新文件夹-->通过npm下载vue -w822

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)  //这里打印出相应的根节点

el是vm的实例属性,除此之外之外,还有一些其他的属性和方法,它们都是以 符号开头的,用来和用户自定义的属性区分开

初始化时传入的data选项,用来存放相关数据,并且这些数据是响应式的

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

console.log(vm.$data.message);

vm.$data.messagevm.message是等价的

console.log(vm.$data.message === vm.message); //true

当修改message的值,页面的值也相应的更改 vue-instance

本文链接:http://www.yanhongzhi.com/post/vue-brief.html

-- EOF --

Comments