vue页面结构及常用指令汇总

一、页面基本结构

<template>
  <!--界面展示，渲染页面-->
</template>

<script>
  /*js代码*/
</script>

<style>
/*页面样式*/
</style>

下面着重介绍一下script中的常用业务实现，根据业务需要选择合适的方法

<script>
  import mycomponent from './component/mycomponent.vue'

 //用export default 包裹方法，es6语法，页面中仅有一个
  export default {
    name:'test',
    data(){//数据定义
      return {
        names: ["zhang", "li", "wang"]
      }
    },
    methods:{
      //组件方法，js调用在这里写
    },
    components:{
      //加载组件，在页面中可以直接使用作为标签
    },
    computed:{
      //计算属性，当依赖的数据发生变化时可以重新计算
    },
    watch:{
      //监听属性，主要针对data中定义的数据进行监听
    },
    created:{
      //html渲染前需要执行的事件，通常是初始化某些属性值，再渲染视图
    },
    mounted:{
      //html渲染后需要执行的事件,通常是初始化完成后，对dom的操作
    },
  }
</script>

二、常用指令汇总

1.v-text 更新元素的 textContent

<span v-text="msg"></span>

2.v-html 相当于js的innerHTML 

<div v-html="html"></div>

3.v-show  页面加载就渲染,切换元素的 display 属性

<h1 v-show="ok">Hello!</h1>

4.v-if    v-else-if    v-else  条件判断

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  Not A/B
</div>

5.v-for  遍历渲染模板

 <ul>
    <li v-for="(item,index) in user" :key="index" >
       <span>{{item.name}}</span>
       <span>{{item.age}}</span>
     </li>
 </ul>


 export default {
    data () {
      return {
        user:[{
          name:"学生1",
          age:20
        },{
          name:"学生2",
          age:18,
        }]
      }
    }
  }

6.v-on  主要用来监听dom事件，以便执行一些代码块，函数必须写在methods里

<template>
    <button v-on:click="handlerClick">加1234</button>
</template>

<script>
 export default {
    methods:{
      handlerClick(){
        console.log("绑定点击事件")
      }
    }
  }
</script>

7.v-bind  用来响应地更新 HTML 属性,动态地绑定一个或多个特性，或一个组件 prop 到表达式

<span v-bind:title="message">
  查看此处绑定的信息！
</span>