一.前言
搭建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", }; },
原文：https://www.cnblogs.com/shadoll/p/15021143.html