Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布 动画
npm全局安装
切换淘宝npm镜像
npm config set registry https://registry.npm.taobao.org全局安装
npm install -g @vue/cli
切换到要创建的目录
vue create xxx
启动项目
npm run serve
vue脚手架结构
加入School和Student组件到components目录下
修改App.vue
修改main.js。注册app组件，加入template
运行npm run serve
render函数
vue.js与vue.runtime.xxx.js的区别
（1）vue.js是完整版的vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版的vue，只包含：核心功能，没有模板解析器
没有模板解析器不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({/*render(createElement){return createElement('h2','helloworld');}*/render: h => h(App),
}).$mount('#app')
index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body>
</html>
修改默认配置
vue脚手架隐藏了所有webpack配置，使用
vue inspect > output.js
使用vue.config.js对脚手架进行个性化定制，配置参考 | Vue CLI (vuejs.org)
module.exports = {pages: {index: {// page 的入口entry: 'src/main.js',},},lintOnSave:false
}
ref属性
用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实Dom元素，应用在组件标签上是组件实例对象（vc）
使用方式 标识 <h1 ref="xxx"></h1> 或 <School ref="xxx"></School> 获取：this.$refs.xxx
<Student ref="Stu"></Student>
<button @click="showDom" ref="btn">点击打印元素或组件</button>
methods:{showDom(){console.log(this.$refs.Stu) //组件实例对象console.log(this.$refs.btn) //真实dom元素}}
props配置
让组件接收外部传过来的数据
(1)传递数据
<School :no="211" name="武汉纺织大学"></School>
(2)接收数据
//（1）只接收
props:['no','name','address']//（2）限制类型
props:{no:Number,name:String,address:String
}//（3）限制类型，必要性，默认值
props:{no:{type:Number,required:false,default:999},name:{type:String,required: true},address:{type:String,required:false,default: '未知'}
}
⚠️props是只读的，vue底层会监测你对props的修改，如果进行修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到新的变量在data中，去进行修改
Shcool.vue
<template><div><h2>编号：{{ CurrentNo }}</h2><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2><button @click="CurrentNo++">点我编号+1</button></div>
</template><script>
export default {name: "School",data() {return {CurrentNo : this.no}},// props:['no','name','address']/*props:{no:Number,name:String,address:String},*/props:{no:{type:Number,required:false,default:999},name:{type:String,required: true},address:{type:String,required:false,default: '未知'}}
}
</script><style scoped>
h2 {color: #0dff1d;
}
</style>
app.vue
<template><div><School :no="211" name="武汉纺织大学"></School></div>
</template>
<script>
import School from './components/School'
export default {name: "App",components: {School}
}
</script>
minin混入
组件共用的配置提取成一个混入对象
使用方法
(1)定义混合
export const mixin = {data(){return{size: '18cm'}}
}(2)使用混合
import {mixin} from '../mixin';
mixins:[mixin] //局部 -组件
Vue.mixin(mixin) //全局 -main.js
插件
功能：用于增强vue
本质：包含install方法的一个对象，第一个参数是Vue，第二个以后的参数是传递的数据
定义插件
export default {install(Vue,options) {Vue.filters()Vue.directive()Vue.mixin()Vue.prototype.$myMethod=function (){}}
}
使用插件
Vue.use(plugin);
scoped样式
让样式在局部生效，防止冲突
<style scoped></style>
扩展
<style lang="less" scoped>
h2 {color: #1c036c;font-weight: 700;h3{font-size: 30px;}
}
</style>
默认vue不识别其他的语法，需要添加加载器
npm view webpack versions #查看webpack版本
npm view less-loader versions #查看less-loader版本
安装less加载器
npm i less-loader@7 #安装7以上版本
npm install less save-dev
TodoList案例关键点
组件命令注意不要和html元素相同
比如：Header
父组件里面的子组件的子组件import的路径
import TodoItem from "@/components/TodoItem";
(16条消息) Vue解决报错1_This relative module was not found: * ./components/Login.vue in ./src/router/index.js_xiaosi的博客-CSDN博客
父组件个子组件传值
<TodoList :todos="todos"/>
<script>
data() {return {todos: [{id: '001', title: '吃饭', done: false},{id: '002', title: '睡觉', done: true},{id: '003', title: '打游戏', done: false}]}}
</script><TodoItem v-for="item in todos" :key="todos.id" :item="item"/>
<script>
props:["todos"]
</script>以下修改为$emit 父组件给子组件c
-------
<TodoHeader @addTodo="addTodo"/>
<script>
methods: {// 增加addTodo(itemObj) {this.todos.unshift(itemObj);}
}
</script><script>
<template><div class="header"><input type="text" v-model.trim="addTodoTitle" placeholder="请输入待办事项，按回车键" @keyup.enter="add($event)"/></div>
</template>
methods: {add(event) {if (this.addTodoTitle != '') {const itemObj = {id: nanoid(), title: this.addTodoTitle, done: false};this.$emit('addTodo',itemObj);}}}
</script>
子组件给父组件传值
<TodoHeader :addTodo="addTodo"/>
methods: {addTodo(itemObj) {this.todos.unshift(itemObj);}}<input type="text" v-model.trim="addTodoTitle" placeholder="请输入待办事项，按回车键" @keyup.enter="add($event)"/>
<script>
props: ['addTodo'],
methods: {add(event) {if (this.addTodoTitle != '') {const itemObj = {id: nanoid(), title: this.addTodoTitle, done: false};this.addTodo(itemObj);}}}
</script>
⚠️【data,props,methods,computed】不要有相同的名称！
组件任意传值
beforeCreate() {Vue.prototype.$bus = this}----------------------------------------------------------------
methods: {// 勾选或取消changeTodo(id) {this.todos.forEach((item) => {if (item.id == id) {item.done = !item.done;}})},deleteTodo(id) {this.todos = this.todos.filter((item) => {return item.id != id;})}}
mounted() {this.$bus.$on('changeTodo',this.changeTodo);this.$bus.$on('deleteTodo',this.deleteTodo);},beforeDestroy() {this.$bus.$off('changeTodo');this.$bus.$off('deleteTodo');}----------------------------------------------------------------
methods: {doneChanged(id) {this.$bus.$emit('changeTodo',id);},delItem(id) {this.$bus.$emit('deleteTodo',id);}},
点击复选框值改变
暂时使用函数，父组件->子组件
Vue教程3【使用Vue脚手架】render ref props minin scoped $emit $bus 消息订阅发布 动画相关推荐
- vue教程2 【Vue组件化编程】 组件的创建和使用 非单文件组件和单文件组件的区别
组件 实现局部功能的代码和资源的集合 非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义 使用Vue.extend(options)创建,其中options和new ...
- vue教程入门视频,vue入门视频教程
vue是什么 ?怎么用? vue是一个视频剪辑软件.在我们制作(自行拍摄之前)可以来设置拍摄时候的色调滤镜,拍摄的时长,这些拍摄的视频,可以直接用到我们要制作的剪辑小视屏当中. 调用手机里的小视屏.可 ...
- Vue教程1 【Vue核心】
Vue.js 中文文档 (bootcss.com) 使用vue插件 GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debuggi ...
- 2019最新《后盾网Vue教程 向军Vue基础教程 共86课》
1.向军老师Vue开发宝典-Vue.js介绍.mp4 2.向军老师Vue开发宝典-创建第一个应用.mp4 3.向军老师Vue开发宝典-操作元素属性.mp4 4.向军老师Vue开发宝典-Mustache ...
- vue教程3：vue常用指令
v-text 作用:渲染文本到标签上,跟JQuery的text()方法类似 直接上例子: <script>var app = new Vue({el: "#app",d ...
- vue教程2：vue基础
el挂载点 el用来设置vue实例作用范围的元素 通常使用id选择器,例如el: "#app".另外,还支持class.css等其他选择器,不过一般建议使用id选择器 不能挂载到h ...
- VUE教程（持续更新中）
VUE教程 目录 1. VUE简介 1-1. 技术发展的过程: 2. 使用VUE框架 2-1. 构建你的第一个VUE程序 2-2.VUE核心原理 2-3. VUE组件 2-4. 工程结构 1. VUE ...
- Vue教程03-Vue脚手架开发环境
Vue脚手架开发环境 1.Vue开发环境的安装 1.1安装Node JS 1.2全局安装Vue脚手架 1.3安装HBuilderX 1.4强烈推荐安装以下工具软件 2.HBuilderX创建Vue项目 ...
- npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
最新文章
- python安装orm_Python ORM框架之 Peewee入门
- nginx反向代理tomcat提示failed (13: Permission denied) while connecting to upstream
- 我们从产品团队扩大中学到了什么
- 向上类型转换和拷贝构造函数
- 智能手机计步算法c语言实现,【转载】智能手机计步器算法的实现
- jquery的ajax全局事件和AJAX 请求正在进行时显示“正在加载”
- LAMP 系统性能调优
- android 8.0 悬浮窗 最简demo
- delphi三层架构中注册服务器
- 官网下载的oracle有病毒,oracle 中勒索病毒怎么恢复？
- 翻译: AWS DeepRacer一步一步详细步骤的自定义航点更快地运行 自定义waypoints
- pycharm python 依赖管理_怎么解决pycharm license Acti的方法_python
- 有50 只狗，找出其中病狗
- html的入门——从标签开始（2）
- 疑难杂症：系统状态正常，LInux双机Pacemaker为什么还要切换？
- REID重识别的一些思考-REID场景介绍-初探（一）
- 云服务器带宽测速那四种方法最常见
- matlab求积分 没有解,详解Matlab求积分的各种方法
- sinx/x的极限为什么是1_lim(x趋向0)sinx/x为什么等于1？
- ps笔刷：肮脏污渍photoshop笔刷集
热门文章