VUE----整理

-------------------------------------------------------------------VUE-----------------------------------------------------------------------  

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

	var app = new Vue({    -----------------------------------声明
		el:"#app01"-------------------------------------------绑定标签
		data:{------------------------------------------------数据

		}
		methods：function(){-----------------------------------事件

		}
		computed：{--------------------------------------------计算属性

		}
		})

	Vue.component('组件名'{-------------------------------------组件
		data:function(){
			return " "------------------------------------------一定要有返回值
		}
	})	

	双向绑定：v-model指令实现,它能轻松实现表单输入和应用状态之间的双向绑定.
	变量提升：

ES6(ECMAScript):-----------------------------es:EMCAScript 6 (es2015)-----------Emca:国际标准组织
	ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。日常场合，这两个词是可以互换的。
	1:常量和变量-----------------const，let，var
		let---------------------------------局部生效,定义一个块级作用域的变量，
											需要先定义再使用；(不存在变量提升),不能重复定义，
											let声明的变量只在它所在的代码块有效。

		const-------------------------------常量，只读。

		var---------------------------------全局生效,有变量提升现象(先使用，后定义)，重复定义会被覆盖。
			例一：
				  {
					const c = "hello 个屁！";
					let a="wsl";
					var b="Hello";

					console.log(a);
					console.log(b);
					console.log(c)
				}

			例二：
				let b = "不回";
				if (10>9){
					let b = "回家过年！";
					console.log(b)
				}

			例三：
				{
					 let d = 500;
						d = 1000;
						console.log(d)
				}

			例四：--------计数器i只在for循环体内有效，在循环体外引用就会报错。
				  for (let i = 0;i<10;i++){
					console.log(i);
						}

			例五：--------变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。如果使用let，声明的变量仅在块级作用域内有效，最后输出的是6。
				{
					var a = [];
					for (var i=0;i<10;i++){
						a[i] = function(){
							console.log(i);
						};
					}
					a[6]();
				}
				---------------------------------
				{
					var a = [];
					for (let i = 0; i < 10; i++) {
					  a[i] = function () {
						console.log(i);
					  };
					}
					a[6](); // 6
				}

			例六：--------var，定义多次覆盖现象‘
				const obj = {
					name: "谢小二",
					age: 22
				}
				var obj2 = obj;
				obj2.age = 90
				console.log(obj.age);

		js的数据类型：-----------字符串(string), 数组(array), 数字(number),  未定义的(undefined), 布尔(boolean), object, null
		基本数据类型：-----------字符串(string), 数字(number), 布尔(boolean), 布尔(boolean), 布尔(boolean)
		引用类型：---------------数组(array) object

	2:模板字符串-----------------通过反引号来使用，字符串当中可以使用变量，可以当作普通字符串来处理，可以使用多行字符串
		例一：------------------------------
			let name = `悟空`;
			console.log(`谁的名字叫${name}`);

		例二：----------------------------- document.getElementById("list_1").innerHTML--------------插入标签。
			 <ul id="list_1">

			 </ul>
			 <script>
				let name = `悟空`;
				console.log(`谁的名字叫${name}`);

				document.getElementById("list_1").innerHTML = `
				<li>11</li>
				<li>22</li>
				<li>33</li>
				<li>44</li>
				`
			</script>

	3:解构变量-------------------数组解构赋值：-------------------------把数据元素的值依次地赋给变量。
		例一：
			{
			let arr = [10,20];
			let a = arr[0];
			let b =  arr[1];
			console.log(a);
			console.log(b)
			}

		例二：
			{
				let [a,b,[c,[d]]] = [100,200,[300,[4000]],];
				console.log(a);
				console.log(b);
				console.log(c);
				console.log(d) ;
			}

		例三：
			{
			 let obj = {
			"name":"悟空",
			"age":20,
			};
			let{name,age} = obj
			console.log(name)
			console.log(age)
			}

		例四：
			let [ , , third] = ["foo", "bar", "baz"];
			third // "baz"

			let [x, , y] = [1, 2, 3];
			x // 1
			y // 3

			let [head, ...tail] = [1, 2, 3, 4];
			head // 1
			tail // [2, 3, 4]

			let [x, y, ...z] = ['a'];
			x // "a"
			y // undefined
			z // []

	4:对象的扩展-----------------允许直接写入变量和函数，作为对象的属性和方法,(对象当中的属性可以简写,对象当中的方法也可以简写)
		例一：
			{
				let username = "悟空";
				let obj = {
					username,
					fun(){
						alert('过年回家！')
					}
				};
				console.log(username,obj);
				console.log(obj.username);
				obj.fun()
			}

		例二：------------------------------属性名为变量名, 属性值为变量的值
				{
					function f(x, y) {
					  return {x, y};
					}

					// 等同于

					function f(x, y) {
					  return {x: x, y: y};
					}

					f(1, 2) // Object {x: 1, y: 2
				}

		例三：
			var birth = '2000/01/01';
			var Person = {
			  name: '张三',
			  //等同于birth: birth
			  birth,
			  // 等同于hello: function ()...
			  hello() { console.log('我的名字是', this.name); }
			};

	5:函数的扩展-----------------在ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。---可以给函数默认参数，剩余参数：function fun(a,...b ){}fun(11,22,33)则：b = [22,33]
		例一：------------------------------给函数指定默认参数
			function fun(x=100){
                alert(x);
            }
            fun()
		例二：------------------------------将剩余参数打包(...xx),相当于python的*args和**kwargs
			function fun2(x=500,...y){
					console.log(x);
					console.log(y);
				}
				fun2(x=100,y=40,z=500)

			}

	6:数组的扩展
		(1):判断数组当中是否存在某个数值
			 例一：
				   {
								var arr = [100,200,300,400,500]
								arr.forEach(function (value,index) {
					//            console.log(value)
					//            console.log(index)
							});
								var arr2 = arr.map(function(value,index){
									return value+1
								});
							console.log(arr.indexOf(1000));
							console.log(arr.includes(201))
							}
					//        console.log(arr2)
		(2):对数组的遍历--------------------forEach
			例一:---------------------------对数组遍历
				{
					var arr = [100,200,300,400,500]
				arr.forEach(function (value,index) {
					console.log(value)
					console.log(index)
				})
				}
			例二：--------------------------对遍历后的数组，再进行处理。
				       {
							var arr = [100,200,300,400,500]
							arr.forEach(function (value,index) {
							console.log(value)
							console.log(index)
						});
							var arr2 = arr.map(function(value,index){
								return value+1
							})
						}
						console.log(arr2)
		    例三：--------------------------循环遍历
				{
					let arr3 = [11,22,33,44,55,66]
					for (i in arr3){
					console.log(i);
					console.log(arr3[i])
				}
		(3):对数组的过滤--------------------filter
			{
				 var arr = [10,20,30,40,50];
				var arr4 = arr.filter(function (value,index) {
				   return value>20
				});
				console.log(arr4)
			}

		7：类的扩展。 

	7：箭头函数：
		var f = a =>a
		----------------------
		var f = function(a){
			return a;
		}
		f(1)

1：使用：
	(1):引入-------------------------vue.js
		<script src=vue.js></script>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	(2):展示html
		<div id="app">
			<input type="text" v-model="msg">
			<p>{{msg}}</p>
		</div>
	(3)：建立vre对象
		    new Vue({
            el: "#app", //表示在当前这个元素内开始使用VUE
            data:{
                msg: ""
				}
			})

2：声明形式渲染:-----------------------------Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,{{}}，								 里面可以放表达式
		<div id="app">
		  {{ message }}
		</div>
		var app = new Vue({
		  el: '#app',
		  data: {
			message: 'Hello Vue!'
		  }
		})

3:指令:--------------------------------------是带有V-前缀的特殊属性，通过属性来操作元素
	1: v-text:----------------------------在元素当中插入值
		 <div id='add'>
			<p v-text="arr"></p>
		 </div>

		<script>
			new Vue({
				el: "#add",
				data: {
					arr:"森纳那亚克",
				}
			})
		</script> 

	2: v-html:----------------------------在元素不中不仅可以插入文本，还可以插入标签
		<div id='a1'>
			<p v-text="crr"></p>
		</div>

		<script>
			new Vue({
				el: "#a1",
				data: {
					crr:'<input type="button">',
				}
			})
		</script> 

	3: v-if:------------------------------根据表达式的真假值来动态插入和移除元素,若状态为flase,将标签注释。
		<div id="spp">
			<p v-if="msg">aaaaa</p>
			<p v-else>bbbbbbbbb</p>
		</div>

		<script>
			new Vue({
				el: "#spp",
				data: {
					arr:True,
				}
			})
		</script> 

	4：v-show:----------------------------根据表达式的真假值来隐藏和显示元素
		<div id="spp">
			<p v-show="msg">认真学，刻苦练！</p>
		</div>

		<script>
			new Vue({
				el: "#spp",
				data: {
					msg:True,
				}
			})
		</script> 

	5：v-for:-----------------------------根据变量的值来循环渲染元素
		<div id="spp">
			<ul>
			<li v-for="(item,index) in msg">{{item}}:{{index}}</li>
			</ul>
			<ul>
				<li v-for="(item,key,index) in obj">{{item}}:{{key}}:{{index}}</li>
			</ul>
			<ul>
				<li v-for="item in arr">{{item.username}}{{item.age}}{{item.sex}}</li>
			</ul>
		</div>

		<script>
			new Vue({
				el: "#spp",
				data: {
					msg: ['星期一', '星期二', '星期三', '星期四', '星期五', '放假'],
					obj: {a: "老虎", b: "狮子", c: "猎豹", d: "大象"},
					arr:[
						{"username":"悟空"},
						{"age":10000},
						{"sex":"male"}
					]
				}
			});
		</script>	

	6: v-on:------------------------------监听元素事件，并执行相应的操作<!-- 完整语法 --><a v-on:click="doSomething">...</a><!-- 缩写 --><a @click="doSomething">...</a>
		例1：
			<div id="spp">
				<ul>
					<li v-for="item in aa">{{item}}</li>
				</ul>
				<input type="button" value="点我你试试" @click="show()">
			</div>

			<script>
				new Vue({
					el: "#spp",
					data: {
						aa:[11,22,33,44,55,66,77,88,99],
					},
					methods: {
						show: function () {
							this.aa.pop();
						}
					}
					}
					)
			</script>

		例2:
			<div id="app4">
				<p>{{masge}}</p>
				<button v-on:click="dian">逆转消息</button>
			</div>

			<script>
				var app4 = new Vue({
					el:"#app4",
					data:{
						masge:"wang,shang,Long"
					},
					methods:{
						dian:function () {
						this.masge = this.masge.split(',').reverse().join('')
						}
					}

				})
			</script>

	7: v-bind:----------------------------绑定元素的属性来执行相应的操作---完整语法<a v-bind:href="url">...</a> --缩写<a :href="url">...</a>
		例1：跳转
			<div id="spp">
				<a :href="url">试试就试试</a>
			</div>

			<script>
				new Vue({
					el: "#spp",
					data: {
						url:"https://www.baidu.com/",
					},
					}
					})
			</script>

		例2：悬浮提示信息-----------------将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
			<div id="app_1">
				<span v-bind:title="message">
					鼠标悬停几秒查看此处动态绑定的提示信息！
				</span>
			</div>

			<script>
				var app1 = new Vue({
					el:"#app_1",
					data:{
						message:'页面加载与' + new Date().toLocaleString()
					}
				})
			</script>

	8: v-model:---------------------------实现了数据和视图的双向绑定：--把元素的值和数据相绑定，当输入内容时，数据同步发生变化，视图是---------数据的驱动当改变数据时，输入内容也会发生变化,数据是------视图的驱动
		<div id="app">
			<input type="text" v-model="msg">
			<p>{{msg}}</p>
			<input type="submit" value="变" @click="change">
		</div>

		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"挣钱！"
				},
				methods:{
					change:function () {
						this.msg="挣个屁！"
					}
				}
			})
		</script>

	9: 取反-------------------------------!,通过不停改变状态，实现闪烁
		div id="spp">
			<p v-show="msg">认真学，刻苦练！</p>
		</div>
		<script>
			var vm = new Vue({      //起个别名
				el: "#spp",          //表示使用uve
				data: {
					msg: true
				}
			});
			window.setInterval(function () {
				vm.msg = !vm.msg;   //取反
			}, 1000)                //间隔秒数
		</script>

	10：自定义指令：----------------------directives：{指令名：{.......}}
		 <div id="app">
			<input type="text" v-focus>
		</div>

		<script>
			new Vue({
				el:"#app",
				data:{},
				directives:{   //自定义指令
					focus:{   //自定义指令的名字
						inserted:function (tt) {        //当绑定的元素显示时
							tt.focus();
							tt.style.backgroundColor="blue";
							tt.style.color="#fff";
						}

					}
				}
			})
		</script>

4:计算属性：----------------------------------computed，模板内的表达式非常便利用于简单运算的。放入太多的逻辑会让模板过重且难以维护。
		  -----------------------------------所以，对于任何复杂逻辑，你都应当使用计算属性。
		  计算属性：
				<div id="example">
				  <p>Original message: "{{ message }}"</p>
				  <p>Computed reversed message: "{{ reversedMessage }}"</p>
				</div>
				var vm = new Vue({
				  el: '#example',
				  data: {
					message: 'Hello'
				  },
				  computed: {
					// 计算属性的 getter
					reversedMessage: function () {
					  // `this` 指向 vm 实例
					  return this.message.split('').reverse().join('')
					}
				  }

		  计算属性缓存 vs 方法：-------------每当触发重新渲染时，调用方法将总会再次执行函数
				两种方式的最终结果确实是完全相同的。
				然而，不同的是计算属性是基于它们的依赖进行缓存的。
				计算属性只有在它的相关依赖发生改变时才会重新求值。
				这就意味着只要 message 还没有发生改变，
				多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
			例：
				<p>Reversed message: "{{ reversedMessage() }}"</p>
				// 在组件中
				methods: {
				  reversedMessage: function () {
					return this.message.split('').reverse().join('')
				  }
				}

		  计算属性 vs 侦听属性：-------------watch
				Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
				当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——
				特别是如果你之前使用过 AngularJS。
				然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

				<div id="demo">{{ fullName }}</div>
				var vm = new Vue({
				  el: '#demo',
				  data: {
					firstName: 'Foo',
					lastName: 'Bar',
					fullName: 'Foo Bar'
				  },
				  watch: {
					firstName: function (val) {
					  this.fullName = val + ' ' + this.lastName
					},
					lastName: function (val) {
					  this.fullName = this.firstName + ' ' + val
					}
				  }
				})
				上面代码是命令式且重复的。将它与计算属性的版本进行比较：

				var vm = new Vue({
				  el: '#demo',
				  data: {
					firstName: 'Foo',
					lastName: 'Bar'
				  },
				  computed: {
					fullName: function () {
					  return this.firstName + ' ' + this.lastName
					}
				  }
				})

		  计算属性的setter-------------------计算属性+方法
			计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
			例：
				// ...
				computed: {
				  fullName: {
					// getter
					get: function () {
					  return this.firstName + ' ' + this.lastName
					},
					// setter
					set: function (newValue) {
					  var names = newValue.split(' ')
					  this.firstName = names[0]
					  this.lastName = names[names.length - 1]
					}
				  }
				}
				// ...

				现在再运行 vm.fullName = 'John Doe' 时，
				setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。	

5:侦听器--------------------------------------watch,当需要在数据变化时执行异步或开销较大的操作时
	虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
	这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
	当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

	例：
		<div id="watch-example">
		  <p>
			Ask a yes/no question:
			<input v-model="question">
		  </p>
		  <p>{{ answer }}</p>
		</div>
		<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
		<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
		<script>

		var watchExampleVM = new Vue({
		  el: '#watch-example',
		  data: {
			question: '',
			answer: 'I cannot give you an answer until you ask a question!'
		  },
		  watch: {
			// 如果 `question` 发生改变，这个函数就会运行
			question: function (newQuestion, oldQuestion) {
			  this.answer = 'Waiting for you to stop typing...'
			  this.debouncedGetAnswer()
			}
		  },
		  created: function () {
			// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
			// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
			// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
			// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
			// 请参考：https://lodash.com/docs#debounce
			this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
		  },
		  methods: {
			getAnswer: function () {
			  if (this.question.indexOf('?') === -1) {
				this.answer = 'Questions usually contain a question mark. ;-)'
				return
			  }
			  this.answer = 'Thinking...'
			  var vm = this
			  axios.get('https://yesno.wtf/api')
				.then(function (response) {
				  vm.answer = _.capitalize(response.data.answer)
				})
				.catch(function (error) {
				  vm.answer = 'Error! Could not reach the API. ' + error
				})
			}
		  }
		})
		</script>

6：组件化应用构建：--------------------------组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型。
	组件基础：-------------------------------Vue.component('组件名',{data:function(){return{}},template:'组件html'})
		1：在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：：：
			Vue.component('todo-item', {-------------------------------定义名为 todo-item 的新组件
			  template: '<li>这是个待办项</li>'
			})

		2：现在你可以用它构建另一个组件模板：
			<ol>
			  <todo-item></todo-item>----------------------------------创建一个 todo-item 组件的实例
			</ol>

		3：我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
			Vue.component('todo-item', {-------------------------------todo-item 组件现在接受一个
			  props: ['todo'],-----------------------------------------"prop"，类似于一个自定义特性。这个 prop 名为 todo。
			  template: '<li>{{ todo.text }}</li>'
			})

		4：现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中：
			模板：
				<div id="app-7">
				  <ol>
					  现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”
					<todo-item
					  v-for="item in groceryList"
					  v-bind:todo="item"
					  v-bind:key="item.id">
					</todo-item>
				  </ol>
				</div>

			自定制组件：
				Vue.component('todo-item', {
				  props: ['todo'],
				  template: '<li>{{ todo.text }}</li>'
				})

			参数：
				var app7 = new Vue({
				  el: '#app-7',
				  data: {
					groceryList: [
					  { id: 0, text: '蔬菜' },
					  { id: 1, text: '奶酪' },
					  { id: 2, text: '随便其它什么人吃的东西' }
					]
				  }
				})

		Vue.component('组件名',{data:function(){return{}},template:'组件html'})-----------------创建组件
			---------------------------使用组件---------------------------------------------
				<div id="app">
					 <Vheader></Vheader>
					 <Vheader></Vheader>
				</div>

			---------------------------引用js------------------------------------------------
				<script type="text/javascript" src="vue.js"></script>
				<script type="text/javascript">

			---------------------------组件的创建--------------------------------------------
				 Vue.component('Vheader',{-------------------------创建组件，组件名

					data:function(){-------------------------------数据，一定是函数 必须要有返回值，必须要return 哪怕是空对象
						return {
						}
					},
					template:`<div class="header">------------------组件样式
								<div class="w">
									<div class="w-l">
										<img  src="./logo.png"/>
									</div>
									<div class="w-r">
										<button>登录</button><button>注册</button>
									</div>
								</div>
							</div>`
				})

			---------------------------Vue---------------------------------------------------
				var app = new Vue({
					el:'#app',
					data:{

					},
					computed:{

					},
					methods:{
					}
				})

7:vue解决跨域:--------------------------------axios
	前端
		1:下载--------------------------------npm install axios
		2：main.js:
			import Vue from 'vue'
			import App from './App'
			import router from './router'
			import axios from 'axios'
			//-------在vue的全局变量中设置了 $axios=axios,以后每个组件使用时：this.$axios------------------------
			Vue.prototype.$axios = axios;
			Vue.config.productionTip = false;
			axios.defaults.headers['Content-Type'] = 'application/json'
			new Vue({
			  el: '#app',
			  router,
			  components: { App },
			  template: '<App/>'
			});

	后端：
		cors.py:
			class MiddlewareMixin(object):
			def __init__(self, get_response=None):
				self.get_response = get_response
				super(MiddlewareMixin, self).__init__()

			def __call__(self, request):
				response = None
				if hasattr(self, 'process_request'):
					response = self.process_request(request)
				if not response:
					response = self.get_response(request)
				if hasattr(self, 'process_response'):
					response = self.process_response(request, response)
				return response

				class CORSMiddleware(MiddlewareMixin):

					def process_response(self,request,response):
						# 添加响应头

						# 允许你的域名来获取我的数据
						response['Access-Control-Allow-Origin'] = "*"

						# 允许你携带Content-Type请求头
						# response['Access-Control-Allow-Headers'] = "Content-Type"

						# 允许你发送DELETE,PUT
						# response['Access-Control-Allow-Methods'] = "DELETE,PUT"

						return response

		setting.py:

		配置
			MIDDLEWARE = [
				'django.middleware.security.SecurityMiddleware',
				'......'
				'luffy.cors.CORSMiddleware',
			]

		外加配置版本设置
		REST_FRAMEWORK = {
			'DEFAULT_RENDERER_CLASSES':['rest_framework.renderers.JSONRenderer','rest_framework.renderers.BrowsableAPIRenderer',],

			'DEFAULT_VERSIONING_CLASS':'rest_framework.versioning.URLPathVersioning',
			'ALLOWED_VERSIONS':['v1','v2'], # 允许的版本
			'VERSION_PARAM':'version', # 参数
			'DEFAULT_VERSION':'v1', # 默认版本

		}

搭建脚手架：
	vue-cli是vue.js的脚手架,用于自动生成vue.js工程模板的.

	安装以及使用步骤：
		安装。 npm install vue
			全局安装----------------------------------------------------npm install vue-cli -g或者cnpm install vue-cli -g

			查看是否安装成功--------------------------------------------vue -V(大写的V)
							--------------------------------------------vue list

		使用
			生成项目名是wsw的模板-----------------------------------vue init webpack wsw

			进入项目并安装依赖-------------cd wsw ------------------npm install

			运行----------------------------------------------------npm run dev	

组件的使用：

模块：

使用jQ:

    1：安装-------------------------------------npm install jquery --save

    2：webpack配置
		(1):在项目根目录下的build目录下找到webpack.base.conf.js文件，
			在开头使用以下代码引入webpack，因为该文件默认没有引用，
			------var webpack = require('webpack')

		(2)然后在module.exports中添加一段代码，

			----------原有代码--------------------
			resolve: {
			  extensions: ['.js', '.vue', '.json'],
			  alias: {
			'vue$': 'vue/dist/vue.esm.js',
			'@': resolve('src')
			  }
			},
			**--------添加代码---------------------
			plugins: [
			  new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery",
			jquery: "jquery",
			"window.jQuery": "jquery"
			  })
			],
			---------原有代码----------------------
			module: {
			  rules: [
				......
			  ]
			}

		(3)然后许多其他解决办法到此就说在main.js里导入就可以了，然而题主照着做了。

			main.js里导入jQuery
			import 'jquery'

			在Vue组件里使用 $ or jQuery 写了操作dom的代码
			接着启动项目
			npm run dev

	3:编译报错解决方法：
			http://eslint.org/docs/rules/no-undef '$' is not defined or
			http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

		(1)eslint检查-----------------------------机智的朋友肯定想到跟eslint有关，
							这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了，
							在改文件的module.exports中，为env添加一个键值对 jquery: true 就可以了，
							也就是：

							env: {
							  // 原有
							  browser: true,
							  // 添加
							  jquery: true
							}

		(2)npm run dev ，OK了，去组件里试一下吧，console.log($('选择器')) ，
			你会发现成功使用jQuery获取到了DOM。

使用bootstarp:

Sublime Text设置高可亮：

	1:下载，解压----------------https://github.com/vuejs/vue-syntax-highlight

	2：打开---------------------进入sublime选择菜单项“Preferences---->Browse Packages

	3：创建---------------------创建vue文件夹

	4：拷入---------------------在Vue文件夹中，将vue-syntax-highlight-master压缩包解压后的所有文件考入。

	5：载入---------------------按下快捷键“ctrl+shift+p”，在打开的packages输入框中输入vue，
								选择“Set Syntax:Vue Component”进行加载。

	6：重启Sublime

node.js-----------------------------------以运行js的服务平台，可以当做值一门后端语言，它的开发语言是js[
	python---------------自己创建服务
	php------------------apache
	java-----------------tomcat
	node.js--------------express
	安装以及使用-----------------------------http://www.nodejs.en
	特性：
		1：非阻塞IO模型
		2：事件驱动
	运用场景：
		高并发低业务

webpacck-----------------------------------是一个模块管理器
	可以把ccs图片当做模块加载。
	可以把文件进行压缩打包成一个js文件，减少html请求。
	根据模块之间的关系进行分析，按需要加载。
	可以安装一些插件，对插件进行打包处理。
	安装以及使用：
		npm install webpacck-g  -------全局安装。

练习：
	1：tag切换
		   <div id="mybox">
				<ul>
					<li>
						<span v-on:click="qh(true)">二唯码登录</span>
					</li>
					<li>
						<span v-on:click="qh(false)">邮箱登录</span>
					</li>
				</ul>

				<div v-show="temp">
					<img src="erma.jpg">
				</div>

				<div v-show="!temp">
					<form action="http://mail.163.com" method="post">
						<p><input type="email"></p>
						<p><input type="password"></p>
						<p><input type="submit" value="登录"></p>
					</form>
				</div>
			</div>

			<script>
				new Vue({
					el: "#mybox",
					data: {
						temp: true
					},
					methods: {
						qh: function (t) {
							this.temp = t
						}
					}
				})
			</script>

	2：动态生成html
		<div id="pa">
			<ul>
				<li><input type="checkbox">日韩</li>
				<li><input type="checkbox">欧美</li>
				<li><input type="checkbox">国产</li>
				<li><input type="checkbox" v-on:click="create()">其他</li>
				<li v-html="htmlstrs" v-show="af"></li>
			</ul>
		</div>

		<script>
			new Vue({
				el:"#pa",
				data:{
					af:false,
					htmlstrs:"<textarea></textarea>"
				},
				methods:{
					create:function(){
						this.af=!this.af
					}
				}
			})
		</script>

	3:表格增删改查
		<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<title>Title</title>
		   <script src="vue.js"></script>
			<style>
				ul li{
					list-style: none;
				}
				.tipbox{
					width: 200px;
					height:200px;
					border: 1px solid cornflowerblue;
					position: absolute;
					background-color: #aaaaaa;
					top: 200px;
					left: 600px;

				}
			</style>
		</head>
		<body>
			  <div id="app">
				<div>
					<input type="text" placeholder="姓名" v-model="username">
					<input type="text" placeholder="年龄" v-model="age">
					<input type="button" value="增加" @click="add">
				</div>
				  <div>
						<table cellpadding="0" border="1">
							<tr v-for="(item,index) in arr">
								<td>{{item.username}}</td>
								<td>{{item.age}}</td>
								<td>{{index}}</td>
								<td><input type="button" value="删除" @click="del(index)"></td>
								<td><input type="button" value="修改" @click="showBox(index)"></td>
							</tr>
						</table>
				  </div>
				  <div class="tipbox" v-show="isShow">
						<p><input type="text" placeholder="姓名" v-model="m_username"></p>
						<p><input type="text" placeholder="年龄" v-model="m_age"></p>
					<p>
						<input type="button" value="确定" @click="save()">
						<input type="button" value="取消" @click="cancel()">
					</p>
				  </div>
			</div>
			<script>
				new Vue({
					el: "#app", //表示在当前这个元素内开始使用VUE
					data:{
						username: "",
						age: "",
						arr: [],
						isShow:false,
						m_username: "",
						m_age: "",
						n: 0
					},
					methods: {
						add: function () {
							this.arr.push({username:this.username,age: this.age});
							console.log(this.arr);
						},
						del: function (index) {
							this.arr.splice(index,1);
						},
						showBox: function (index) {
							this.isShow = true;
							this.n = index;
							this.m_username = this.arr[index].username;
							this.m_age = this.arr[index].age;
						},
						cancel: function () {
							this.isShow = false
						},
						save: function () {
							this.arr[this.n].username = this.m_username;
							this.arr[this.n].age = this.m_age;
							this.isShow = false
						}
					}

				})

			</script>

		</body>
		</html>

	4:计算属性
		<div id="example">
		  <p>Original message: "{{ message }}"</p>
		  <p>Computed reversed message: "{{ reversedMessage }}"</p>
		</div>
		var vm = new Vue({
		  el: '#example',
		  data: {
			message: 'Hello'
		  },
		  computed: {
			// 计算属性的 getter
			reversedMessage: function () {
			  // `this` 指向 vm 实例
			  return this.message.split('').reverse().join('')
			}
		  }
		})

	5:切换音乐
		<!DOCTYPE html>
		<html>
		<head>
			<title></title>
			<style type="text/css">
				*{
					padding: 0;
					/*margin: 0;*/
				}
				ul{
					list-style: none
				}

				li{
					border-bottom: 1px solid gray;
				}
			</style>

		</head>
		<body>

		<div id="music">
			<audio :src="currSong" autoplay="" controls="" @ended='nextSong'></audio>

			<ul>
				<li v-for='(item,index) in songs' @click='clickHandler(index)'>
					<h3>歌名：{{item.name}}</h3>
					<p>歌手：{{item.author}}</p>
				</li>

			</ul>

			<button @click='addOneSong'>添加一首歌</button>
		</div>
		<script type="text/javascript" src="vue.js"></script>

		<script>

			var songs = [
				{id:1,src:'./audios/1.mp3',name:"la la Land",author:'Ryan'},
				{id:2,src:'./audios/2.mp3',name:"The Best of",author:'Skillof'},
				{id:3,src:'./audios/3.mp3',name:"It My Life",author:'Bon'},
				{id:4,src:'./audios/4.mp3',name:"Tender",author:'Blur'}

			]

			var music = new Vue({
				el:'#music',
				data:{

					songs:songs,

					currentIndex:0
				},
				methods:{
					clickHandler(index){
						// this.currentSong = this.songs[index].src;
						this.currentIndex = index;

					},
					nextSong(){
						// alert(1)
						this.currentIndex++;
						// this.currentSong = this.songs[this.currentIndex].src;
					},
					addOneSong(){
						this.songs.push({id:5,src:'./audios/4.mp3',name:"Tender",author:'Blur'});
					}
				},
				computed:{

					currSong(){
						console.log(11111);
						return this.songs[this.currentIndex].src;

					}
				},
				created(){
					//通常都来做页面的初始化
				}
			})
		</script>

		</body>
		</html>

	6：