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入门操作的更多相关文章

  1. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  2. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  3. Vue.js入门(一)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  4. Vue.js 入门:从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  5. Vue.js入门

    之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...

  6. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  7. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  8. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  9. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

随机推荐

  1. 零基础学习python_easygui(35课)

    今天学习的内容我觉得还是很有意思的,当然我主要也是从这个网址学的:http://bbs.fishc.com/thread-46069-1-1.html,大家可以直接看这个网址进行学习,当然也可以看看我 ...

  2. tomcat -web.xml里的内容

    <?xml version="1.0" encoding="UTF-8"?> <Server port="8005" sh ...

  3. iOS oc 检测手机移动网络和wifi是否开启

    利用Reachability的的一个方法currentReachabilityStatus 获取枚举类型值判断是否为2即可,不是2就不是WiFi. enum {        // DDG Netwo ...

  4. 《算法》第四章部分程序 part 8

    ▶ 书中第四章部分程序,包括在加上自己补充的代码,图中找欧拉路径 ● 无向图中寻找欧拉路径,只注释了与欧拉环不同的地方 package package01; import edu.princeton. ...

  5. spark 常用技巧总结2

    zip拉链操作 def zip[U](other: org.apache.spark.rdd.RDD[U])(implicit evidence$10: scala.reflect.ClassTag[ ...

  6. jgGrid pivot reload重新加载及刷新数据

    1.当使用jqGrid进行多维表时,reload方法会不停的重复增加标题的行数. 解决办法:直接删除jqGrid,重新初始化页面. function query(){//crossTable pivo ...

  7. 文件系统(File System)

    什么是文件系统,引用百科解释: 操作系统中负责管理和存储文件信息的软件机构称为文件管理系统,简称文件系统. 文件系统是操作系统核心的组成部分,没有它我们无法完成对文件的增.删.改.查等基本操作 概念 ...

  8. webpack 引用vconsole

    1.npm install -vconsole --save-dev 2.npm install -vconsele-webpack-plugin --save-dev 3.webpack.base. ...

  9. js 购物车的实现

    购物车原理:创建一个构造函数,把涉及到的项目写成方法,然后把这些方法放到构造函数的原型对象上,通过按钮绑定,调用原型对象上的方法,实现对涉及项目的改变 html代码: <!DOCTYPE htm ...

  10. The Roadmap of my web learning.