Vue.js基础知识总结-常用指令用法

时间：2023-03-31 17:14:30 vue.js

Vue基础知识本文主要涵盖Vue常用指令知识点、计算属性和监听器知识点自下而上层层应用Vue的核心只关注视图层，这是一个允许使用简单的模板语法将数据声明式渲染到DOM中的系统常识，用法和功能Vue指令只能绑定到Vue实例在Dom元素中使用插值表达式和v-directives，都支持编写JavaScript表达式这些表达式在其所属的Vue实例的数据范围内将被解析为JavaScript每个绑定只能包含单个表达式模板表达式被放置在沙箱中，并且只能访问全局变量的白名单，例如Math和日期。模板表达式中不要访问用户定义的全局变量:

作用：{{message}}关联本元素所在Vue实例中的message属性，将Vue实例的消息内容输出为普通文本注意:插值表达式它不能用于HTML属性。这种情况下，使用v-bind指令v-bind指令用法：{{message}}

缩写：v-bind:attrName="attrVal"即可简写为：attrName="attrVal"作用：v-bind用于绑定HTML属性，可以是自定义属性，也可以是普通属性如：title、class等。对于HTML布尔型属性，当v-bind绑定值为null、undefined或false，布尔属性将不会呈现到标签元素中。注意：如果布尔属性设置为空字符串，则该属性的值为trueClass绑定对象语法用法：

解释：className为类名isCanShow布尔值；decision是否将类名添加到类数组中语法用法：

解释：className为类名，alwaysHave为不是一直存在需要判断，vueProperty对应的值不需要判断，直接存入类isCanShow布尔值；判断是否给类加上类名（三元表达式返回）：类可以和普通类共存用法：