VUE 慕课去哪儿 课程笔记

HELLO WORLD

首先对比一下传统JQuery代码和Vue代码的hello的区别

传统

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app"></div>
    <!-- 百度JQuery -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $('#app').html('你好 JQuery');
    </script>
</body>
</html>

vue

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">{{ message }}</div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: '你好 Vue!'
          }
        })
    </script>
</body>
</html>

vue的优势在于双向绑定,所有东西都是响应式的。页面数据其中有一个变化,另一个也会产生响应变化。


动态改变DOM中的数据,对比VUE和JQuery的不同

传统

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app"></div>
    <!-- 百度JQuery -->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $('#app').html('你好 JQuery');
        setTimeout(function(){
            $('#app').html('再见 JQuery');
        },2000);
    </script>
</body>
</html>

vue

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">{{ message }}</div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app',
          data: {
            message: '你好 Vue!'
          }
        })
        setTimeout(function(){
            app.$data.message = '再见 Vue';
        },2000);
    </script>
</body>
</html>


两者的区别在于

传统JQuery / JS 注重的点在对于DOM的获取和改变。

VUE可以不管DOM,专心操作对象中的数据

数据改变了,页面跟着变。



TODOLIST的小例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">
    	<!-- v-model的数据与data中的同名数据进行双向绑定 这里发生改变的同时,data里的同名数据也会变化 -->
    	<input type="text" name="todo" v-model="inputValue">
    	<!-- v-on:click绑定敲击事件 对应到methods同名方法 -->
    	<button v-on:click="handleBtnClick">提交</button>
    	<ul>
    		<li v-for="item in list">{{item}}</li>
    	</ul>
    </div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    	var app = new Vue({
    		el: "#app",
    		data: {
    			list: [],
    			inputValue: ''
    		},
    		methods: {
    			handleBtnClick: function(){
    				this.list.push(this.inputValue);
    				this.inputValue = '';
    			}
    		}
    	});
    </script>
</body>
</html>

这种只操作数据,不操作DOM,数据改变后页面自动发生变化,页面变化数据也同步改变。这种设计模式就是MVVM模式


MVVM模式



MVP模式





MVVM模式



MVVM模式中只需要把工作重点放在视图 和 模型中

VM层全部又Vue实现


使用组件化思想,重新加工TODOLIST

之全局组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">
    	<!-- v-model的数据与data中的同名数据进行双向绑定 这里发生改变的同时,data里的同名数据也会变化 -->
    	<input type="text" name="todo" v-model="inputValue">
    	<!-- v-on:click绑定敲击事件 对应到methods同名方法 -->
    	<button v-on:click="handleBtnClick">提交</button>
    	<ul>
    		<!-- <li v-for="item in list">{{item}}</li> -->
    		<!-- v-bind:content 传参数 与 props对应 -->
    		<todo-item v-bind:content="item" v-for="item in list"></todo-item>
    	</ul>
    </div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    	//创建全局组件的方法 TodoItem 对应 todo-item
    	Vue.component("TodoItem",{
    		props: ['content'],
    		template: "<li>{{content}}</li>"
    	});
    	
    	var app = new Vue({
    		el: "#app",
    		data: {
    			list: [],
    			inputValue: ''
    		},
    		methods: {
    			handleBtnClick: function(){
    				this.list.push(this.inputValue);
    				this.inputValue = '';
    			}
    		}
    	});
    </script>
</body>
</html>

用到标签有

v-bind:content

与之后的代码对应

props: ['content'],
template: "<li>{{content}}</li>"

用于传参


全局组件Vue.component

TodoItem 对应 todo-item



方法2 局部组件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">
    	<!-- v-model的数据与data中的同名数据进行双向绑定 这里发生改变的同时,data里的同名数据也会变化 -->
    	<input type="text" name="todo" v-model="inputValue">
    	<!-- v-on:click绑定敲击事件 对应到methods同名方法 -->
    	<button v-on:click="handleBtnClick">提交</button>
    	<ul>
    		<!-- <li v-for="item in list">{{item}}</li> -->
    		<!-- v-bind:content 传参数 与 props对应 -->
    		<todo-item v-bind:content="item" v-for="item in list"></todo-item>
    	</ul>
    </div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    	/*
    	//创建全局组件的方法 TodoItem 对应 todo-item
    	Vue.component("TodoItem",{
    		props: ['content'],
    		template: "<li>{{content}}</li>"
    	});
		*/

		//方法2 局部组件
		var TodoItem = {
    		props: ['content'],
    		template: "<li>{{content}}</li>"
		}
    	var app = new Vue({
    		el: "#app",
    		//局部组件必须再此注册才能正常使用
    		components: {TodoItem: TodoItem},
    		data: {
    			list: [],
    			inputValue: ''
    		},
    		methods: {
    			handleBtnClick: function(){
    				this.list.push(this.inputValue);
    				this.inputValue = '';
    			}
    		}
    	});
    </script>
</body>
</html>


第二章最终TODOLIST 包含子、父组件,相互传参数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VUE 起步</title>
</head>
<body>
    <div id="app">
    	<!-- v-model的数据与data中的同名数据进行双向绑定 这里发生改变的同时,data里的同名数据也会变化 -->
    	<input type="text" name="todo" v-model="inputValue">
    	<!--
    		v-on:click绑定敲击事件 对应到methods同名方法 
    		@click 等价于 v-on:click
    		另一种缩写是
    		:href 等价于 v-bind:href
    	-->
    	<button @click="handleBtnClick">提交</button>
    	<ul>
    		<!-- <li v-for="item in list">{{item}}</li> -->
    		<!-- v-bind:content 传参数 与 props对应 -->
    		<todo-item v-bind:content="item" v-for="(item, index) in list" v-bind:index="index" @delete="handleItemDelete"></todo-item>
    	</ul>
    </div>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script type="text/javascript">
    	/*
    	//创建全局组件的方法 TodoItem 对应 todo-item
    	Vue.component("TodoItem",{
    		props: ['content'],
    		template: "<li>{{content}}</li>"
    	});
		*/

		//方法2 局部组件
		var TodoItem = {
    		props: ['content', 'index'],
    		template: "<li @click='handleItemClick'>{{content}}</li>",
    		methods: {
    			handleItemClick: function() {
    				//绑定事件delete 与 父组件对应
    				this.$emit("delete", this.index);
    			}
    		}
		}
    	var app = new Vue({
    		el: "#app",
    		//局部组件必须再此注册才能正常使用
    		components: {TodoItem: TodoItem},
    		data: {
    			list: [],
    			inputValue: ''
    		},
    		methods: {
    			handleBtnClick: function() {
    				this.list.push(this.inputValue);
    				this.inputValue = '';
    			},
    			//与 @delete="handleItemDelete" 对应
    			handleItemDelete: function(index) {
    				this.list.splice(index, 1);
    			}
    		}
    	});
    </script>
</body>
</html>





赠人玫瑰 手留余香
centos 7.4 从零部署服务器环境
论文正文思路和素材
立即登录, 发表评论.
没有帐号? 立即注册
0 条评论