vue框架入门和ES6介绍

vue-mvvm模式，vue是一种轻量级的前端框架，主要为模板渲染，数据同步，组件化，模块化，路由等。

  1. https://cn.vuejs.org/    源码：https://github.com/vuejs/vue

mvvm: m为model数据模型，负责数据存储，v为view视图，负责页面显示，vm为view model负责业务处理。

数据双向绑定：

view <-> viewmodel <-> model

vue1下载：

  1. http://v1-cn.vuejs.org/js/vue.js

vue2下载：

  1. https://unpkg.com/vue@2.2.1/dist/vue.js

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue1.js" ></script>
  7. 	</head>
  8. 	<body>
  9. 		<div id="app">
  10. 			<input type="text" v-model="name"/>
  11. 			{{name}}
  12. 		</div>
  13. 	</body>
  14. 	<script type="text/javascript">
  15. 		new Vue({
  16. 			el: '#app',
  17. 			// 设置数据
  18. 			data: {
  19. 				name: '小达'
  20. 			}
  21. 		})
  22. 	</script>
  23. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue1.js" ></script>
  7. 	</head>
  8. 	<body>
  9. 		<div id="app">
  10. 			<!--绑定元素中的属性-->
  11. 			<a v-bind:href="name">百度一下</a>
  12. 		</div>
  13. 	</body>
  14. 	<script type="text/javascript">
  15. 		new Vue({
  16. 			el: '#app',
  17. 			// 设置数据
  18. 			data: {
  19. 				name: 'http://baidu.com'
  20. 			}
  21. 		})
  22. 	</script>
  23. </html>
  25. <!DOCTYPE html>
  26. <html>
  27. 	<head>
  28. 		<meta charset="UTF-8">
  29. 		<title></title>
  30. 		<script type="text/javascript" src="js/vue1.js" ></script>
  31. 	</head>
  32. 	<body>
  33. 		<div id="app">
  34. 			<div v-html="name"></div>
  35. 		</div>
  36. 	</body>
  37. 	<script type="text/javascript">
  38. 		new Vue({
  39. 			el: '#app',
  40. 			data: {
  41. 				name: '<h1>小达</h1>'
  42. 			}
  43. 		})
  44. 	</script>
  45. </html>
  47. <!DOCTYPE html>
  48. <html>
  49. 	<head>
  50. 		<meta charset="UTF-8">
  51. 		<title></title>
  52. 		<script type="text/javascript" src="js/vue1.js" ></script>
  53. 	</head>
  54. 	<body>
  55. 		<div id="app">
  56. 			<h1 v-text="name"></h1>
  57. 		</div>
  58. 	</body>
  59. 	<script type="text/javascript">
  60. 		new Vue({
  61. 			el: '#app',
  62. 			data: {
  63. 				name: '小达'
  64. 			}
  65. 		})
  66. 	</script>
  67. </html>
  69. <!DOCTYPE html>
  70. <html>
  71. 	<head>
  72. 		<meta charset="UTF-8">
  73. 		<title></title>
  74. 		<script type="text/javascript" src="js/vue1.js" ></script>
  75. 	</head>
  76. 	<body>
  77. 		<div id="app">
  78. 			{{name}}
  79. 		</div>
  80. 	</body>
  81. 	<script type="text/javascript">
  82. 		new Vue({
  83. 			el: '#app',
  84. 			data: {
  85. 				name: '小达'
  86. 			}
  87. 		})
  88. 	</script>
  89. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue1.js" ></script>
  7. 	</head>
  8. 	<body>
  9. 		<div id="app">
  10. 			<ul>
  11. 				<li v-on:click="myclick">a</li>
  12. 				<li @click="myclick"></li>
  13. 			</ul>
  14. 		</div>
  15. 	</body>
  16. 	<script type="text/javascript">
  17. 		new Vue({
  18. 			el: '#app',
  19. 			data: {
  21. 			},
  22. 			methods:{
  23. 				myclick: function(){
  24. 					console.log("我被点击了")
  25. 				}
  26. 			}
  27. 		})
  28. 	</script>
  29. </html>
  31. <!DOCTYPE html>
  32. <html>
  33. 	<head>
  34. 		<meta charset="UTF-8">
  35. 		<title></title>
  36. 		<script type="text/javascript" src="js/vue1.js" ></script>
  37. 	</head>
  38. 	<body>
  39. 		<div id="app">
  40. 			<ul>
  41. 				<li v-for="list in lists">{{list.id}}{{list.name}}</li>
  42. 			</ul>
  43. 		</div>
  44. 	</body>
  45. 	<script type="text/javascript">
  46. 		new Vue({
  47. 			el: '#app',
  48. 			data: {
  49. 				lists: [
  50. 				 {id:1,name:'a'},
  51. 				 {id:2,name:'b'},
  52. 				 {id:3,name:'c'},
  53. 				 {id:4,name:'d'}
  54. 				]
  55. 			}
  56. 		})
  57. 	</script>
  58. </html>
  60. <!DOCTYPE html>
  61. <html>
  62. 	<head>
  63. 		<meta charset="UTF-8">
  64. 		<title></title>
  65. 		<script type="text/javascript" src="js/vue1.js" ></script>
  66. 	</head>
  67. 	<body>
  68. 		<div id="app">
  69. 			<h1 v-if="isShow">小达</h1>
  71. 			<h1 v-Show="isShow">小达</h1>
  72. 		</div>
  73. 	</body>
  74. 	<script type="text/javascript">
  75. 		new Vue({
  76. 			el: '#app',
  77. 			data: {
  78. 				isShow: true
  79. 			}
  80. 		})
  81. 	</script>
  82. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue1.js" ></script>
  7. 	</head>
  8. 	<body>
  9. 		<template id="account">
  10. 			<div>
  11. 				<h1>内容</h1>
  12. 				<a href="">账号</a>
  13. 				<a href="">密码</a>
  14. 			</div>
  15. 		</template>
  16. 		<div id="app">
  17. 			<!--组件的使用-->
  18. 			<account1></account1>
  19. 		</div>
  20. 	</body>
  21. 	<script type="text/javascript">
  22. 		Vue.component('account1',{
  23. 			template: '#account'
  24. 		})
  25. 		new Vue({
  26. 			el: '#app',
  27. 			data: {
  29. 			}
  30. 		})
  31. 	</script>
  32. </html>
  34. <!DOCTYPE html>
  35. <html>
  36. 	<head>
  37. 		<meta charset="UTF-8">
  38. 		<title></title>
  39. 		<script type="text/javascript" src="js/vue1.js" ></script>
  40. 	</head>
  41. 	<body>
  42. 		<template id="account">
  43. 			<div>
  44. 				<h1>内容{{msg}}</h1>
  45. 				<a href="#" @click="log">账号</a>
  46. 				<a href="#">密码</a>
  47. 			</div>
  48. 		</template>
  49. 		<div id="app">
  50. 			<!--组件的使用-->
  51. 			<account1></account1>
  52. 		</div>
  53. 	</body>
  54. 	<script type="text/javascript">
  55. 		Vue.component('account1',{
  56. 			template: '#account',
  57. 			data: function(){
  58. 				return{
  59. 					msg: 'dashucoding'
  60. 				}
  61. 			},
  62. 			methods: {
  63. 				log : function(){
  64. 					console.log('dashucoding')
  65. 				}
  66. 			}
  67. 		})
  68. 		new Vue({
  69. 			el: '#app',
  70. 			data: {
  72. 			}
  73. 		})
  74. 	</script>
  75. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue1.js" ></script>
  7. 	</head>
  8. 	<body>
  9. 		<template id="account">
  10. 			<div>
  11. 				<h1>达叔: {{name1}}</h1>
  12. 			</div>
  13. 		</template>
  14. 		<div id="app">
  15. 			<account1 :name1='name'></account1>
  16. 		</div>
  17. 	</body>
  18. 	<script type="text/javascript">
  19. 		Vue.component('account1',{
  20. 			template: '#account',
  21. 			// 接收数据
  22. 			props:{
  23. 				name1 : String
  24. 			}
  25. 		})
  26. 		new Vue({
  27. 			el: '#app',
  28. 			data: {
  29. 				name: '小达'
  30. 			}
  31. 		})
  32. 	</script>
  33. </html>
  35. <!DOCTYPE html>
  36. <html>
  37. 	<head>
  38. 		<meta charset="UTF-8">
  39. 		<title></title>
  40. 		<script type="text/javascript" src="js/vue1.js" ></script>
  41. 	</head>
  42. 	<body>
  43. 		<template id="account">
  44. 			<div>
  45. 				<h1 @click="sendData">子组件</h1>
  46. 			</div>
  47. 		</template>
  48. 		<div id="app">
  49. 			<account1 v-on:send="getData"></account1>
  50. 		</div>
  51. 	</body>
  52. 	<script type="text/javascript">
  53. 		Vue.component('account1',{
  54. 			template: '#account',
  55. 			methods:{
  56. 				sendData(){
  57. 					this.$emit('send',123)
  58. 				}
  59. 			}
  60. 		})
  61. 		new Vue({
  62. 			el: '#app',
  63. 			data: {
  64. 				name: '小达'
  65. 			},
  66. 			methods:{
  67. 				getData(input){
  68. 					console.log(input)
  69. 				}
  70. 			}
  71. 		})
  72. 	</script>
  73. </html>

vue-router路由:

vue2.0 下载地址：

  1. https://unpkg.com/vue@2.2.1/dist/vue.js
  1. https://unpkg.com/vue-router@3.0.2/dist/vue-router.js
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue2.js" ></script>
  7. 		<script type="text/javascript" src="js/vue-router2.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<router-link to='/login'>登录</router-link>
  12. 			<router-link to='/register'>注册</router-link>
  13. 			<router-view></router-view>
  14. 		</div>
  15. 	</body>
  16. 	<script type="text/javascript">
  17. 		//定义根组件
  18. 		var App = Vue.extend()
  19. 		//注册
  20. 		var register = Vue.extend({
  21. 			template: '<h2>注册！</h2>'
  22. 		})
  23. 		var login = Vue.extend({
  24. 			template: '<h2>登录！</h2>'
  25. 		})
  26. 		//定义路由
  27. 		var vueRputer = new VueRouter({
  28. 			routes: [
  29. 			{path:'/',redirect:'/login'},
  30. 			{path: '/login',component:login},
  31. 			{path: '/register',component:register}
  32. 			]
  33. 		})
  34. 		//使用路由
  35. 		new Vue({
  36. 			el: '#app',
  37. 			router: vueRputer
  38. 		})
  39. 	</script>
  40. </html>

路由传值

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript" src="js/vue2.js" ></script>
  7. 		<script type="text/javascript" src="js/vue-router2.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<router-link to='/login'>登录</router-link>
  12. 			<router-link to='/register/xiaoda'>注册</router-link>
  13. 			<router-view></router-view>
  14. 		</div>
  15. 	</body>
  16. 	<script type="text/javascript">
  17. 		//定义根组件
  18. 		var App = Vue.extend()
  19. 		//注册
  20. 		var register = Vue.extend({
  21. 			template: '<h2>注册！{{oname}}</h2>',
  22. 			data: function(){
  23. 				return{
  24. 					oname: ''
  25. 				}
  26. 			},
  27. 			created:function(){
  28. 				this.oname = this.$route.params.uname
  29. 			}
  30. 		})
  31. 		var login = Vue.extend({
  32. 			template: '<h2>登录！</h2>'
  33. 		})
  34. 		//定义路由
  35. 		var vueRputer = new VueRouter({
  36. 			routes: [
  37. 			{path:'/',redirect:'/login'},
  38. 			{path: '/login',component:login},
  39. 			{path: '/register/:uname',component:register}
  40. 			]
  41. 		})
  42. 		//使用路由
  43. 		new Vue({
  44. 			el: '#app',
  45. 			router: vueRputer
  46. 		})
  47. 	</script>
  48. </html>

ECMAScript6简介

模块化，块级作用域，箭头函数等。

什么是JavaScript，它是一种动态类型，弱类型的脚本语言，用来给HTML网页增加的动态功能。

JavaScript由三部分组成：

  1. ECMAScript（核心）
  2. DOM（文档对象模型）
  3. BOM （浏览器对象模型）

let是声明变量的关键字

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9. 			/*var a=5;
  10. 			console.log(a);
  11. 			var a=6;
  12. 			console.log(a);*/
  13. 			let a=5
  14. 			console.log(a)
  15. 			// let a = 6
  16. 			// console.log(a)
  18. 		</script>
  19. 	</body>
  20. </html>

let与for

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			li{
  8. 				background: red;
  9. 				color: white;
  10. 				fonmt-size: 20px;
  11. 				margin: 10px;
  12. 			}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. 		<ul>
  17. 			<li>red</li>
  18. 			<li>green</li>
  19. 			<li>blue</li>
  20. 			<li>yellow</li>
  21. 		</ul>
  23. 		<script>
  24. 			//块级作用域
  25. 			/*function da(){
  26. 				let a=2;
  27. 				console.log(a)
  28. 			}
  29. 			da()*/
  30. 			// console.log(a) 作用域在括号内
  32. 			// var for
  33. 			/*var lis = document.querySelectorAll('li');
  34. 			for(var i=0; i<lis.length; i++){
  35. 				lis[i].onclick = function(){
  36. 					alert(i)
  37. 				}
  38. 			}*/
  40. 			var lis = document.querySelectorAll('li');
  41. 			for(let i=0; i<lis.length; i++){
  42. 				lis[i].onclick = function(){
  43. 					alert(i)
  44. 				}
  45. 			}
  46. 		</script>
  47. 	</body>
  48. </html>

const:声明一个常量，一旦声明后就不能修改。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9. 			const PI = 3.14;
  10. 			//PI = 123; Assignment to constant variable.
  11. 			const Person = {
  12. 				name : '小达',
  13. 				age: 12
  14. 			}
  15. 			console.log(Person.name,Person.age)
  16. 			Person.name = "达";
  17. 			Person.age = 123;
  18. 			console.log(Person.name,Person.age)
  19. 		</script>
  20. 	</body>
  21. </html>

数组解构赋值：

数组的结构赋值：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script>
  9. 			/*let [ a,b,c ] = [1,2,3]
  10. 			console.log(a,b,c);*/
  12. 			//let [h,,i,j] = [1,2,3]
  13. 			//console.log(h,i,j)
  14. 			// 数组的解构赋值要对应，不对应就显示undefined
  16. 			function da(){
  17. 				return ['red','green','blue']
  18. 			}
  19. 			let [r,g,b] = da()
  20. 			console.log(r,g,b)
  21. 		</script>
  22. 	</body>
  23. </html>

对象赋值：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script>
  9. 			var obj = {
  10. 				id: '1',
  11. 				name: '小达',
  12. 				age: '12',
  13. 				study: function(){
  14. 					console.log('学习')
  15. 				}
  16. 			}
  17. 			let{id,name,age,study} = obj
  18. 			console.log(id,name,age,language,study)
  19. 		</script>
  20. 	</body>
  21. </html>

字符串：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<article id="article">
  9. 			<h1></h1>
  10. 			<p></p>
  11. 		</article>
  13. 		<script type="text/javascript">
  14. 			// 严格模式
  15. 			'use strice'
  16. 			let obj = {
  17. 				title: '哈哈',
  18. 				content: 'dashucoding'
  19. 			}
  21. 			let articleElement = document.getElementById('article')
  22. 			// innerHTML
  23. 			articleElement.innerHTML = '<h1>'+obj.title+'</h1><p></p>'
  25. 		</script>
  26. 	</body>
  27. </html>
  1. function 用var, let, const表示

箭头函数

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9. 			var da = function(){
  10. 				console.log('da')
  11. 			}
  13. 			// 箭头函数
  14. 			var dashu = ()=>console.log('da')
  16. 			var da2 = a => console.log(a)
  17. 			da2('一个参数')
  19. 			var da3 = (a,b) => console.log(a,b)
  20. 			da3(1,2)
  21. 		</script>
  22. 	</body>
  23. </html>

rest：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9. 			function sum(){
  10. 				var sum = 0;
  11. 				for(var i = 0;i<arguments.length;i++){
  12. 					sum+=arguments[i]
  13. 				}
  14. 				return sum
  15. 			}
  16. 			console.log(sum(1,2,3,))
  18. 			var str = 'abcd';
  19. 			console.log(str);
  20. 			[...str]
  21. 			console.log([...str]);
  22. 		</script>
  23. 	</body>
  24. </html>

symbol:

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/javascript">
  9. 			var s = Symbol();
  10. 			console.log(typeof s)
  11. 			var s2 = '123'
  12. 			console.log(typeof s2)
  13. 		</script>
  14. 	</body>
  15. </html>

set:

  1. size 数据的长度
  2. add() 添加数据
  3. delete() 删除数据
  4. has() 查找某条数据
  5. clear() 删除所有数据
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script type="text/jscript">
  9. 			<!--对象 keyName:keyValue-->
  10. 			<!--重复的数据会踢掉-->
  11. 			let set = new Set([1,2,3])
  12. 			console.log(set);
  13. 			<!--set.size,set.add('a'),set.delete(1),set.has('a'),set.clear()-->
  14. 		</script>
  15. 	</body>
  16. </html>

map数据结构:

  1. size 数据的长度
  2. set() 添加一条数据
  3. delete() 删除数据
  4. get() 获取数据
  5. has() 查找某条数据
  6. clear() 删除所有数据
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  9. 		<script type="text/javascript">
  10. 			var map = new Map(['name', 'dashu'],['age',12]);
  11. 			console.log(map)
  12. 			console.log(map.size)
  13. 			console.log(map.set(['sex','n']))
  14. 			console.log(map.delete('name'))
  15. 			console.log(map)
  16. 			console.log(map.get('age'))
  17. 			console.log(map.has('age'))
  18. 			console.log(map.clear())
  19. 			console.log(map)
  20. 		</script>
  21. 	</body>
  22. </html>

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

vue框架入门和ES6介绍的更多相关文章

  1. day76 vue框架入门

    目录 一.vue.js快速入门使用 1 vue.js库的下载 2 vue.js库的使用 3 vue.js的M-V-VM思想 4 显示数据 二.常用指令 1 操作属性 2 事件的绑定 3 样式操作 3. ...

  2. Vue.js 入门指南之“前传”（含sublime text 3 配置）

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

  3. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  4. SSM 框架集-01-详细介绍-入门问题篇

    SSM 框架集-01-详细介绍-入门问题篇 刚开始了解 SSM,首先先解决几个基础问题 1.什么是 SSM 框架集? SSM(Spring+SpringMVC+MyBatis)框架集由 Spring. ...

  5. vue框架介绍

    vue框架介绍 一.vue 概念 vue 是一种开发用户界面的渐进式开发框架.渐进式指的是:你可以将vue作为一部分嵌入到web应用中,带来丰富的交互体验 二.vue特点及常见开发中的高级功能 1.解 ...

  6. Vue框架的介绍及使用

    Vue框架 定义:渐进式 JavaScript 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...

  7. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  8. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  9. vue新手入门之使用vue框架搭建用户登录注册案例，手动搭建webpack+Vue项目（附源码，图文详解，亲测有效）

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

随机推荐

  1. C#ComboBox控件“设置 DataSource 属性后无法修改项集合”的解决方法

    在使用ComboBox控件时,遇到了重新绑定赋值出问题的情况.正常情况下,对于数据重新赋值的或者绑定数据源的时候,为了防止数据出现问题,都会先清空原来数据,所以就这样写了,但是没有相当恰恰这样写就出现 ...

  2. ASP.NET Core - 利用Windsor Castle实现通用注册

    问题引入 在ASP.NET Core - 依赖注入这篇文章里面,我们知道了如何利用ASP.NET Core原生的容器来实现依赖注入的,那我们为什么要替换掉默认的 IoC容器呢?从ASP.NET Cor ...

  3. 程序猿必知必会Linux命令之awk

    前言 对于一名专业的程序员来说,Linux相关知识是必须要掌握的,其中对于文本的处理更是我们常见的操作,比如格式化输出我们需要的数据,这些数据可能会来源于文本文件或管道符,或者统计文本里面我们需要的数 ...

  4. OSPF 基础实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.掌握多区域的 OSPF 配置方法. 2.区别不同区域的路由. 3.掌握 OSPF 的路由汇总配置. 4.掌握  ...

  5. java基础(八)-----深入解析java四种访问权限

    Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: 指的是本类 ...

  6. Odoo Tech World 2018（上海）互联网开源技术大会通告

    会议概述 点击进入活动报名通道 高成本的软件开发,耗时的系统安装,繁琐的操作培训… 这一系列问题都是企业数字化管理的痛点, "软件"成为发展数企业数字化转型的瓶颈, 无论是小厂家或 ...

  7. Microsoft Edge浏览器下载文件乱码修复方法

    随着Windows10的普及,Microsoft Edge自带浏览器使用频率逐渐提升,在日常使用过程中我们会发现一个常规的问题是使用Edge进行日常文件下载的时候,N多情况下可能都是乱码,同样的下载链 ...

  8. winfrom 图片裁剪 圆形头像

    效果 核心代码 public Region DrawingCircle(Rectangle r) { GraphicsPath gp = new GraphicsPath(); gp.AddEllip ...

  9. emscripten、 WebAssembly，传递字符串给c函数

    下面看具体的实例. 下面的代码是一个C函数,实现简单的字符串拼接,然后返回拼接的字符串. #include <stdio.h> #include <string>  char* ...

  10. 如何以编程方式签署应用程序包（C ++）

    了解如何使用SignerSignEx2函数对应用包进行签名. 如果要使用Packaging API以编程方式创建Windows应用商店应用包,则还需要在部署之前对应用包进行签名.Packaging A ...