前端框架Vue入门

简介

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

环境安装

环境准备：
node

npm

vue-cli

vue-devtools

nvm安装：用来管理node版本

下载chrome 插件地址：
https://chrome-extension-downloader.com/

BootCDN: https://www.bootcdn.cn/

模板语法

vue 文件结构（template,script, style）
插值语法 {{msg}}, 数据, js表达式
指令（指令缩写）@click :href

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		.bg{
			color: red;
		}
	</style>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>
<body>
<div id="app">
<div class="bg" v-bind:id="bg1">
	hello world!
	{{msg}}
</div>
<div class="bg">
	{{msg}}
</div>
	{{count}}
	{{(count + 1)*10}}
<div v-html="template">

</div>
<a :href="url">百度</a>
<!--v-bind:绑定页面属性, 可以直接缩写 ：-->
	<button type="button" @click="submit()">数字加1</button>
<!--v-on:事件 缩写@	-->
</div>

<script>
	new Vue({
       el:'#app', // .bg
	   data: {
           msg: 'hello vue!!',
		   count: 1,
		   template: '<div>hello template</div>',
		   url: 'https://www.baidu.com/',
		   bg1: 'app-bind'
	   },
	   methods: {
           submit: function() {
               this.count ++
		   }
	   }
	})
</script>
</body>
</html>

计算属性与侦听器

计算属性: conputed
侦听器： watch

侦听器：

<script>
	var app = new Vue({
       el:'#app', // .bg
	   data: {
           msg: 'hello vue!!',
		   count: 1,
		   template: '<div>hello template</div>',
		   url: 'https://www.baidu.com/',
		   bg1: 'app-bind'
	   },
	   methods: {
           submit: function() {
               this.count ++
		   }
	   },
	   watch: {
           msg: function (newVal, oldVal) {
			   console.log('newVal is:' + newVal)
			   console.log('oldVal is:' + oldVal)
           }
	   }
	})
</script>

给Vue 对象一个变量，这样就可以在chrome console 里进行调试了,下面是针对watch属性的一个使用调试：

当改变app.msg的值后，就会调用watch 对应的function函数，打印相关信息

app.msg
"hello vue!!"
app.msg = "new message!!"
index.html:49 newVal is:new message!!
index.html:50 oldVal is:hello vue!!
"new message!!"

计算属性

computed 中的相关属性任意值发生变化都会影响msg1值的变化

监听的值都是本实例中的值

watch: {
   msg: function (newVal, oldVal) {
	   console.log('newVal is:' + newVal)
	   console.log('oldVal is:' + oldVal)
   }
},
computed: {
   msg1: function () {
	   return 'computed ' + this.msg + ',' + this.another
   }
}

watch 监听的一般是单一的变量或数组--异步场景

computed 可以监听很多变量，并且这些变量一定是Vue里的 -- 数据联动

条件渲染、列表渲染、Class与Style绑定

v-if|| v-show 用法

<div id="app">
	<div v-if="count > 0">
		判断1：count大于0,count的值是：{{count}}
	</div>
	<div v-else-if="count < 0 && count > -5">
		判断2：count的值是：{{count}}
	</div>
	<div v-else>
		判断3：count的值是：{{count}}
	</div>
	<div v-show="count == -1">show: {{count}}</div>
</div>

script>
	var app = new Vue({
       el:'#app', // .bg
	   data: {
		   count: 1
	   }
	})
</script>

根据条件判断是否展示相关内容

v-for

<div v-for="item in list"> {{item}}</div>

<script>
		var app = new Vue({
		   el:'#app', // .bg
		   data: {
			   msg: 'hello vue!!',
			   count: 1,
			   list: [1,2,3,4,5]
		   })
</script>

v-for 与 v-if、v-show 结合使用：

	<div v-for="item in list">
		<div v-if="item.age > 29">
			{{item.name}}
		</div>
		<div v-else>
			{{item.age}}
		</div>
	    <div v-show="item.age > 29">
            {{item.name}}
		</div>

	</div>

Class与Style的绑定

Style 绑定：

    <div v-show="item.age > 29" v-bind:style="styleMsg">
            {{item.name}}
	</div>
	
	<script>
		var app = new Vue({
		   el:'#app', // .bg
		   data: {
		       styleMsg:{
		         color: 'red',
			     textShadow: '0 0 5px green'
			   },
			   msg: 'hello vue!!'
		   })
</script>

class 绑定：

<div v-show="item.age > 29"
			 :class="['active', 'add', 'more', {'another':item.age < 30}]"
			 :style="styleMsg">
            {{item.name}}
</div>

item.age < 30 的时候，another 才会展示出来

Vue-Cli

安装：

npm install -g @vue/cli

查看版本：

vue --version

如何创建工程：

vue create project

vue ui    // 可视化创建项目

vue 项目的目录结构：

-- public
-- src
-- package.json

组件化思想

组件主要实现功能模块的复用

可以很高效的执行

可以将一些复杂的页面逻辑进行拆分

如何进行拆分：

业务代码行不超过300行原则
复用原则

组件带来的问题：
1.组件状态管理(vuex)
2.多组件的混合使用，多页面，负责业务（vue-router）
3.组件间的传参、消息、事件管理(props，emit/on，bus)

vue 代码风格

https://cn.vuejs.org/v2/style-guide/

vue-router

views 下创建相关vue 文件
在route.js里配置相关路由

{
				path: '/data',
				name: '数据',
				icon: 'dashboard',
				component: PageLayout,
				children: [
					{
						path: '/data/info',
						name: '详情',
						icon: 'none',
						component: () => import('@/views/data/Info')
					}]
			}

3.在相关页面配置vue文件需要展示的地方

vuex

场景：

多个视图依赖于同一个状态(如菜单导航)
不同视图的行为需要变更同一状态(如评论弹幕)

为vue.js开发的状态管理模式

组件状态统一管理

组件状态改变遵循统一的规则

使用需要做如下几步：

定义store.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
	   increase() {
	   	this.state.count ++
	   }
	},
	actions: {
	    
	}
});

state：组件公用的状态

mutations: 定义改变状态的方法

2.组件中使用，需要引入store.js 文件

import store from '@/store/index'
export default {
name: "About",
store,
methods: {
	add() {
		console.log("add")
		store.commit('increase')
	}
    }
}
</script>

store.commit() 提交修改

3.组件之间使用

在另一个文件使用状态

<template>
    <div>
		<p>{{msg}}</p>
	</div>
</template>
<script>
	import store from '@/store/index'
    export default {
        name: "Config",
		store,
		data () {
            return {
               msg: store.state.count
            }
		}
    }
</script>
<style scoped>
</style>

如何进行调试

vue 有Chrome 插件

在需要调试的地方写上debugger

查看vue 变量的值可以直接在chrome console 里，写this.变量（debug模式下）

chrome Network-xhr 查看相关请求

调试交互可以使用 Fast 3G | Slow 3G

可以把当前组件的this对象绑定到windows这个全局变量里去

mounted() {
  window.vue = this
},
methods: {
	add() {
		console.log("add")
		debugger
		store.commit('increase')
	},
	output() {
	    console.log("output")
	}
    }
}

就可以直接在chrome console里打印 window.vue.output()

如何集成vue.js

单页面、多页面引入vue.js CDN
复杂单页面 vue cli 工具创建模板项目

开发工作流：

需求调研(确定需求)
交互设计、逻辑设计、接口设计
代码实现、测试运行、线上部署

GIT:

创建项目 git clone, git init
创建分支，推送分支，合并分支
删除分支，回退版本

git add . # 添加需要提交的文件
git commit -m "first commit" # 提交需要push的文件
git remote -v     # 可以看到远程的仓库
git push origin master
git branch -a  # 查看所有分支
git checkout -b dev #创建分支
git push origin dev # 提交到dev分支
-- 合并 分支 --
git checkout master
git merge dev
git push origin master

git branch -D dev # 删除dev分支
git push origin :dev # 删除远程分支
git reset --hard head^  # 退回到上一个版本
git log | git reflog  #查看之前的git 记录
git reset --hard HEAD@{1}  # 回退到任意版本

一个简单的单页面应用

代码:

<template>
    <div>
		<p>{{msg}}</p>
		<ul>
			<li v-for="(item, index) in lists"
				:key ="index"
				@click="choose(index)"
				:class="{active: index === current && current !==''}"
			>
				{{item}}
			</li>
		</ul>
		<button type="button" @click="add()">添加</button>
		<ul>
			<li v-for="(item, index) in target"
				:key ="index"
			>
				{{item}}
			</li>
		</ul>
	</div>
</template>

<script>
	import store from '@/store/index'
    export default {
        name: "Config",
		store,
		data () {
            return {
               msg: store.state.count,
			   lists: [1,2,3,4,5],
			   target: [],
			   current: ''
            }
		},
		methods: {
        	choose(index) {
        		this.current = index
        	},
			add() {
        	    if (this.current==='') {return}
        	    this.target.push(this.lists[this.current])
				this.current=''
			}
		}

    }
</script>

<style scoped>
	li.active {
		background: green;
	}
</style>

效果图：

如何高仿别人的App

审查元素可以查看相应的Dom 结构
Header，Body 里面查看JS、CSS引用,搜索相应的js库
也可以查看chrome Network|Source中的js,使用反编与断点进行调试针对压缩的js文件，chrome 提供了format 功能

打包发布

项目打包：

npm run  build

打包完成后，把dist文件夹下所有的文件上传到服务器的根目录里去，就可以访问了

总结

本文主要讲解了vue框架的一些入门知识，vue 开发环境的搭建安装、打包发布，vue的模板语法，开发流程以及vue的相关组件使用，如何进行调试，至此就可以开发一些简单的单页面应用了。

posted @ 2020-01-06 23:18 chaplinthink 阅读(377) 评论(0) 编辑收藏举报

刷新页面返回顶部

chaplinthink

关注领域: 大数据 & 架构设计