vue课堂笔记

Vue简介

软件开发的形式比较流行前后端分离。前端主要负责数据展示和用户交互，比如各大网站以及相应的App， 后端主要是编写提供数据的API。

工作中，如果碰到了让你去编写一个API接口，是不是就让你写一个interface？ API接口包括数据库 + Dao层 + 控制层(Servlet) {只返回数据，格式一般是 JSON}

Vue.js ,发音读音 /vjuː/，类似于 view，是一个用于构建用户界面的渐进式框架。也成为前端框架。也成为MVVM框架。

MVVM：Model  View  View  Model, 称为双向绑定， 数据模型发生变化，视图会自动更新，反之也成立。

Vue的模板语法

插值

• 文本： {{msg}}
  • 只绑定一次 ：<span v-once>{{msg}}</span>
• 原始html：<span v-html="code"></span>
• 特性：让属性值是动态的 
  • <span  v-bind:id="msg"></span>
• 表达式
  • {{ ok ? 'Yes' : 'No' }}
  • {{ msg.split('').reverse().join('') }}

指令和缩写

Directives 指令，是以 v- 开始的特殊html属性。

• <p v-if="seeb"></p> : 根据变量seen的值判断是否需要渲染 p 标签
• v-show : 用法同上，根据变量值判断是否显示和隐藏元素
• v-bind : 特性，动态绑定属性值, 缩写为 ：
• v-on : 绑定事件 ， methods : {}  , 缩写为 @
• v-for : 数据循环
  • <p  v-for=“(item,index) in items”> {{index}}  {{item}}<p>

计算属性和监听

class和style样式绑定

条件渲染

列表渲染

事件处理