Vue基础内容分享

219 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

基础的一些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 实现表单输入和应用状态之间的双向绑定

image.png

5、组件化概念

image.png

将一个项目分成多个界面, 将通用的功能抽出为单个组件。

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>