vue.js入门操作
1.vue框架是经典的MVVM模式, .vue文件是模板文件
模板文件又分为3个部分
一 <template></template>(html部分)
二 <script>
export default {
}(这段代码相当与 new Vue({}) )
</script>(js部分)
三 <style scoped></style>(css部分,scoped代表css样式只对当前vue文件的template生效)
2.router/index.js 是vue的路由文件
import Vue from 'vue' //引入主角vue
import Router from 'vue-router'//引入路由
import HelloWorld from '@/components/HelloWorld' //引入组件模板
export default new Router({
routes: [
{
path: '/', //路由路径
name: 'HelloWorld', //名称
component: HelloWorld //模板名称
}
]
})
/about
完成的文件
路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'About',
component: About
}
]
})
About.vue
<template>
<div class="about">
<li>{{msg}}</li>
</div>
</template>
<script>
export default{
name: 'About',
data() {
return {
msg: 'hello world123'
}
}
}
</script>
<style scoped>
<style>
vue.js入门操作的更多相关文章
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js入门(一)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- Vue.js 入门:从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- Vue.js 入门指南
1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...
- Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
随机推荐
- 动态参数(*args,**kwargs),命名空间和作用域,global和nonlocal,函数的嵌套
1. 动态参数 位置参数的动态参数: *args 关键字参数的动态参数 : **kwargs 顺序: 位置,*args,默认值,**kwargs 在形参上*聚合, **聚合 在实参上*打散, **打散 ...
- sql server 给表加说明,给列/字段加说明
--sql server给表加说明: --banner EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Banner ...
- 安全测试8_Web安全实战1(DVWA部署)
1.渗透神器的打造(火狐浏览器的打造) Firebug HackBar(渗透插件) Tamper Data(抓包.截包.改包等功能) Proxy Switcher(代理设置) 2.PHP环境安装(ph ...
- 检查Linux系统cpu--内存---磁盘的脚本
花了一天写了三条命令分别检查cpu,内存,磁盘 [root@localhost ~]# cat cpu_mem_disk.sh #!/bin/sh # echo "1 检查cpu利用率--- ...
- JDK源码阅读顺序
很多java开发的小伙伴都会阅读jdk源码,然而确不知道应该从哪读起.以下为小编整理的通常所需阅读的源码范围. 标题为包名,后面序号为优先级1-4,优先级递减 1.java.lang 1) Obj ...
- 阿里Canal配置(编写中)
首先在源mysql的.ini文件中进行配置 [client]default-character-set=utf8 [mysqld]basedir = E:/testCanal/mysql-5.7.17 ...
- Ruby学习笔记3:Rendering(渲染)和 Redirect(重定向)
1. Rendering Rendering 是特别要告诉Controller 中的methods,要哪个view file来显示给用户.We can show Views as we wish! E ...
- 关系型数据库和NoSQL数据库
一.数据库排名和流行趋势 1.1 Complete ranking 链接: https://db-engines.com/en/ranking 在这个网站列出了所有数据库的排名,还可以看到所属数据库类 ...
- iOS关于md5 32位加密
导入头文件: #import <CommonCrypto/CommonDigest.h> //md5 32位 加密 (小写)- (NSString *)md5:(NSString *)st ...
- mysql安装卸载-windows
安装:(注意点) 官网download安装包 choose setup type --> custom 安装路径 detailed configuration developer machin ...