VUE基本语法(学习笔记)

什么是VUE:
渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式
Vue的基本使用
引用vue.js 准备要挂载的标签 创建vue对象,进行挂载
VUE基本语法(学习笔记)

el:

指定相应的挂载对象 可以使用id,class,标签(建议使用id挂载) 挂载后代表这个标签被vue接管

data:

vue对象准备的数据 这个数据发生变化后,用到它的view部分值也改变

methods

vue中对象的方法 在html中 {{方法()}} 在js vue对象.方法() 方法中的this就是指这个vue对象

VUE表达式

做四则运算(+,-,*,/) 三目运算符
表达式中可以写加减乘除(如果有字符串,加法会拼接,其它的正常运行
VUE基本语法(学习笔记)
VUE基本语法(学习笔记)

VUE的指令

v-text,v-html :展示相应的数据
text和html的差别是html会解析标签元素
VUE基本语法(学习笔记)
v-for :循环 (可以遍历数组,对象,数字,字符串)
VUE基本语法(学习笔记)VUE基本语法(学习笔记)
v-bind: 绑定属性
VUE基本语法(学习笔记)
v-model: 数组双向绑定(input,select,textarea)它会监听用户的输入事件以更新数据
VUE基本语法(学习笔记)VUE基本语法(学习笔记)

v-show:(只是看不到,它其它还在)显示也隐藏
VUE基本语法(学习笔记)VUE基本语法(学习笔记)
v-if: 判断
VUE基本语法(学习笔记)
if条件不满足的话,这个元素都不会出现VUE基本语法(学习笔记)
v-on: 注册事件
VUE基本语法(学习笔记)

VUE基本语法(学习笔记)

VUE组件:

先创建组件后挂载 template(模块)中,有且只有一个根 取名用小写(如果是驼峰 myTag -> my-tag)
全局组件:
VUE基本语法(学习笔记)VUE基本语法(学习笔记)
局部组件:只能在当前被挂载的元素中使用
VUE基本语法(学习笔记)