vue基础入门

Vue

(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
veu学习过程（渐进式）
1.模板引擎 2.组件增加复用性 3.前端路由 4.状态管理器(管理数据-可伸缩性)
5.自动化构建

  <div id="app"></div>  

        new Vue({
           el:"#app",
           template:`
             <h1>{{title}}</h1> 
           `,
           data:{
               title:"为了联盟"
           } 
        });

模板引擎：
1.得到一批数据(用户产生，后端提供…)
2.将数据动态的组装({{title}})
3.将组装好的内容添加到页面的指定元素(位置)el
el:挂载点
template:模板(最终形成ui(页面)的原始数据)
data：数据
vue 帮助我们做的事情：将data和template相结合，最终添加到页面
let app = new Vue(创建组件所需要的一些配置选项);
1.模板生成后，会替换掉挂载点的指定元素
2.每一个独立的模板 有且能有一个顶级的根节点
3.如果指定了el，且没有template模板 那么el中的outerHTML(比innerHTML范围广)
将作为template模板 就是说拿原始数据渲染（原封不动）
4.如果有template模板优先选择template模板渲染
vue渲染：先去渲染到虚拟的dom，虚拟DOM处理后把结果给真实的DOM
指定挂载点后 虚拟dom加载上来的时候 指定 会被替换掉，虚拟dom处理完后把结果返回给真实的dom
template => VDOM(虚拟dom) =>html

render函数

render渲染模板
render 函数接收一个createElement(自定义)方法作为形参，这个参数就是虚拟dom

            new Vue({
                el:"#app",
                render(createElement){  // render里套一个render
                    // return createElement("h1","我是替换进来的")
                    return createElement("div",{attrs:{id:'app'}},[
                        //                参1   参2
                    createElement("div",{attrs:{id:'h'}},"1906")
                    // 参3
                    ])
                }
            })

挂载及data数据

1.在当前模板中直接使用(不需要去使用this一类的关键字)
2.data中的数据命名中，不要使用$ _开头
因为Vue解析data以后，会把当前data中的数据加载到实例对象中，实例对象中有 $和 _ 等字符 这样就容易发生冲突
代码执行流程：通过{{}}语法加载到模板中，模板加载到虚拟dom，虚拟dom送到指定的挂载点上

<div class="app"></div>

        let app = new Vue({
            el:".app",
            template:`
            <div class="app">
                <h1>{{name}}</h1>
            </div>
            `,
            data:{
                name:"在上课呢"
            }
        })

1.el挂载点不能是body 和 html
2当实例被挂载以后，对象上就会有一个$el的属性，这个属性中存内容就是挂载的元素
3.vue实例的内置属性都是以 $ 或者 _ 开头的( $ 和_不能使用)
4.指定挂载点后 虚拟dom加载上来的时候 指定 会被替换掉，虚拟dom处理完后把结果返回给真事的dom
app.$mount(".app") //可以做一些延时加载等…

视图更新及实现原理（劫持）

数据劫持(变相的数据监听只要数据发生改变 把它劫持过来去做两个事)一个set()方法，一个get()方法
Object.defineProperty 监听对象当中的单一属性，当对象中的属性
发生改变时候调用一些方法 不能监听整体对象

        let app = document.querySelector(".app")
        function render(){
            console.log("开始渲染了")
            app.innerHTML = obj.x + '/'+obj.name//这里不获取 get方法不触发
        }
        let obj = {
            x : 1
        }
        render();
        obj.x = 20
        render(); //这样是手动渲染；先手写数据，调用render()方法
        let $data = {x:1}; //冒充数据
        // 三个参数            对象 属性 方法
        Object.defineProperty(obj,"x",{
            set(newVale){ //设置
                $data.x = newVale 
                //当x发生改变调用set方法 把x的新值给newVale，newVale值给替代品data.x 
                render(); //然后调用render方法 渲染时写不知道obj.x是什么 
                        // 会走触发get方法 get方法返回data.x值给 obj.x
            },
            get(){ //获取
                return $data.x; //返还数据
            }
        })