作为一个即将毕业的大学生，非常荣幸的进入了一个中型IT公司去做JAVA实习生。中型公司大家应该都知道，公司内部结构已经差不多很稳定了，每个人都有自己的一部分进行工作。我更荣幸的是到了一个创业部门，在那里有很多大牛，有更多我需要学习的知识。学习Java开发也有将近一年多了，每次看到别人前端的页面我都感动非常的激动，有学习的冲动。现在机会来了，部门学习uni - app，我也很快的上手了，并且完成了工作任务。看到uni - app基于vue来实现的，所以我找到时间，来学习我梦寐以求的前端知识。前几天基础知识学习的差不多了，所以开始进阶框架，vue是我的首选，写Vue的学习API，记录自己的学习之路。加油！！！
一、Vue定义
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
二、Vue的引入
1. 使用 <script src=""> 方式引入vue
2.创建vue容器 <div id="app"></div>
3.创建vue对象 var vew = new Vue({});
4.绑定vue容器 el: "#app"
5.定义数据 data: { content: ' ' }
6.绑定数据 {{content}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var vue = new Vue({
el:'#app',
data:{
content: 'Hello World!'
}
});
</script>
</body>
</html>运行结果：
三、Vue基础
1.数据绑定 插值方式 {{content}}
<div id="app">{{content}}</div>
<script>
//使用vue的方式
var vue = new Vue({
el:'#app',
data:{
content: 'Hello World!'
}
});
</script>运行结果：
2.条件语句 v-if=" "
<div id="app">
<span v-if="isDisplay">显示出来了</span>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
isDisplay: true
}
});
</script>运行结果：
isDisplay=true 
isDisplay=false,不会显示
3.循环语句 v-for=""
<div id="app">
<ul>
<li v-for="(item,index) in list">index = {{index}},key = {{item}}</li>
</ul>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
list: [1,2,3,4,5,6,7]
}
});
</script>运行结果：
4.input标签数据绑定 v-model=" "
<div id="app">
<input type="text" v-model="content"/><button v-on:click="handleClick">提交</button>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
content: ''
},
methods: {
handleClick: function(){
console.log(this.content);
}
}
});
</script>
数据的双向绑定：
①页面向vue传数据
输入 
打开控制台，查看日志 
②vue向页面传数据
打开浏览器F12，改变后台的content 
页面体现：
5.添加事件监听器 v-on: 简写 @
看4中的例子，里面有。
6.绑定 v-bind: 简写 ：
四、Vue组件
注意：驼峰定义组件名称 TodoList 使用的时候使用-来分割 <todo-list></todo-list>
1.全局组件 Vue.component({ template: "" })
①全局组件定义
<script>
Vue.component("TodoList",{
template: "<span>自定义组件</span>"
});
var vue = new Vue({
el: '#app'
})
</script>②组件使用
<div id="app">
<todo-list></todo-list>
</div>运行结果：
2.局部组件 var TodoList = { template: " " }
①局部组件定义
components: { 新组件名称：局部组件 }
<script>
var TodoList = {
template: "<span>自定义组件</span>"
};
var vue = new Vue({
el: '#app',
components:{
List: TodoList
}
})
</script>②组件使用
<div id="app">
<list></list>
</div>3.父组件向子组件传值 props
①绑定数据 v-bind:content="text"
②组件定义数据 props:['content']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<list v-bind:content="text"></list>
</div>
<script>
var TodoList = {
props:['content'],
template: "<span v-on:click='test'>自定义组件</span>",
methods: {
test: function(){
alert(this.content);
}
}
};
var vue = new Vue({
el: '#app',
components:{
List: TodoList
},
data: {
text: '你说什么啊'
}
})
</script>
</body>
</html>
运行结果：
4.子组件向父组件传值 $emit
①子组件点击事件 template: "<span v-on:click='test'>change</span>" 子组件上的方法
②子组件点击事件声明监听器，声明传入参数 test: function(content){ this.$emit("change",'子组件数据'); }
③父组件定义监听器 <list @change="handleChange"></list> 必须在父组件的子组件上使用
④父组件实现监听器方法 handleChange: function(content){ this.content = content; } 父组件中的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<span>这里将出现内容：{{content}}</span><br>
<list @change="handleChange"></list>
</div>
<script>
var TodoList = {
template: "<span v-on:click='test'>change</span>",
methods: {
test: function(content){
this.$emit("change",'子组件数据');
}
}
};
var vue = new Vue({
el: '#app',
components:{
List: TodoList
},
data: {
content: ''
},
methods: {
handleChange: function(content){
this.content = content;
}
}
})
</script>
</body>
</html>运行结果：
976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
