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>

 

posted @ 2019-11-06 11:50  混名汪小星  阅读(378)  评论(0)    收藏  举报