vue入门（一）

理解vue的核心理念

官方文档解释

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。

vue的兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

对比其他框架-React
React 和 Vue 有许多相似之处，它们都有使用 Virtual DOM；提供了响应式（Reactive）和组件化（Composable）的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。React 比 Vue 有更丰富的生态系统

都有支持native的方案，React的RN，vue的Wee下

都支持SSR服务端渲染

都支持props进行父子组件间的通信

性能方面：React 和 Vue 在大部分常见场景下都能提供近似的性能。通常 Vue 会有少量优势，因为 Vue 的 Virtual DOM 实现相对更为轻量一些。

Vue 核心

声明式渲染
组件

优点

轻量级
移动优先
易上手
吸取了Angular (模块化)和React (虚拟DOM)的长处，并拥有自己独特的功能
开源

MVVM模式的实现者

Model:模型层，在这里表示JavaScript对象
View:视图层,在这里表示DOM (HTML操作的元素)
ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而
ViewModel就是定义了一个Observer观察者
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel能够监听到视图的变化，并能够通知数据发生改变

安装VUE运行环境

安装node.js,Node.js 下载地址：https://nodejs.org/en/download/

   安装cnpm:在命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org,等待安装完成

  `安装vue-cli脚手架构建工具,在命令行输入npm install -g vue-cli(这个是vue2.0安装命令,如果是3.0以上请输入npm install -g @vue/cli),等待安装完成,

在idea中安装vue插件

重启环境vue就配置好了
创建工程

声明式渲染

只要在当前页面导入以下连接
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

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

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

就可以使用vue了
简单开发 使用的HBuilder开发工具
第一个vue实例 一共有三个步骤：
1.导入开发版本的vue.js
2.创建vue实例对象设置el属性和data属性
3。把数据渲染到魔板上

<div id="app">
  {{ message }}<!--插值表达式-->
</div>

var app = new Vue({
  el: '#app', <!--#  id选择器-->
  data: {
    message: 'Hello World!'
  }
})

效果

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

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

只有el：元素命中的内部才有效。
是否支持其他选择器：
加入一个class属性

使用class选择器

依然可以用

标签选择器也可以使用

建议使用id选择器
data属性：
可以写复杂数据

<div id="app" class="app">
  				{{ message }}
  				{{student.age}}
		</div>

var app = new Vue({
   			el: '#app',
 			 data: {
    			message: 'rpf',
    			student:{<!--写一个对象属性-->
    				name:"xx",
    				age:"22"
    			}
 			}
		})