360SDN.COM

首页/Vue.js/列表

【Vue实战】5.基础知识_Vue文件结构之template

来源:  2018-03-14 10:12:34    评论:0点击:

1、XXX.vue的结构

一个XXX.vue就是一个组件,在Vue的世界里叫做Component。

实战的时候,一般一个面板、一个对话框划分为一个Component。

一个Component包含3段:

<template>:用于编写html

<script>:用于编写js脚本

<style>:用于编写css样式



 

2、template

template除了传统html5具有的语法以外,Vue的特色是有很多Vue扩展的标签、指令,也可以自定义标签、指令,具体怎么自定义后文再说。

Vue的官网对于这些基本概念和用法写的很详细,务必仔细阅读,这些知识点将是实战基础。

 

大实话:总结了一下,实战中如下技术点最常用

(1)动态绑定变量到html标签的content中

<div id="jquery">{{ divHtml }}</div>

(2)动态绑定变量到html标签的属性中

<marvel-tab-item :isActive="tabItems1[1].isActive">

(3)动态绑定class样式

<div v-bind:class="{ testClass: isTestClass}"></div>

(4)html模板中使用for循环

<li v-for="(item,index) in vFor">
  <label v-on:click="doSth">{{index + 1}}.{{item.text}} </label>
</li>

(5)input框的模型绑定

<input type="text" v-model="vWatch"/>

(6)指令

<pre v-highlight>

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权