本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天叶秋学长要跟大家一起学习VUE的基本语法，现在跟着叶秋学长一起学习VUE框架吧
vue基本语法
概念: 是一套用于构建用户界面的渐进式框架
思想:
- js:获取元素,操作,样式,属性,值
- vue:先有数据,绑定数据,操作数据
开发者工具插件下载
关闭生产提示
Vue.config.productionTip = false
一.插值操作
1.Mustache
用于绑定数据,数据是响应式,同时还可以做一些简单的表达式
语法:{{}}
2.v-once指令
该指令表示元素跟组件只渲染一次,不会随着数据变化而变化
<h1 v-once>{{msg}}</h1>
3.v-html指令
该指令可以把字符串解析成标签,使用mustache是显示原本内容
<h1 v-html="msgHtml"></h1>
4.v-text指令
效果跟mustache是一致
<h1 v-text="msgHtml"></h1>
5.v-pre指令
跳过vue的语法解析,直接显示{{}}
<h1 v-pre>{{msg}}</h1>
6.v-cloak
设置页面未渲染,样式,有个过程
<h1 v-cloak>{{msg}}</h1>
二、绑定属性
1.v-bind指令
动态去修改元素属性
普通写法v-bind:
缩写 :
注意:v-bind:属性名="变量(data里面的键)"
2.绑定class
写法 :class="xxx"
xxx:字符串,对象,数组
- 字符串:适用于样式类名不确定,需要动态指定
- 对象:绑定样式的个数名字确定,动态决定用不用
- 数组: 要绑定样式个数和名字都不确定
3.绑定style
语法
:style={样式属性名:xxx},其中xxx就是动态值
:style="[a,b]",a和b是样式对象
三、方法
methods:{}
绑定事件处理事件
四、计算属性
computed
有些数据需要处理完之后再显示
计算属性名字不能与方法,data中的名字一样
computed缓存
具有缓存的效果(如果数据是一样的触发缓存,不会像方法一样一直调用)
五、绑定事件
1.使用
v-on绑定
格式
v-on:事件类型 = "函数名"
简写
@事件类型 = "函数名"
2.参数问题
没有参数,省略小扩号
绑定函数默认有一个事件对象,写$event当参数
本期分享到此为止，关注博主不迷路，叶秋学长带你上高速
