Vue-安装和理解

vue中用cdn引入vue.js的方式——作者：尤玉溪

1.index.html中添加第一个script链接：

src=“https://cdn.bootcss.com/vue/2.5.10/vue.min.js”>

2.vue_cli3架构的vue在vue.config.js中添加

	configureWebpack: config => {
	config.externals = {
	‘vue’: ‘Vue’
	}
}

模板引擎：

1.得到一批数据（用户产生的，后端提供的....）
            2.将数据动态的组装
            3.将数组装好的内容添加到页面的指定元素（位置）

            el：挂载点
            template：模板（最终形成ui的  原始结构）
            date：数据；

            vue帮助我们做的事情：将data和template总结和，最后添加到挂载点上

vue基础

1.模板生成后，会替换掉 挂载点指定的元素
             2.每一个独立的模板有 且只能有一个顶级的根节点
             3.如果指定el，且没有template 那么el中的outerHTML将作为template
                如果有的话，有点优选选择template中的内容

            vue 渲染
            template => CDOM（虚拟dom）=> html

延迟挂载

data

1. 在当模板中可以直接使用（不需要去使用this一类的关键字）
2. data 中的数据命名 不要使用$ _ 开头 因为Vue 解析data 以后， 会把当前data中的数据加载到 实例对象中

 let app = new Vue({
        //el:"app",
        template:`
            <div id="app">
                <h1>为了今天</h1>
            </div>
        `
    })
    console.log(app);

• 指定挂载点

	 1.el 挂载点 不能试body 和 html
	 2.当实例被挂载以后：实例对象上就会有一个$el 的属性中存的内容，就是挂载的元素
	 3.vue实例上的内置属性都是以$ 或者_开头的
	 app.$mount("#app");

试图更新

影响数据的变化（数据驱动视图）
数据的变化会自动更新视图（自动重新渲染模板）

数据劫持

let app = document.querySelector("#app");

  function render() {
        console.log("渲染开始");
        app.innerHTML = obj.x;
    }
    let boj = {
        x:1
    };
    render();

    //obj.x = 200;
    //render();
    // 数据劫持
    let $data = {x:张三};
    console.log($data);
    object.defineProperty(obj,'x',{
        set(newVale){
            obj.x = newVale
        },
        get(){
            return $data.x;
        }
    });
    
	问题：无法对对新增的属性进行监听（只能监听一个）