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