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:
-
{
tag:‘h1’
attrs:{id:’.box’} //属性
children:“1906” //数组 也可以直接是文本内容
} -
{
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)