学习途径：vue官网， 慕课网
一.
所需知识储备：js，es6，webpack，npm
1.nuxt框架围绕vue推出
2.weex可以用vue写app
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
用vue写出hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src = './vue.js'></script>
</head>
<body>
<div id = "app">{{content}}</div> <!--{{content}}调用data内对应的数据-->
<script>
/*var dom = document.getElementById("app");
dom.innerHTML = "hello world";
setTimeout(function(){
dom.innerHTML = "bye world";
},2000) //隔两秒进行换内容
*/
var app = new Vue({
el: '#app', //实例负责管理的dom范围
data:{ //定义数据
content:'hello world'
}
})
setTimeout(function(){
app.$data.content = 'bey world'
},2000)
</script>
</body>
</html>MVVM模式的初步接触
笔记：
几个关键点：
1.首先通过new创建Vue实例
2.Vue实例中的el属性会指定Vue实例要接管dom中对应的元素
3.v-on：为元素绑定事件
4.v-model：data中数据与元素中数据的双向绑定
5.v-for：循环提取一个数组或一个对象中的所有项
6.Vue最大的特点就是去除了对dom的直接操作，只用关心数据是如何变化的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoList</title>
<script src = './vue.js'></script>
</head>
<body>
<div id = "app">
<input type="text" v-model="inputValue"/> <!--v-model数据的双向绑定-->
<button v-on:click="handleBtnClick">submit</button>
<ul>
<li v-for = "item in list">{{item}}</li> <!--标签属性v-for-->
</ul> <!--item是循环的每一项内容，list指的是data处的list-->
</div>
<!--MVVM设计模式的初步探索-->
<script>
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
//alert(this.inputValue) //data中的inputValue
}
}
})
</script>
</body>
</html>
1.MVP模式
M：模型层
V：视图层
P：控制器层
View发出一个事件交给Presenter，控制器调取model或者直接操作view，presenter是核心，大部分的工作都在presenter层。
2.MVVM
M：负责储存数据（模型层）
V：负责显示数据（视图层） 面向数据进行编程
VM：Vue自带的层
前端组件化
什么东西都揉在一起根本不好维护
特别是大型项目
所以我们把页面切分成几个部分，就是组件，也就是组件化的概念。
将的我的ToDoList组件化
Vue.component() 提供全局组件的一个方法
遭遇报错，为什么老师写的不一样就可以运行？？？？一脸懵逼？？？
（·····因为我把TodoItem写成ToDoItem了 干 ！）
[Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)<todo-item v-for="item in list"></todo-item>Vue.component("ToDoItem",{ //vue.component()创建全局组件的一个方法
template:"<li>Todo item</li>" //写一个模板
})上述Vue.component中的ToDoItem改为todo-item即可
v-bind和v-on的缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDoList</title>
<script src = './vue.js'></script>
</head>
<body>
<div id = "app">
<div>
<input type="text" v-model="inputValue"/>
<button @click="handleBtnClick">submit</button>
</div>
<ul>
<todo-item :content ="item"
v-for="item in list">
</todo-item> <!--v-bind子组件传入一个绑定值-->
</ul>
</div>
<script>
/*
Vue.component("TodoItem",{ //vue.component()创建全局组件的一个方法
props: ['content'], //从父组件接收内容
template:"<li>{{content}}</li>" , //写一个模板 插值表达式来写content
})
*/
var TodoItem = {
props: ['content'],
template:"<li>{{content}}</li>" ,
}
var app = new Vue({
el:'#app',
components: {
TodoItem:TodoItem //通过对象来注册局部组件 注册到Vue实例中
},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
TodoList组间传值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TodoList组件间传值</title>
<script src = "./vue.js"></script>
</head>
<body>
<!--这一次的学习中我们涉及到了子组件向父组件传值这个情况-->
<div id ="root">
<div>
<input type = "text" v-model="todoValue" />
<button @click = "handleBtnClick">Submit</button>
</div>
<ul>
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
v-on:delete="handleItemDelete"> <!--父组件监听delete事件-->
</todo-item>
</ul>
</div>
<script>
var TodoItem = {
props:['content','index'],
template:"<li v-on:click='handleItemClick'>{{content}}</li>",
methods: {
handleItemClick: function(){
//$emit向外触发一个delete事件,也就是像父组件所监听的内容传值
this.$emit("delete",this.index);
}
}
}
var app = new Vue({
el:'#root',
components:{
TodoItem: TodoItem
},
data:{
todoValue:"",
list:[]
},
methods:{
handleBtnClick:function(){
this.list.push(this.todoValue)
this.todoValue=""
},
handleItemDelete:function(index){
this.list.splice(index,1); //splice(index,1) 从 index 开始删除1个元素
}
}
})
</script>
</body>
</html>