Vue

vue.js

vue.js 是一套用于构建用户界面的渐进式框架

• 构建用户界面：UI页面（静态页面）
• vue 渐进式框架，Vue功能
  1.模板引擎 （把数据动态加载到指定页面中）
  2.组件 （模板封装页面增加复用性）
  3.路由 （多页面时，承担前端路由）
  4.状态管理器(管理数据–可伸缩性)
  5.自动化构建

引入

我们还是先通过 <script> 的方式来引入 vue

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

模板引擎：
1.得到一批数据（用户产生的，后端提供的数据）
2.将数据动态的组装（title的数据是什么样就组装成什么样）
3.将组装好的内容添加到页面的指定元素位置（el)

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

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

< div class="box">< /div>    
    
    <script>
        //模板引擎
        new Vue({
            el:".box",
            //组装页面
            template:`
            <h1>{{title}}</h1>
            `,
            data:{
                title:"替换了"
            }
        })
    </script>

Vue注意事项

• 1.模板生成后，会替换掉挂载点指定的元素

解决方法
template: < div class="box"> < h1>VUE基础</h1> < /div>,
但是挂载点依然被替换掉了

• 每个独立的模板有且只能有一个顶级的根节点

new Vue({
            el:".box",
            template:`
                <div class="box">
                    <h1>VUE基础</h1>                
                </div>
                <div class="box">
                    <h1>VUE基础</h1>                
                </div>
            `,           
        })

• 3.如果指定el,且没有template，那么el中的outerHTML将作为template，如果有的话，优先选择template中的内容

new Vue({
            el:".box",
            template:`
                 < div class="box">
                    < h1>VUE基础</ h1>               
                 </div>`
        })

render渲染函数

虚拟DOM:

1. {
   tag:‘h1’
   attrs:{id:’.box’} //属性
   children：“1906” //数组 也可以直接是文本内容
   }

2. {
   tag:‘div’
   attrs:{id:’.box’} //属性
   children：[
   {
   tag:‘div’
   attrs:{id:’.box’} //属性
   children:“1906”
   }
   ]
   }

new Vue({
            el:".box",
            render(creatElement){
                // return creatElement("h1","为了明天");
                return creatElement("div",{attrs:{class:'box'}},[
                    creatElement("h1",{attrs:{class:'h'}},"render渲染")
                ]);
            }
           
        })

延迟挂载

指定挂载点

• 1.el 挂载点 不能是body 和HTML
  box.$mount(“body”);

• 2.当实例被挂载以后，实例对象上就会有一个 $el 的属性，这个属性中的内容，就是挂载的元素

• 3.Vue实例上的内置属性都是以 $ 或者 _ 开头的

//延迟挂载
        let box = new Vue({
            el:".box",
            template:`
                <div class="box">
                    <h1>延迟挂载</h1>
                
                </div>
            `,      
        });
        console.log(box);
        box.$mount(".box");

data

组件内部使用的数据，data 是一个对象，data 中的值可以中模板中直接访问

• Vue 实例组件（根组件）的 data 是一个对象
• 可复用功能组件的 data 必须是一个函数，且该函数必须返回一个对象（因为复用性，避免多个组件实例引用同一个对象。换句话说，组件中使用的数据必须是一个对象，但是可复用组件的这个数据对象必须通过函数返回

data 的访问

data 数据可以直接通过组件实例对象访问，也可以通过实例对象下的 $data 属性进行访问

data注意点

• 1.在当前模板中可以直接使用（不需要去使用this一类的关键字）

• 2.data中的数据命名，不要使用$ _ 开头，因为Vue解析data以后，会把当前data中的数据加载到 实例对象中

插值表达式

在 {{}} 中，我们可以放置表达式值

let box = new Vue({
            el:".box",
            template:`
                <div class="box">
                    <h1>{{name}}</h1>                
                </div>
            `,
            data:{
                name:"姓名"
            }           
        });
        console.log(box)

视图更新

• 响应数据的变化（数据驱动视图）
• 数据的变化会自动更新视图（自动重新渲染页面）

改变数据 ， 修改数据的两种形式

app.title = '开课吧';
// or
app.$data.title = '开课吧';

数据劫持

defineProperties : 监听对象中的属性，单属性发生改变时，去调用一些方法,方法以对象的形式传进来

数据劫持原理
let $data = {x:1};
Object.defineProperty(obj,‘x’,{
//设置 的情况，get方法是不触发的
set(text){
$data.x = text;
render();
},
//获取obj.x 属性的时候，get方法才执行
get(){
return $data.x;
}
});

问题：无法对新增的属性进行监听（只能监听一个）

使用 Vue.set 方法添加新数据

方式一
// box.$set(box.obj,“y”,2);

方式二
Vue.set(box.obj,“y”,4)