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上。
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> 相关推荐
书虫媛 2020-07-08
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04