Vue

vue-cli

卸载Vue2.0

npm uninstall -g vue-cli 

安装vue-cli

查看版本

创建项目

创建项目的配置

通过上下箭头可设置选项,按回车键确定

运行项目

注意

  • local:个人创建的Vue项目
  • Network:团队创建的Vue项目

Vue目录分析

目录
Vue_第1张图片

目录解析

Vue_第2张图片

数据绑定

数据绑定的常见方式便是{{}},也被称为插值表达式

数据绑定的方式

  • v-text:相比插值表达式更加简洁,且没有闪动问题
  • v-html:填充HTML片段,具有跨站脚本攻击
  • v-pre:跳过编译过程,显示原始信息






Vue_第3张图片

Vue中的循环

v-for

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表:







Vue_第4张图片

Vue属性绑定

v-bind:绑定属性 可省略为: 动态地绑定一个或多个 attribute






Vue_第5张图片

Vue动态绑定样式

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组

class绑定样式

你可能感兴趣的:(vue.js)