Vue学习-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="./vue.js"></script>
	
</head>
<body>
	<div id="root">
		<child>
			<template slot-scope="props">
				<h1>{{props.item}}</h1>
			</template>
		</child>
	</div>
	<script >
		Vue.component('child',{
			data:function(){
				return {
					list:[1,2,3,4]
				}
			},
			template:`
				<div>
					<ul>
						<slot
							v-for="item of list"
								:item=item
						></slot>
					</ul>
				</div>
			`
		})
		var vm=new Vue({
			el:'#root',
			
		})
	</script>
</body>
</html>

知识点记录：

（1）
v-if 和 v-else 必须连在一起使用：

<div v-if="show">{{message}}</div>
<div v-else>By word</div>

（2）
key="username"
用key值命名，用于区分渲染

（3）
操作数组通过方法增删改才会导致页面渲染
包括：push pop 等

（4）
template 站位符用于循环等展示元素，后不会渲染到页面上

（5）
子组件里的data必须是 function(){}

VUE

Vue.js（通常被称为的Vue ;发音/ v Ĵ ú /，像图）是一种开源模型视图查看模型的JavaScript框架用于构建用户界面和单页的应用。[10]它由Evan You创建，并由他和其他活跃的核心团队成员（来自Netlify和Netguru [11]）维护。

前端

之前我只注重后端开发，对于前端的学习，基本停留在能用就行，看懂一部分就行，前端的很大部分都是直接套用前人的代码模板，使用起来很不方便，因为都是只能机械的套用，所以接下来我打算学习前端的内容，让自己具备前后端开发的本领。
以往的前端代码都是前端配套的模板，加上jQuery使用，效果不是很理想，在写了一部代码之后，我发现了很严重的问题，就是如果是模板自带，我只能沿用，模板不具备的样式，我基本都很难去实现去修改，导致开发形式单一，导致前端不够美观，不能随心所欲的开发前端样式，于是我下定决心开始学习前端，看了一部分 webpack 和 nodejs 的知识，想尽快上手开发，所以开始学习 Vue 的开发。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<script src="./vue.js"></script>
	<script src="./jquery.mini.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue">
		<button @click="handleBtnClick">提交</button>
		<ul>
			<!-- <li v-for="item in list">{{item}}</li> -->
			<todo-item  :content="item" 
						:index="index" 
						v-for="(item,index) in list" 
						@delete="handleItemDelete">
						
			</todo-item>
		</ul>
	</div>
	<script>
		Vue.component("TodoItem",{
			props:['content','index'],
			template:"<li @click='handleItemClick'>{{content}}</li>",
			methods:{
				handleItemClick:function(){
					this.$emit("delete",this.index);
				}
			}
		})
		var app=new Vue({
			el:'#app',
			data:{
				list:[],
				inputValue:''
			},
			methods:{
				handleBtnClick: function() {
					this.list.push(this.inputValue)
					this.inputValue=''
				},
				handleItemDelete:function(index){
					this.list.splice(index,1);
				}

			}
		})

	</script>
</body>
</html>

总结

我在学习的过程中，发现自己不是很适合先去敲用例再去实现小项目，我适合先去实现项目，然后发现项目中有不会用的部分再回头去找API，去学习去了解。
Vue 的学习感觉还是挺简单的，而且不用再操作DOM了，理解上很容易，而且逻辑上比JS要容易理解很多，让我对前端的认识有了很大的改观。
加油吧！前端的学习！！