vue2的组件结构和模板语法

一.前言

　　搭建vue的demo，看这篇 https://www.cnblogs.com/shadoll/p/15002064.html

二.结构

<template>
  <div>hello world</div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
    };
  },
  mounted() {},
  methods: {
  },
};
</script>

　　template是该组件用的html模板，在这个模板上，可以通过语法来将值渲染到html上，下面再讲解。

　　script下的就是这个组件对象，示例中只列了较为常用的，components是用于存在其它地方引用过来的vue组件。data是存放该vue对象的值。methods存放该vue对象的方法。mounted方法是vue生命周期所使用的钩子函数，当该vue对象加载完成后，就会执行这个方法。

三.文本输出

　　直接用Mustache语法（双大括号）来插入文本。

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      msg:'hello world'
    };
  },
  mounted() {},
  methods: {
  },
};
</script>

　　在这个Mustache语法中，支持使用简单的javascript表达式。

{{ ok ? 'YES' : 'NO' }}

 四.指令

　　在vue中，在html模版可以使用带v-前缀的指令。

//v-show指令，控制标签是否显示
<div v-show="canShow">hello world</div>

data() {
  return {
    canShow: true,
  };
},

//v-bind指令，标签内属性输出
//完整写法
<a v-bind:href="url">链接</a>
//简写
<a :href="url">链接</a>

data() {
  return {
    url:"www.xxx.com"
  };
},

//v-on指令，标签内注册事件
//完整写法
<a v-on:click="doclick">点击</a>
//简写
<a @click="doclick">点击</a>

methods: {
  doclick() {
    console.log("点击了");
  },
},

//v-model指令，标签赋值value
<input type="text" v-model="text" />

data() {
  return {
    text: "hello world",
  };
},