vue一小时入门

1、Vue.js是什么?
vue就是一个js库,核心只关注视图层 。
2、为什么使用?

  • 声明式,响应式的数据绑定
  • 组件化的开发
3、MVVM模式
【vue一小时入门】vue的核心是mvvm模式,mvvm是Model-View-ViewModel的简写 。
Model:【模型】指的是传递的数据 。
View:【视图】指的是页面 。
ViewModel:【视图模型】mvvm模式的核心,它是连接【视图】和【模型】的桥梁 。
它有两个方向:
一是将【模型】展示到【视图】 , 即将数据展示到页面 。实现的方式是:数据绑定 。
二是将【视图】转化成【模型】,即将页面转化成数据传递到后端 。实现的方式是:DOM 事件监听 。
这两个方向都实现的,称之为数据的双向绑定 。
4、Vue入门
{{ message }}
  • 视图
  • 视图模型 new Vue() ( el: '#app':绑定视图 )
  • 模型 {message: 'Hello Vue!'}


5、常用指令
  • V-if

{{ msg}}测试V-if
  • V-else

小于等于10大于10
  • V-else-if

小于等于1010 && age<15">大于10并且小于15大于15
  • V-for循环

  • {{item.name}} {{item.age}}
  • V-show 判断是否显示

{{ msg}}测试V-if测试v-show
  • V-model 数据双向绑定

  • V-bind绑定属性

绑定style绑定class绑定style绑定class
  • V-on 绑定事件

6、Vue实例 生命周期钩子

7、计算属性和侦听器

语文数学英语总分:{{ zongfen }}总分:{{ zongfen }}8、组件
  • 组件注册

  • 组件自定义属性(父子组件之间 “传值”)

  • 监听子组件事件(子组件传值到父组件)

相关经验推荐