说明
【Vue 开发实战】学习笔记。
Vue.component 缺点
全局定义：强制要求每个 component 中的命名不得重复
字符串模板：缺乏语法高亮，在 html 有多行的时候，需要用到丑陋的 \
不支持css：意味着当 html 和 JavaScript 组件化时，css 明显被遗漏
没有构建步骤：限制只能使用 html 和 ES5 JavaScript，而不能使用预处理器，如 Pug（formerly Jade）和 Bable
单文件组件 优点
- 完整语法高亮
- CommonJS 模块
- 组件作用域的CSS
Vue CLI
可以通过 Vue CLI 搭建项目
npm install -g @vue/cli vue create vue-demo cd vue-demo npm install npm run serve
通过上面的操作，我们可以开始进行单文件 .vue 的开发。
单文件vue
大致的模板就是下面这个样子
<!-- 视图 --> <template> <div id="app"></div> </template> <!-- 逻辑 --> <script> export default { name: 'app', data() { return { } } } </script> <!-- 样式 --> <style> #app{ color: green; } </style>
启动服务改造前面的代码
添加下面文件组件
App.vue
<template> <div id="app"> {{message}} <todo-list> <todo-item v-for="item in list" :key="item.title" :title="item.title" :del="item.del" @delete="handleDelete"> <span slot="pre-icon">前置icon</span> <!-- 新语法 v-slot --> <template v-slot:suf-icon="{value}">后置icon：{{value}}</template> </todo-item> </todo-list> </div> </template> <script> import TodoItem from "./components/TodoItem.vue"; import TodoList from "./components/TodoList.vue"; export default { name: "App", components: { TodoItem, TodoList, }, data() { return { message: "kaimo 313", list: [ { title: "课程1", del: true, },{ title: "课程2", del: false, }], }; }, methods: { handleDelete(val) { console.log("handleDelete---->", val); }, }, }; </script>
TodoList.vue
<template> <ul><slot></slot></ul> </template> <script> export default { name: 'TodoList', data() { return {} } } </script>
TodoItem.vue
<template> <li> <slot name="pre-icon"></slot> <span v-if="!del" class="red">{{title}}</span> <span v-else style="text-decoration: line-through;">{{title}}</span> <slot name="suf-icon" :value="value">没有使用，默认文字展示</slot> <button v-show="del" @click="handleClick">删除</button> </li> </template> <script> export default { name: 'TodoItem', props: { title: String, del: { type: Boolean, default: false } }, data() { return { value: Math.random() } }, methods: { handleClick() { console.log('点击了删除按钮'); // 发射时间出去 this.$emit("delete", this.title); } }, } </script> <style scoped> .red { color: red; } </style>
启动的服务：
打开链接可以看到效果如下
