<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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要容易理解很多，让我对前端的认识有了很大的改观。
加油吧！前端的学习！！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
