eyb：Vue学习2

（1）条件渲染

（2）列表渲染

（3）事件处理

（4）Axios异步通信

（5）表单输入绑定

（6）组件基础

（7）计算属性

（8）插槽内容

（9）自定义事件

（10）Vue-cli搭建

（11）Vue-cli目录结构

（12）Webpack简介

（13）Webpack的安装及使用

（14）Vue-router

（1）条件渲染

学习vue的语法：什么是条件渲染呢？说起来其实就是if-else

if-else

双项绑定：

if- else -if


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>条件渲染</title>
	</head>
	<body>
		<div id="app">
		  <div v-if="type === 'A'">
		    A
		  </div>
		  <div v-else-if="type === 'B'">
		    B
		  </div>
		  <div v-else-if="type === 'C'">
		    C
		  </div>
		  <div v-else>
		    Not A/B/C
		  </div>
		</div>
		
		<script>
			var app = new Vue({
				//element的缩写,挂在元素
			  el: '#app',
			  data: {
			    type:'B'
			  }
			})
		</script>
	</body>
</html>

双向绑定：

（2）列表渲染

列表渲染：说白了就是for循环语句


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>条件渲染</title>
	</head>
	<body>
		<ul id="example-1">
		  <li v-for="item in items">
		    {{ item.message }}
		  </li>
		</ul>
		
		<script>
			var example1 = new Vue({
			  el: '#example-1',
			  data: {
			    items: [
			      { message: 'Foo' },
			      { message: 'Bar' }
			    ]
			  }
			})
		</script>
	</body>
</html>

（3）事件处理


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>条件渲染</title>
	</head>
	<body>
		<div id="example-1">
		  <button v-on:click="greet">Greet</button>
		</div>
		
		<script>
			var app = new Vue({
				//element的缩写,挂在元素
			  el: '#example-1',
			  methods:{
				  greet:function(){
					  alert("Hello Vue")
				  }
			  }
			})
		</script>
	</body>
</html>

可以通过this指向message数据，通过alert显示

（4）Axios异步通信

{
   "name": "百度",
   "url": "http://www.baidu.com",
   "page": 66,
   "isNonProfit": true,
   "address": {
       "street": "海淀区",
       "city": "北京市",
       "contury": "中国"
   },
   "links": [
       {
           "name": "Google",
           "url": "http://www.google.com"
       },
       {
           "name": "Baidu",
           "url": "http://www.baidu.com"
       }
   ]

}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入Vue在线CDN -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入Asiox -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<title>Axios</title>
	</head>
	<body>
		<div id="app">
		  <div>
			  名称：{{info.name}}
		  </div>
		  <div>
		  	  url：{{info.url}}
			  url:<a v-bind:href="info.url">{{info.url}}</a>
		  </div>
		  <ul>
			  <li v-for="link in info.links">
				  {{link.name}}--{{link.url}}
			  </li>
		  </ul>
		  
		</div>
		
		<script>
			var app = new Vue({
				//element的缩写,挂在元素
			  el: '#app',
			  data() {
			   return{
				   info: {
					   name:'',
					   url:'',
					   links:[]
				   }
			   }
			  },
			  //使用钩子函数 编译好的html挂载到页面完成后执行的事件钩子
			  mounted(){
				 //发送Axios请求,支持链式编程
				 axios
				      .get('data.json')
					  .then(response=> this.info=response.data)
				  
			  }
			})
		</script>
	</body>
</html>

点击第三行的连接：

（5）表单输入绑定


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入Vue在线CDN -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>表单输入绑定</title>
	</head>
	<body>
		<div id="app">
		 <input type="text" v-model="message" value="Hello"/>
		 <p>Message is:{{message}}</p>
		 
		 <!-- select里面加multiple就变成多选框-->
		 <select v-model="selected">
		    <option disabled value="">Please select one</option>
		   <option>A</option>
		   <option>B</option>
		   <option>C</option>
		 </select>
		 <span>Selected:{{selected}}</span>
		</div>
		
		<script>
			var app = new Vue({
				//element的缩写,挂在元素
			  el: '#app',
			  data: {
			    message: 'Hello Vue!',
				selected:''
			  }
			})
		</script>
	</body>
</html>

输入框添加111111

下拉列表框选择

（6）组件基础


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入Vue在线CDN -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>vue组件</title>
	</head>
	<body>
		<div id="app">
		    <ul>
				<!-- 使用定义的组件 -->
				<my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
			</ul>
		</div>
		
		<script>
			//原来js方式定义组件
			Vue.component("my-component-li",{
				//关联item 使用props
				props:["item"],
				template:'
{{item}}
'

})
var app = new Vue({
//element的缩写,挂在元素
el: '#app',
//数据
data:{
items:["古力娜扎","迪丽热巴","吗尔巴哈"]
}
})
</script>
</body>
</html>

（7）计算属性

把计算结果缓存起来，变成一个静态的属性，能够避免系统的开销


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入Vue在线CDN -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
		 <p>当前的时间：{{getcurrentTime()}}</p>
		 <p>计算属性当前的时间：{{getcurrentTime1}}</p>
		</div>
		
		<script>
			var app = new Vue({
				//element的缩写,挂在元素
			  el: '#app',
			  methods:{
				  getcurrentTime:function(){
					  return Date.now();
				  },
			  },
			  //计算属性
			  computed:{
			  	 getcurrentTime1:function(){
			  		  return Date.now();
			  	}
			  }
			 
			})
		</script>
	</body>
</html>

可以看到计算属性的值是不发生改变的：

（8）插槽内容

插槽就是为了给子组件确定一个摆放的位置的，利用插槽把子组件放到指定的位置


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入Vue在线CDN -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<title>插槽</title>
	</head>
	<body>
		<div id="app">
		  <todo>
			  <!--v-bind:是绑定下面的data中的信息 v-for循环data中的信息 -->
			  <todo-title slot="todo-title" v-bind:title="title"></todo-title>
			  <todo-content slot="todo-content" v-for="item in items" v-bind:item=item></todo-content>
		  </todo>
		</div>
		
		
		<script>
			//js语法定义组件 定义代办组件
			Vue.component("todo",{
				template:'todo-title\'>todo-content\'>
'
			});
			//定义代子组件 标题组件
			Vue.component("todo-title",{
				props:['title'],
				template:"{{title}}
"
			});
			//定义代子组件 内容组件
			Vue.component("todo-content",{
				props:['item'],
				template:"
{{item}}
"

子组件里面的事件是不能访问外面的事件的，通过this.$emit来绑定