Vue.js学习与实战

最新推荐文章于 2022-07-18 11:07:37 发布

Cherry_King

最新推荐文章于 2022-07-18 11:07:37 发布

阅读量384

点赞数 1

分类专栏： vue 文章标签： vue web

本文链接：https://blog.csdn.net/Cherry_King/article/details/102808543

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js教程

0.vue介绍
1.vue安装
2.vue目录结构
3.Demo
4.模板语法

0.vue介绍

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试

1.vue安装

安装node.js，安装完node.js之后，npm也会自动安装：

1.下载Nodejs
2.安装Nodejs：直接双击安装即可。
查询是否成功安装的命令：

	node -v
	npm -v

升级或安装cnpm

	2.3.0
	#升级 npm
	cnpm install npm -g
	# 升级或安装 cnpm
	npm install cnpm -g

全局安装脚手架工具vue-cli，命令如下：

C:\Users\gcr-personal>npm install --global vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of
 @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coff
eescript" (no hyphen)
C:\Users\gcr-personal\AppData\Roaming\npm\vue -> C:\Users\gcr-personal\AppData\R
oaming\npm\node_modules\vue-cli\bin\vue
C:\Users\gcr-personal\AppData\Roaming\npm\vue-init -> C:\Users\gcr-personal\AppD
ata\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\gcr-personal\AppData\Roaming\npm\vue-list -> C:\Users\gcr-personal\AppD
ata\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 241 packages from 206 contributors in 781.345s

vue项目初始化命令如下，若没有安装webpack，则先安装webpack：

	npm install -g webpack

然后：

	vue init webpack myVue
	#一路yes就行

安装好之后

	$ cd myVue
	$ npm install
	$ npm run dev

然后再浏览器访问：localhost:8080，访问结果如下：
在这里插入图片描述
另外：vue安装参考链接：参考vue安装教程

2.vue目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：(1)assets: 放置一些图片，如logo等。(2)components: 目录里面放了一个组件文件，可以不用。(3)App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。(4)main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

3.Demo

现在Vue.js安装好了，项目也搭建起来了，接下来通过阅读项目的源码来分析一下Vue的开发方式。
根据我的理解，Vue的目的是组件式开发，将一个个功能模块开发成一个个组件，然后将组件拼起来组成一个完整的web页面。这样做有一个好处，就是我们的点击动作时，不必将整个页面进行刷新，只需要替换其中的某些组件，就可以实现所谓的“页面切换”。
举个例子：我们开发一个网页，底部的页脚（会放些版权信息和联系方式什么的）在每个页面中是一样的，我们就可以把页脚做成一个组件，页面进行切换的时候，只切换中间的内容组件即可。
下面开始分析Demo的代码：

首先分析index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myvue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html，是项目的入口文件，和正常的html一样，有head、title等标签，不同的是，这里嵌入了

<div id="app"></div>

即嵌入了，App.vue。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>logo</h1>
    <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/first">Go to First</router-link>
    <router-link to="/second">Go to Second</router-link>
  </p>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在src\components下新建First.vue,Second.vue，原来项目中自带一个HelloWorld.vue。
First.vue:

<template>
  <div class="first">
    <h1>{{ msg }}</h1>
    <h2>-----------</h2>
  </div>
</template>

<script>
export default {
  name: 'First',
  data () {
    return {
      msg: 'Welcome to First Page!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  color: #42b983;
}
</style>

Second.vue:

<template>
  <div class="second">
    <h1>{{ msg }}</h1>
    <h2>**********</h2>
  </div>
</template>

<script>
export default {
  name: 'Second',
  data () {
    return {
      msg: 'Welcome to Second Page!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
  color: #42b983;
}
</style>

HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

然后在router/index.js注册路由信息。
index.js如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/First'
import Second from '@/components/Second'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//将HelloWorld注册为根路径
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/first',//将First.vue注册为/first路径
      name: 'First',
      component: First
    },
    {
      path: '/second',//将Second.vue注册为/second路径
      name: 'Second',
      component: Second
    }
  ]
})

然后，npm run dev后就可以访问网站了。

访问http://localhost:8080/#/
访问http://localhost:8080/#/first
点击Go to Second，切换到second.vue
而图片和logo都不变。

4.模板语法

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue测试</title>
		<script src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{message}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					message:'Hello Vue.js!'
				}
			})
		</script>
	</body>
</html>

Cherry_King

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习与实战

Vue.js教程0.vue介绍1.vue安装2.vue目录结构功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入0.vu...
复制链接

扫一扫

专栏目录