一、vue简介

1.1 描述

一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：把数据处理成界面

渐进式：可以从简单应用引入的轻量小巧核心库，扩展至各式vue插件

1.2 特点

1.组件化模式，提高代码复用率且便于维护；

2.声明式编码，无需直接操作dom（命令式），提高开发效率；

3.使用虚拟dom+优秀的diff算法（虚拟dom自动比较，相同则复用），尽量复用dom节点。

1.3 官网使用

Vue.js - 渐进式 JavaScript 框架 | Vue.js

学习-》教程（官方入门文档）、API（vue的字典，编写时遇到不会的方法看一下）、

风格指南（vue官方建议，要在学完之后才能看懂）、

示例（左侧鼠标变成双箭头拉动可以看到代码）、

cookbook（编码技巧js和vue）、

视频教程，前两个英文最后一个中文

生态系统-》vue cli脚手架、vue router路由

资源列表-》主题（收费）、awesome vue(了不起的vue，官方整理的第三方库，例如chars报表-》demo)、浏览和vue相关的包（第三方库）

二、安装（初学引入版）

浏览器vue插件

三、书写

3.1 引入vue

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue01</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js">
    </script>

</head>

3.2 构造一个容器

<body>
    <!-- 准备好一个容器来承接vue，让其帮我们构建页面 -->
    <div id="root">
        <h1>
            Hello,插值语法{{name}},{{address}},{{1+1}},{{Date.now()}}
        </h1>
    </div>
</body>

插值语法的双花括号里面，必须为js里的表达式

js表达式定义：一个表达式会产生一个值，可以放在任何一个需要值的地方；

a+b

demo(1)函数调用表达式,就算没有return也可以拿到undefind,也是值，特殊值

x===y?'a':'b' 三元表达式

均可以const=x

区分与js代码（语句）

if(){}

for(){}

是一个过程

js表达式是一个特殊的js语句，会产生一个值

3.3 创建vue实例

<script type="text/javascript">
        // 全局配置：设置为 false 以阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false;
            // 不知为何此处改不行，vue.js里搜索来改才行
        // vue是构造函数，得用new来调用,再来个实例对象来接:创建vue实例，只传一个参数，并且，参数类型是一个对象-配置对象（例如axios里的url不能改key的，可以改value）
        const x=new Vue({
            el:'#root'//相当于id选择器，将实例和容器之间建立关系，el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串，让代码自己找，不通常用法如下行
            // el:document.getElementById('root')自己亲自找到元素配置，了解即可
            ,// 多组key-value之间用,间隔
            // 将变化的数据，交给vue实例保管，存在data的对象里，数据供el所指定的容器使用,暂时写对象，用插值语法{{}}两个大括号引用
            data:{
                name:'云云', 
                address:'淳淳'
            }
        });

    </script>