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; //返还数据
}
})