vue——单文件组件
需要 安装Vue CLi 执行 npm install -g @vue/cli 命令
切换到要创建项目的目录执行 vue create XXX 命令创建脚手架
编写代码
1、创建.vue文件编写自定义组件
<template><div class="school"><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2></div>
</template><script>export default {name: 'SchoolTest',data(){return {name: 'XXX学校',address: 'XXX市'}}}
</script>
<style>.school{background-color: #9B859D;}
</style>
2、创建 根组件 例如 App.vue
<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM" ref="btn">点击我输出上方的DOM元素</button><SchoolTest></SchoolTest></div>
</template><script>// 引入School子组件import SchoolTest from './components/School.vue'export default {name: 'AppTest',components: {SchoolTest},data(){return{msg: '欢迎学习Vue',}},methods: {showDOM(){console.log(this.$refs)}}}
</script>
3、创建 main.js 文件 作为项目入口
// 引入Vue
import Vue from 'vue'
// 引入App根组件
import App from "./App.vue"
// 关闭Vue的生产提示
Vue.config.productionTip = false,
// 创建vm
new Vue({el: '#app', //容器 自动找到public目录下的index.html文件render: h => h(App)// 相当于// render: function (createElement) {// return createElement(// 'h' + this.level, // tag name 标签名称// this.$slots.default // 子组件中的阵列// )}
})
进入创建的脚手架目录 执行 npm run serve 命令启动项目
当执行完 npm run serve 命令后直接运行main.js
vue——单文件组件相关推荐
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
- Vue单文件组件环境配置
单文件组件不能直接运行使用,需要依赖node项目对其进行解析打包,在使用之前需要先进行环境配置 安装node版本管理工具nvm curl -o- https://raw.githubuserconte ...
- Vue单文件组件基础模板
背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点, ...
- vue单文件组件导入导出
目录分析 打开项目,依次分析下目录结构,项目目录结构如下 项目目录结构如下 单文件组件.vue 目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue ...
- 在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...
- 什么Vue单文件组件(SFC)?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
- 【视频】vue单文件组件vue-cli
P13vue单文件组件vue-cli https://www.bilibili.com/video/av91679349?p=13
最新文章
- 1.9 程序示例--局部加权线性回归-机器学习笔记-斯坦福吴恩达教授
- 连云港职业技术学院有计算机系吗,连云港职业技术学院电子信息工程技术专业...
- 在茫茫人海中发现相似的你——局部敏感哈希(LSH)
- python自定义函数详解_python基础教程之自定义函数介绍
- linux脚本数字加,linux-在bash脚本中添加数字表示“未找到”
- mysql默认join是什么类型_MySQL:join语句类型
- djl和ljl_使用Spring Boot和DJL进行深度学习
- 梦幻,MySQL视图,虚实表,完整详细可收藏
- 信息学奥赛一本通(1131:基因相关性)
- 软件三层架构和MVC模式的区别
- PHP框架Yii系列教程(四):使用Memcache保存会话
- ASP.NET和ASP程序防止在IE中进行缓存
- machine learning (7)---normal equation相对于gradient descent而言求解linear regression问题的另一种方式...
- SSH整合开发基本步骤
- 微软应用商店_重新安装微软应用商店,并解决无法联网的问题
- vb连接mysql的方法_VB几种连接数据库的方法
- 物联网技术应用成商业市场盈利关键
- shiro中的过滤器
- clean code 读书笔记
- linux有线网设置方法,有线网络使用教程
热门文章
- angular 多个片段拼接_教你怎么用手机制作和拼接短视频?
- 下载、安装Keil 5
- truffle unbox webpack报错
- html 解析 qt,windows下用QTwebkit解析html
- win7系统的CMD窗口切换目录--小计
- Codeforces 494D Birthday 树形dp (看题解)
- C++环境的配置( windows)
- 添加底部小火箭+目录
- win7·64bit+VS2013+opencv的简单配置
- [zz] 使用ssh公钥密钥自动登陆linux服务器