MV*模型及部分vue

时间 2019-11-11

标签模型部分 vue 繁體版

原文原文链接

vue是什么？javascript

Vue.js（读音 /vjuː/, 相似于 view）是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 css

为何用VUE？html

1.性能更好vue

虚拟了dom的操做，操做dom是很是耗费性能的一件事情 jquery就是专门操做dom的
操做dom会致使重绘和重排
2.视图、数据分离java

Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。
jquery

3.兼容性较好npm

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上。

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>