标签：script color 脚手架 exp class his one nts vue-cli
vue是mvvm模型，自底向上逐层应用，用于构建用户界面的渐进式框架。
挂载点，vue仅处理挂点下面的内容（dom节点）。挂载点内部的为模板。
<div id="app">
<p>{{ mag }}</p>
</div>
<script>
new Vue({
el: "#app",
data() {
mag: ‘hello, ‘;
},
});
Vue.component(‘todo-item‘, {
template: ‘<li>这是个待办项</li>‘
})
</script>
模板
1. 直接放在挂在点内部
2. 实例内的template属性
<div id="app">
</div>
<script>
new Vue({
el: "#app",
template: "<p>哈韩</p>"
data() {},
});
</script>
实例，new Vue创建
<div id="app">
<p>{{ mag }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
components: {
todo-item,
},
data() {
mag: ‘hello, ‘;
},
});
app.component(‘todo-item‘, {
template: ‘<li>这是个待办项</li>‘
})
</script>
每一个组件也是一个实例，挂在点下最大的实例，有一层层组件构成。
开发大型项目，借助webpack打包单文件组件(.vue)。脚手架vue-cli搭建项目。
<template>
<div>
<li class="todo-item"
@dblclick="handleDelete(index)"
>{{ text }}</li>
</div>
</template>
<script>
export default {
name: ‘todo-item‘,
props: [‘text‘, ‘index‘],
methods: {
handleDelete(index) {
this.$emit(‘delete‘, index);
},
},
};
</script>
<style scoped>
.todo-item{
}
</style>
标签：script color 脚手架 exp class his one nts vue-cli
原文地址：https://www.cnblogs.com/daaasheng/p/9021800.html
