JavaScript vue 产品规格解决方案 vue.js介绍

一、什么是Vue.js？

用官网的解释来说Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

简单的来说Vue.js具有以下特性：
1、JavaScript框架；
2、简化Dom操作；
3、响应式数据驱动。

二、导入开发环境

1、开发环境版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、生产环境版本，优化了尺寸和速度

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、创建第一个Vue.js实例

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

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

此时我们会看到在网页上输出 Hello Vue!

四、el:挂载点

el的意思是设置挂载点，通过css选择器设置Vue实例管理的元素，设置完毕之后，el命中的元素的内部使用{{}}修饰的部分就会被data中同名的数据替换。 如图所示：

选择器与el挂载点对应的元素如下

选择器	对应的el挂载点
id=“app” (id选择器)	el:"#app"
class=“app” (class选择器)	el:".app"
div (标签选择器)	el:“div”

注意：

1、Vue会管理el选项命中的元素及其内部的后代元素；

2、不要挂在到body、html上；建议使用div作为挂载的元素；

3、是否可以设置其他的dom元素？

可以使用其他的双标签，不能使用HTML和BODY

五、data:数据对象

Vue实例需要使用的数据都会定义在data中，数据类型不仅仅是字符串，还有数组、对象等复杂类型。同时渲染时要遵守js的语法规则–对象的点语法，数组的索引语法等。