小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
基础的一些Vue的东西分享下,带一点简单的代码实例,希望能帮助到一些入门的新手。
1、指令: v-bind 元素绑定
<p v-bind:title="ObjName"> String </p>
Vue的基础功能,将该标签的title属性与数据对象中的ObjName相绑定
2、条件与循环:v-if v-for
其渲染结果与php对html文件的操作类似,其条件从data对象中得来,和JavaScript中的功能等价,只是用于渲染dom
<div v-if="true">
显示
</div>
<div v-else>
隐藏
</div>
3、事件监听 v-on
例:v-on:click 点击
<div v-on:click="fn()">点击事件</div>
4、v-model 实现表单输入和应用状态之间的双向绑定
5、组件化概念
将一个项目分成多个界面, 将通用的功能抽出为单个组件。
6、v-once 一次性插值
使用该命令插入值时,修改值将不会触发响应式
同时也会影响该节点上的其他数值绑定
7、v-html 使用html代码
使用该命令可以将data对象中的一段html代码输出在网页中并正常渲染。
<div v-html="<a href='#' >content</a>"></div>
最终就输出a标签,通常用于渲染后端返回的指定内容。
8、命令缩写
<a v-bind:href="url" />
// 等价写法
<a :href="url" />
<div v-on:click="fn" ></div>
// 等价写法
<div @click="fn" ></div>