vue 第一天

vue-介绍

三大前端框架

Vue

Vue.js (view)是一套构建用户界面的前端框架技术

内部集成了许多基础技术，例如html、css、javascript、ajax、node等，当然还有vue本身高级技术体现，例如组件、过滤器、指令、路由、webpack等等

2012年出现，是中国人 尤雨溪 开发的，2016年3月 加入阿里巴巴公司(该事件助推了vue的发展)

jquery：库 侵入性弱 (工具 库)，项目 对其进行 安装卸载 非常方便

vue：框架 侵入性强 (框架)，项目 从内到外 都是vue，不可以随便拆卸

Vue只关注视图（页面）层的开发，文档非常丰富、易于上手，流行度高，拥抱经典的web技术、早期灵感来源于angular

vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点

支持所有兼容ECMAScript 5的浏览器，IE9以上

vue是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！

学习Vue前的技术准备：

• 掌握 HTML + CSS + JS 基本网页制作能力
• 了解Node基础概念、包、模块化，会用 npm 维护项目中的包即可
• ES6/ES7 基础语法要会用，在Vue课程中我们也会补充更多的ES6

使用vue的公司

小米、阿里、百度、饿了么、掘金、苏宁易购、美团、天猫、Laravel、htmlBurger、哔哩哔哩直播、哔哩哔哩商城

github上vue框架的“点赞”次数，可见vue的流行程度高于react和angular

angular

2009年出现，google公司出品

Angular.js 出现最早的前端框架，曾经很火，但是现在已经 被边缘化了；也不好学；

Angular 1.x 学起来好麻烦；

Angular 2.x ~ 5.x 学习起来相对简单；

TypeScript(javascript超集)

新旧版本没有平滑升级

使用特点：强侵入，凡事都必须遵循angular的规则

React

2010年出现，facebook公司出品

React.js 是目前最流行的一个框架；是用的人最多的一个框架；但是，学习起来也比较难，因为在 React中，所有的功能，都要用 JavaScript 来实现；

JSX(JavaScript XML/Xhtml) & ES2015(es6) 一切都是javascript、包括html、css

针对初学者太笨拙，难以掌握，有些地方的代码看起来完全没有逻辑性，学习过程痛苦

其他框架

Ember

Knockout

Polymer

Riot

。。。

为什么要学习流行框架

• 最先进最前沿的开发模式(前后端分离)
• 提升项目开发效率(节约成本)
• 应用最前沿技术es6/es7
• 前端不是做辅助工作的，而是主力开发者、增加开发话语权、由被动变为主动、增强核心价值/核心竞争力

获得vue

网址：

https://cn.vuejs.org 官方地址(服务器在外国，访问速度慢)

https://vue.docschina.org/ 官方地址镜像(服务器在中国，访问速度快)

最新稳定版本：2.6.11

1. 直接下载

• 开发版本：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
• 生产版本：https://cdn.jsdelivr.net/npm/vue

2. CDN(Content Delivery Network内容分布式部署)

在应用中通过script标签直接引入一个完整路径名的vue文件包

该方式要求具备上网环境

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

3. 使用 npm下载（默认安装最新稳定版）

   npm install vue

注意：

Vue.js 不支持 IE8 及其以下版本

vue-简单使用

目标：

通过vue输出城市和天气信息

步骤：

1. 创建div容器
   
   { { city }}----{ {weather}}
2. 引入vue.js文件
   
3. 实例化Vue对象
   var vm = new Vue({
   el: ‘#app’,
   data:{
   city:‘北京’,
   weather:‘snow’
   }
   })

注意：

1. Vue需要有目标操作容器，可以是div、p、span等等标签，推荐div，所有被Vue处理的内容都放到该容器中
2. { {}} 是Vue内容，浏览器上看不到，最终要被解析掉
3. { {}}双花括号是Vue语法，后期详解
4. el、data 是Vue内部固定的标志名称
5. data内部可以声明一个或多个数据供使用
6. el:’#app’ 是通过id="app"联系容器，也可以通过其他“选择器”联系
7. 模板中所有内容需要体现到div容器里边

示例代码：

 <!-- 2. 创建一个供vue操控的 标签容器(推荐是div) -->
  <div id="app">
    <!-- 输出vue实例的data数据 -->
    {
  { city }}--------{
  { weather }}
  </div>

  <!-- 1. 引入vue文件包，此时系统增加了一个全局变量，名称为Vue(类似引入jquery.js，系统增加$符号全局变量) -->
  <script src="./vue.js"></script>

  <script>
    // 3. 实例化Vue对象
    var vm = new Vue({
      // el:'选择器' ,// el固定名称，理解为element，使得 Vue实例 与 标签容器 联系
      el:'#app',
      // data固定名称，给 Vue实例 声明数据，用于使用
      data:{
        city:'北京',
        weather:'sunshine'
      }
    })
  </script>

Vue-MVVM设计模式

目标：

了解MVVM各部分含义 和 对应代码

mvvm设计模式可以解读为如下：

m: model 数据部分 data

v：view 视图部分 div容器

vm： view & model 视图和数据 的 结合体

vue指令

插值表达式

目标：

熟练使用插值表达式

vue中如果需要在html标签的“内容区域”中表现数据，就可以使用{ {}}双花括号，这个技术称为插值表达式

语法：

<标签> {
  { 表达式 }} </标签>

表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等

使用示例：

<div id="app">
  <p>{
  { msg }}</p>										<!--变量-->
  <p>{
  { score }}</p>  								<!--变量-->
  <p>{
  { 500 }}</p>  									<!--常量-->
  <p>{
  { score+10 }}</p> 							<!--算术运算-->
  <p>{
  { score>10 }}</p> 							<!--比较运算-->
  <p>{
  { score>80 && age>18 }}</p>  			<!--逻辑运算-->
  <p>{
  { age>18 ? '成年' :'少年' }}</p>  	<!--三元运算-->
</div>

如果{ {}}使用中有冲突，想更换为其他标记，可以这样：

delimiters:['${'，'}$']  // 标记符号变为${  }$了 

使用要点：

1. 在插值表达式中 只能设置简单的javascript表达式，不能设置复杂表达式(例如for循环)
2. 在data值大小不改变的前提下，可以进行一般的 算术运算、比较运算、逻辑运算、三元操作符 等运算使用，也可以通过常量进行数据体现
3. 插值表达式只能用在html标签的内容区域；不能用在其他地方
4. { {}}花括号与变量之间为了美观可以有适当的空格，数量不限制，例如{ { msg}}、{ {msg }}、{ { msg }}}等都可以，为了美观，表达式左右各一个空格即可

示例代码：

 <div id="app">
    <p class="{
  {city}}">{
  { city }}</p>
    <p>{
  { people }}</p>  <!--变量-->
    <p>{
  { 300 }}</p>  <!--常量-->
    <p>{
  { people+400 }}</p>  <!--算术-->
    <p>{
  { people>1000 }}</p>  <!--比较-->
    <p>{
  { people>1000 && city==='北京' }}</p>  <!--逻辑-->
    <p>{
  { people>1000 ? '超级城市' : '大城市' }}</p>  <!--三元运算-->
  </div>
  <script src="./vue.js"></script>

  <script>
    var vm = new Vue({
      // delimiters:['$','#'],
      el:'#app',
      data:{
        city: '北京',
        people: 2000
      }
    })

  </script>

效果：

练习：

在data中声明 score1 和 score2两个变量，分别赋予一定的数字

两个变量做算术和，判断总数大小并显示相关信息，大于600显示‘清华’，否则显示'北大'	

v-text