MV*模型及部分vue
vue是什么？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
为什么用VUE？
1.性能更好
虚拟了dom的操作，操作dom是非常耗费性能的一件事情 jquery就是专门操作dom的
操作dom会导致重绘和重排
2.视图、数据分离
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
3.兼容性较好
Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
4.其便捷性及易用程度都很好
vue是一个渐进式的框架，vue当成一个插件，库，框架 完整的应用 来使用都是OK的
MVVM是什么?
MVVM是Model-View-ViewModel的简写, 一种新型架构框架。
View一般就是我们平常说的HTML文本的Js模板，里面可以嵌入一些js模板的代码；
ViewModule层里面就是我们对于这个视图区域的一切js可视业务逻辑，举个例子，比如图片走马灯特效，比如表单按钮点击提交，这些自定义事件的注册和处理逻辑都写在ViewModule里面；Model就是对于纯数据的处理，比如增删改查，与后台CGI做交互；
MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。
MVVM原理?
vue采用数据劫持配合订阅者和发布者模式的方式 ,
通过 Object.defineProperty 的setter 和 getter 对数据进行劫持 ,
在数据变化时, 发布消息给依赖器 Dep(订阅者), 去通知观察者Watcher 做出对应的回调函数 , 进行视图更新
MVVM 作为绑定入口 , 整合Observer , Compile 和Watcher 三者 , Observer来监听model数据变化 ,
Compile来解析编译模板指令 , 最终利用Watcher 搭建起 Compile , Observer , Watcher 之间的通信桥梁 ,
达到数据 变化=> 视图更新 /; 视图交互变化 => 数据model变更的双向绑定效果
VUE基本用法
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式用 {{}} -->
<!-- 使用数据的时候，需要先放在data中，数据要先存入，才能实现数据绑定 -->
{{ name }}
<!-- 原始数据的值可以直接发生改变 -->
<!-- 数组 -->
<!-- 通过索引的方式改变数组，不能渲染到视图 -->
<!-- 通过length属性修改也是不能渲染到视图 -->
<!-- 可以通过数组的push,pop,shift,unshift,sort,reverse,splice这些操作数组可以渲染 -->
{{arr}}
<!-- 对象 -->
{{obj}}
<!-- 可以通过对象打点的形式修改，可以渲染视图 -->
<!-- 对象打点的形式增加属性，不能渲染视图 -->
<!-- 对象重新赋值（更改地址）以后可以渲染视图，可以使用ES6中的...运算符 -->
<!-- vm.$set(vm.obj,'abc',2000) 增加属性,渲染视图 -->
<!-- vm.$el() 指代被渲染的dom元素 -->
<!-- vm.$nextTick(function(){}) 最后一次渲染完成以后执行的函数 -->
<!-- vm.$mount() 可以取代vue实例中的el属性，渲染的dom元素 -->
</div>
<script>
const vm = new Vue({
// el : "#app",
data : {
name : "psh",
arr : [1,2,3],
obj : {
a : 10,
b : 20
}
}
})
vm.$mount("#app");
console.log(vm.$el.innerText);
vm.name = "yinlaoshi";
console.log(vm.$el.innerText);
vm.name = "wanglaoshi"
vm.$nextTick(() => {
console.log(vm.$el.innerText);
})
</script>
</body>
</html>
vue-指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <!-- 1.v-pre 跳过该元素和它的子元素的渲染过程，直接显示内容 --> <div v-pre> {{ name }} <div>{{ name }}</div> </div> <!-- 2. v-cloak 可以配合着css的使用，让第一次加载的时候不显示(隐藏未编译的{{}}标签) --> <div>{{ name }}</div> <!-- 3. v-once 只会去进行一次渲染，随后的重新渲染，当数据改变时，这里的数据不会改变,元素/组件及所有的子节点全部都会认为是静态的，忽略并跳过，进行了vue的内部的缓存，所有的值全都是从缓存中拿过来 --> <div v-once>{{name}}</div> <!-- 4. v-html innerHTML 用到的比较少，XSS攻击 和插值表达式的区别，v-html是把标签里面的内容全部替换 --> <div v-html="dom">今天天气很好</div> <div>{{ dom }}今天天气很好</div> <!-- 5. v-text 相当于innerText --> <!-- 6. v-if 判断元素是否存在 --> <!-- 7. v-else --> <!-- 8. v-else-if --> <!-- <div v-if="flag">hello</div> --> <!-- template是可以减少渲染次数的 --> <template v-if="!flag"> <p>hello</p> <span>world</span> </template> <!-- <div>---</div> --> <template v-else> <p>hello1</p> <span>world2</span> </template> <!-- 9.v-show --> <div v-show="!flag">hello world</div> <template v-show="!flag"> <div>hello world</div> </template>
<button @click="flag=!flag">点击我</button> <!-- v-if和v-show的区别 1.v-if是直接移出dom节点，v-show是通过控制display属性 2.v-if支持template标签 v-show不支持template标签 --> </div> <script> const vm = new Vue({ el : "#app", data : { name : "wxy", age : 18, dom : "<h1>hello world</h1>", flag : true } }) setInterval( () => { vm.flag = !vm.flag; },500) </script> </body> </html>
vue-指令补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令</title>
<script src="public/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="example">
<!-- 循环 -->
<ul>
<li v-for="tmp in list">
{{tmp}}
</li>
</ul>
<ul>
<li v-for="(value,key) in list">
{{"key is " + key + " value is " + value}}
</li>
</ul>
<!-- 选择/判断 -->
<button v-if="hasMore">加载更多</button> <!-- 为true的时候显示，为false的时候隐藏 -->
<p v-if="!hasMore">对不起，没有更多数据可以加载了</p>
<!-- 判断分支结构 -->
<p v-if = "answer == 0">答案是0</p>
<p v-else-if = "answer == 1">答案是1</p>
<p v-else-if = "answer == 2">答案是2</p>
<!-- v-text v-html v-show -->
<p v-text = "myHtml">this is a container</p>
<p v-html = "myHtml">this is a container</p>
<p v-show = "hasMore">this is a container</p>
<!-- 将urlName的内容绑定到a的href中 -->
<a v-bind:href = "urlName">走，去百度</a> <!-- 相似的还有img中的src -->
<a :href = "urlName">走，去百度</a>
<!-- 按钮绑定处理函数 -->
<button v-on:click = "clickMe">点我试试</button>
<button @click = "clickMe()">再点我试试</button>
<input type="text" @input = 'inpchange'>
</div>
<script>
new Vue({
el : '#example',
data : {
list : [100,200,300],
hasMore : false,
answer : 2,
myHtml : '<h1>这是一个被替换的文本</h1>',
urlName : 'http://www.baidu.com'
},
methods : {
clickMe : function(){
console.log('叫你点你就点呀');
},
inpchange : function(){
console.log(event);
console.log(event.target.value);
}
}
})
</script>
</body>
</html>
