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)
        }
    }
})

vue实例内部每一个选项