前端实训-中级阶段(35)-Vue语法

前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。模板语法插值（模板字符串）可以使用{{}}来显示变量。这样如果作者内部修改了，页面也会实时更新。v-once指令可以进行单次渲染，后续变化不会更新。delimiters:['${','}']通过这个配置项，我们可以修改成习惯的分隔符。v-text和v-html插值基本等同于v-text。当然，有时候我们可能需要渲染HTML，比如表情、富文本等，我们可以使用v-html。当然不建议使用v-html，因为可能会出现xss问题。attribute绑定动态属性需要使用v-bind（缩写为：）。下面两种写法是等价的>如果是disabled之类的属性，当值为false时，不会渲染到DOM上。因为HTML5规范中有这个属性，所以为true。stylestyle属性经过特殊处理，可以直接使用对象形式。class类属性经过特殊处理，可以使用直接Object形式，Object形式，如下，当item.checked为true时，会添加checked类，当item.checked&&item.age>=18为true时，会添加isHigh类{checked:item.checked,isHigh:item.checked&&item.age>=18}数组形式，默认添加checkbox类all.['checkbox',{checked:item.checked,isHigh:item.checked&&item.age>=18}]Events事件在我们的开发中是必不可少的，比如点击，输入等，在Vue中我们使用v-on（缩写为@）来绑定事件，下面两种写法是等价的。btnbtn指令（Directives）有一个v-前缀，比如我们刚才用的v-绑定、v-on、v-text、v-html。指令的值应该是单个JavaScript表达式（v-for是一个例外）。指令的职责是在表达式的值发生变化时对DOM及其关联的效果做出反应。......btnbtnVue自带命令v-text更新元素textContent，个人感觉还是用v-html更新模板字符串中元素的innerHTML比较好，这里需要注意XSS防护。v-show将元素的显示切换为显示和隐藏。v-if、v-else、v-else-if通过组件销毁和重构实现显示和隐藏。v-for遍历，这里注意使用:key。