Vue开发学习-周报1-基础内容学习

时间:2019-01-18
本文章向大家介绍Vue开发学习-周报1-基础内容学习,主要包括Vue开发学习-周报1-基础内容学习使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

完成情况

  • Vue实例
  • Vue语法指令
  • Vue组件
  • Vue生命周期(后期开发会使用)
  • vue中的css样式绑定
  • Vue条件判断渲染
  • 列表渲染
  • 父子组件通信
  • 插槽

重点特殊内容记录

Vue实例的特殊问题

计算属性computed,watch监听器都会自动缓存,提高性能

数据传递问题

子父组件通信,子向父发送通过emit进行发送,在父组件中用@监听,可以带回返回的数据
父向子发送可以采用属性的方式发送,子中用props进行接收

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件传值</title>
	<script src='./vue.js'></script>
</head>
<body>

	<div id="root">
		<counter :count="3" @inc="handleIncrease"></counter>
		<counter :count="2" @inc="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>

	<script>

		var counter = {
			props: ['count'],
			data: function() {
				return {
					number: this.count
				}
			},
			template: '<div @click="handleClick">{{number}}</div>',
			methods: {
				handleClick: function() {
					this.number = this.number + 2;
					this.$emit('inc', 2)
				}
			}
		}

		var vm = new Vue({
			el: '#root',
			data: {
				total: 5
			},
			components: {
				counter: counter
			},
			methods: {
				handleIncrease: function(step) {
					this.total += step
				}
			}
		})
	</script>

</body>
</html>

Vue组件问题

1.调用组件时绑定事件并不生效,触发事件要在组件中的元素进行事件绑定

2.``原生事件需要加上.native修饰符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件绑定原生事件</title>
	<script src='./vue.js'></script>
</head>
<body>

	<div id="root">
		<child @click.native="handleClick"></child>
	</div>

	<script>

		Vue.component('child', {
			template: '<div>Child</div>',
		})

		var vm = new Vue({
			el: '#root',
			methods: {
				handleClick: function() {
					alert('click')
				}
			}
		})
	</script>

</body>
</html>

3.在子组件中,定义data不能直接定义对象,必须值定义为函数,必须返回数据,data:function(){}

			data: function() {
				return {
					number: this.count
				}
			},

4.动态组件component :is=变量,根据变量来自动加载不同组件
Vue生命周期(后期开发会使用)

vue中的css样式绑定

1.在父组件之中对DOM进行操作时,是对组件进行操作,例如ref引用是,调用的是模板的内容

Vue条件判断渲染

1.v-show此方法渲染到页面,通过style对样式display来进行显示与不显示的操作

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Vue中的条件渲染</title>
   <script src="./vue.js"></script>
</head>
<body>

   <div id="app">
      <div v-show="show">
         用户名:<input key="username" />
      </div>
   </div>

   <script>
      var vm = new Vue({
         el: "#app",
         data: {
            show: false,
         }
      })
   </script>
</body>
</html>







列表渲染

1.使用template模板占位符,template是不会被渲染,这样可以实现包裹内的元素可以逐个进行渲染单独占位显示

<div id="app">
                         <template v-for="(item,index) of list">
                                 <div>
                                 {{item.text}}----{{index}}
                                 </div>
                                 <span>
                                 {{item.text}}
                                 </span>
                         </templata>
</div>

父子组件通信

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件传值</title>
	<script src='./vue.js'></script>
</head>
<body>

	<div id="root">
		<counter :count="3" @inc="handleIncrease"></counter>
		<counter :count="2" @inc="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>

	<script>

		var counter = {
			props: ['count'],
			data: function() {
				return {
					number: this.count
				}
			},
			template: '<div @click="handleClick">{{number}}</div>',
			methods: {
				handleClick: function() {
					this.number = this.number + 2;
					this.$emit('inc', 2)
				}
			}
		}

		var vm = new Vue({
			el: '#root',
			data: {
				total: 5
			},
			components: {
				counter: counter
			},
			methods: {
				handleIncrease: function(step) {
					this.total += step
				}
			}
		})
	</script>

</body>
</html>

任务

  • 学习Vue中的动画特效
  • Vue项目的环境配置以及具体搭建可能需要补充知识
  • 完成首页开发