vue.js核心特性
- 数据驱动视图
是基于MVVM模型实现数据驱动
优点:基于MVVM无需要操作dam、vue与mode是分离的,耦合度很低
缺点:双向数据绑定,处理bug麻烦、项目越大mode越多,维护起来很麻烦
- 组件化开发
允许将页面的功能封装为自定义的标签,在操作是修改代码,直接找到位置组件的位置进行修改,封装好的组件,可以通过自定义
标签名进行使用,需要更改功能时,多处有使用的自定义标签的也随之被更改,增加开发效率,可维护行可高
vue实例
el选项
el选项是挂载元素,每一个实例里面都会有一个el选项,用于挂载目标元素,每一个实例里面的el选项,只能挂载一个目标元素,被挂载的目标元素标签的里面书写的vue
的代码全部生效。
挂载元素的方式
- 通过元素的id进行挂载
const app = new Vue({
el: '#app'
})
- 通过实例方式进行挂载
var app = document.getElementId('#app')
const vmApp = new Vue({
el:app
})
在挂载实例的时候,是不可以挂载HTML标签与Body标签
,这是需要重新进行挂载。
data选项
用于存储数据,在data里面定义的数据是响应的,当data里面绑定的数据被更改,页面上也会发生变化,在data里面定义的变量,是直接挂载在实例上面的,是可以通过实例打点进行调用
console.log(app.title)
data里面定义的数据是可以直接通过差值表达式可以访问的,访问的方式是通过变量名,或者是通过变量名调用内部的属性,对data里面的数据进行展示。
<body>
<div id='app'>
<h1>{{ title }}</h1>
</div>
</body>
<script>
const app = new Vue({
//元素内部就可以使用vuejs语法
el:'#app',
data:{
title:'hello vue.js'
}
})
</script>
- 在操作data里面的数据时,要是data里面的数据时数组的形式,那么,方法里面是不可以操作数组的length与索引值,如果需要操作数据,是需要是使用数组的方法进行数组的操作,这样是可以更新页面上的数据。
app.set(被修改的数组名app.数组名,索引/属性名 , 值)
methods选项
methods选项,内部是可以书写方法,是存储方法函数大量逻辑代码存储地,方法可以操作data内部的数据,或者是操作html
元素。
注意!在函数书/方法时,方法内部的this指向的实例,也就是说可以通过this调用实例上挂载属性,data里面的属性也是可以调用
const app = new Vue({
........
data: {
title: '展示内容'
},
nethods : {
fn () {
console.log(this.title)
}
}
})