vue基础知识

就是构建用户界面的渐进式 JavaScript框架

就是那大数据以后，怎么变成动态的页面
渐进式：vue可以自底向上逐层的应用

特点：
组件化，提高代码复用率，并且让代码更好维护
.vue 就是一个组件，封装了
声明式代码：让编码人员不需要直接操作DOM，提高开发效率：v-for
虚拟DOM+优秀Diff算法，尽量复用DOM节点

前提：
ES6语法规范
ES6模块化
包管理器
原型、原型链
数组常用方法
–axios
–promise

Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列 property：

关掉提示

1.入门

1. 想让Vue 工作，必须创建一个vue 实例 ，还要传入一个配置对象
2. root 容器里的代码依然符合 html 规范 ，只不过多加了 vue 的一些语法
3. root 容器里的代码称为 vue 模板
4. vue 容器和实例时一一对应的
5. 真实的开发中只有一个 vue 实例，并且会配合组件一起使用
6. {{xxx}} 中的 xxx 要写 j 表达式，且 xxx 可以自动读取到 data 中的所有属性
7. 一旦 data 中的数据发生改变，模板中用到的东西也会更新

<!DOCTYPE html>
<html lang="en">

<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>vue1</title>

    <script type="text/javascript" src="./vue.js"></script>
</head>

<body>
    <!-- 准备容器 -->
    <!-- 快捷键； div#root -->
    <div id="root">
        <h1>hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//以阻止 vue 在启动时生成生产提示。

        // vue 是一个构造函数，需要通过 new 来创建
        // 创建  vue 实例
        new Vue({
            // el:document.getElementById('root') 等价
            el: '#root',//  这是id选择器，如果是类选择器，就是 .root   el 用于指定当前vue 实例为那个容器服务，值通常为 css 选择器字符串
            data: {// 对象
                // data 中用于存储数据，数据供 el 所指定的容器使用
                name: 'hxb'


            }
        })



    </script>
    </script>
</body>

</html>

2. 分析代码

区分： js 表达式和 js代码（语句）

  1.表达式：一个表达式会产生一个值，可以放在让你和一个需要值的地方
    a
    a+b
    demo(1)
    x===y ? 'a' :'b'
    
    2. js 语句(代码)
        if(){}
        for(){}

MVVM

M:model 模型—包括数据和基本操作——对应data 中的数据
V： view 视图，页面渲染结果——模板
VM，view-model：模型与视图间的双向操作——Vue 实例模型