前端小白学习Vue2框架（一）

一.Vue是什么？

Vue是用于构建界面的javascript库，是一个渐进式框架，那么什么是渐进式呢？

渐进式：声明式渲染 > 组件 >路由  >  状态管理  > 脚手架

 vue是以数据驱动为主的javascript库

数据改变更新页面，页面改变更新数据 ，vue是数据双向绑定的框架

与之前的jquery库相比，可以知道jquery是以dom操作为中心的javascript库

那么先前的bootstrap响应式框架呢？

bootstrap 是响应式框架 (ui响应式)          Vue也是响应式框架 （data数据响应式）

 2.理解命令式编程

从一可得，vue是以数据驱动的响应式框架，这种是注重过程的命令式编程与之前的声明式编程（注重结果）完全不同，生命式编程就是以dom操作为主

 如何了解Vue语法?

 官网地址： Vue.js - 渐进式 JavaScript 框架 | Vue.js

 vue@2文档    ​​​​​​Vue.js

1.下载vue.js文件，通过script标签导入到项目中

2.创建Vue实例

3.处理交互逻辑

废话不多说我们来通过按钮控制数据实现开关等灯吧，通过下面的案例，我们可以看到，整个案例没有获取过dom对象，是通过指令去改变实例中的data数据，实现数据双向改变从而实现交互效果的过程

<div id="#app"   v-bind:style="`background-color: ${color};height: 900px; 
overflow: hidden;`">
  <button>点击开关</button>
</div>


<script>
    new Vue({
    el:'#app',
data(){
    return {
color:'#fff',
   isShow:true
},
methods:{

   addEvent(){

    if(this.isShow){
       this.color='red'
}else{
      this.color="#fff"
}
       this.isShow=!this.isShow
}
}

}


})
</script>

 三.理解什么是MVVM？

MVVM是一种软件设计模式  ，MVVM是Model-View-ViewModel的简写，MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离，保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变

四.模板语法与指令？ 

//通过两个括号形成
//模板语法  {{}}
<div id="app" v-cloak>
    <h2>{{123}}</h2>
    <!-- 报错 直接填写abc, 既不是字符串，也不是变量 -->
    <!-- <h2>{{abc}}</h2> -->
    <h2>{{'abc'}}</h2>
    <!-- 可以书写三元运算 -->
    <h2>{{typeof 'abc' === 'string' ? '字符串类型':'其他类型'}}</h2>
    <!-- 可以填写变量 -->
    <h2>{{title}}</h2>
  

</div>


new Vue({
        //挂载容器
        el: "#app",
        // 添加属性
        data: {
            title: "标题2222"
        }
    })

//指令
//模板中是虚拟dom (JS对象)，使用指令可以操作
//设置文本
v-text    v-html

//设置属性
v-bind  (style ,class ,src.....)


//数据双向绑定
v-model

//条件渲染
v-show     v-if

列表渲染
v-for

//事件绑定
v-on:click="事件名称"
@click="事件名称"

 自定义指令

   <h3 v-mytext="2024"></h3>

   new Vue({

     directives:{

      mytext:{

      inserted(el,option){

       if(typeof el==='object'){
        el.innerHTML=option.value
      
}
}
}
},
})

事件修饰符 

阻止事件冒泡     @click.stop

阻止事件捕获     @click.prevent.self    @click.capture.stop

@keydown.a  按下键盘a按键触发行为     @keydown.enter  按下键盘回车按键触发行为