初识vue与环境搭建（一）

# 一、初识

• Vue框架是一个MVVM框架，Module和view是双向绑定的。vue没有控制器的概念，它的核心思想是数据驱动，状态管理，以及组件化。
• 因此在我们js编程中，不会去操作DOM、class，更多的关注我们的数据层面。去改变一个变量，通过变量来控制我们的视图，通过事件绑定、状态管理来进一步渲染视图。
• MVVM框架的特点是没有控制器，通过view和module来进行交互，实际上底层已经帮我们封装了

# 1.1概况

• Vue本身不是一个框架
• Vue结合周边的生态构成一个灵活的、渐进式的框架

# 1.2核心思想

• 数据驱动【只关注数据层面】
• 组件化

# 1.3双向数据绑定

Object.defineProperty在双向绑定中起来很重要作用

<input type="text" id="userName">
<span id="uName">

var obj = {}

object.defineProerty(obj,"userName",{
    get:()=>{
        
    },
    set:(val)=>{
        $("#uName").innerHTML = val
        $("#userName").value = val;
    }
})
$("#userName").on("keyup",function(){
    obj.userName = event.target.value
})

# 1.4 模板语法

• 数据绑定 msg
• html语法 v-html
• 绑定属性 v-bind:id=
• 使用表达式 ok?'yes':"no"
• 文本赋值 v-text=
• 指令 v-if
• 过滤器 message|capitalize 和 v-bind:id='rawld|formatld'

# 1.5 Class和Style绑定

• 对象语法：v-bind:class="{ active:isActive,'text-danger':hasError }"
• 数组语法：

<div v-bind:class="[activeClass, errorClass]"></div>

<script>
    new Vue({
        data:{
            activeClass: "active",