Vue 笔记
一、MVVM
MVVM（Model-View-ViewModel）是一种软件设计模式，是一种简化用户界面的事件驱动编程方式。
MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
MVVM设计模式的优势：
- 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
- 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
- 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
- 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
二、Vue实践
1、创建一个HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
2、引入Vue.js
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
12
123
3、创建一个Vue实例
<script type="text/javascript">
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
message:"hello,vue!"
}
});
</script>
说明：
el: '#vue'：绑定元素的IDdata:{message:'Hello Vue!'}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！
4、将数据绑定到页面元素
<!--view层，模板-->
<div id="app">
{{message}}
</div>
三、Vue基础语法指令
基本的语法指令主要有 v-bind，v-if，v-else，v-for， v-on 等等，其中if，else，for等与java相似这里不多描述，v-bind用来绑定元素特性，v-on监听事件，可以绑定到Vue中的methods中的方法事件。以下是v-on指令用法的例子：
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">点我</button>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:'Hello World'
},
methods:{
sayHi:function(event){
//'this'在方法里面指向当前Vue实例
alert(this.message);
}
}
});
</script>
</body>
</html>
另外还有vue的核心v-model实现双向绑定。
四、组件
使用Vue.component()方法注册组件，注意：默认规则下props属性里的值不能为大写格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--组件：传递给组件中的值：props-->
<xuecheng v-for="item in items" v-bind:l="item"></xuecheng>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
//定义组件
Vue.component("xuecheng",{
props:['l'],
template:'<li>{{l}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
items:["java","c++","c#"]
}
});
</script>
</body>
</html>
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
