vue--先决篇
一、vue介绍：
vue是一个渐进式Javascript框架。 渐进式：即有一个核心库，在需要的时候，在逐渐添加插件的一种概念。
（1）MVVM和MVC模式：
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。
它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，
当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，
而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
MVVM实现原理图解
MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。
‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑
二、特点：
易用、 灵活--不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。 高效--20KB min+gzip运行大小，超快的虚拟DOM，最省心的优化。
三、使用：
a: 直接使用script标签引入；vue将会被注册成一个全局变量，在开发环境下不要使用压缩版本，
不然你就失去了所有常见错误相关的警告!
b: 文本的插入，使用差值表达式插入，Vue中差值表达式，既可以插入任何数据，也可以插入算数运算符；{{ }}
四、指令
a: v-for （循环）
当然还可以遍历下标： <li v-for="(item，index) in attr">{{item}}--{{index}}</li>
b: v-bind （绑定元素）
c: v-on （事件）
d:事件对象（$event）
（1）传e
<body>
<div id="app">
<button @click='fn'>点击</button> //fn 不传递任何参数，
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{ },
methods:{
fn(e){
console.log(e) //MouseEvent {isTrusted: true, screenX: 33, screenY: 124, clientX: 33, clientY: 22, …} 打印事件对象！
}
}
})
</script>
（2）实参传入数值，形参传入e
<div id="app">
<button @click='fn(12,13)'>点击</button>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{ },
methods:{
fn(e,b){
console.log(e,b) //12,13
}
}
})
</script>
（3）实参为数值和 $event ------$event 代表事件对象，多个参数；
<div id="app">
<button @click='fn(12,13,$event)'>点击</button>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{ },
methods:{
fn(a,b,e){
console.log(a,b,e) //12 13 MouseEvent {isTrusted: true, screenX: 36, screenY: 128, clientX: 36, clientY: 25, …}
}
}
})
</script>
e: v-if /v-else-if /v-else （判断）
<div id="app">
<div v-if='onOff'>真的我是</div>
<div v-if='onOff'>我是不真不假</div> //等同于v-if-else；
<div v-else>假的我是</div>
</div> <script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
onOff:true, //如果改成false，显示假的是我
},
})
</script>
f: v-show / v-hide (显示和隐藏) 类似于原生的display：block /none；
<div id="app">
<div v-if='onOff'>真的我是</div>
<div v-else>假的我是</div> <!-- v-show和v-hide -->
<div v-show='onOff'>我是show</div>
<div v-show='!onOff'>我隐藏了</div>
</div> <script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
onOff:true, //如果改成false，显示假的是我
},
})
</script>
区别于v-if和v-else ；
可以清晰的看出，v-show和v-hide只是隐藏了当前的元素显示，而v-if和v-else直接否定了元素的加载！
g: v-model（双向数据绑定）----MVVM的一种语法糖
<body>
<div id="app">
<input type="text" v-model='num'>
<p>{{num}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
num:0,
}
})
</script> 当input的value发生变化时，p里面的值也会随之发生变化。
h:事件冒泡
<body>
<div id="app">
<div @click='fn1'>
<button @click='fn'>点你妹啊</button> //是嵌套关系哦
</div> </div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你妹的',
},
methods: {
fn() {
alert('你妹妹的')
},
fn1() {
alert('果然可以冒泡')
}
}
})
</script>
i: 阻止事件冒泡------（.stop修饰符）
<body>
<div id="app">
<div @click='fn1'>
<button @click.stop='fn'>点你妹啊</button> //只需加 .stop 修饰符即可
</div> </div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你妹的',
},
methods: {
fn() {
alert('你妹妹的')
},
fn1() {
alert('果然可以冒泡')
}
}
})
</script>
g:阻止浏览器以及form表单的默认行为 （.prevent修饰符）
<body>
<div id="app">
<form action="./index.html" method="GET">
<input @click.prevent='submit' type="submit" value="提交"> //只需加 .prevent 修饰符即可
</form> </div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你妹的',
},
methods: {
submit(){
alert('要想过此路，留下买路财')
}
}
})
</script>
vue--先决篇的更多相关文章
- Vue进阶篇
前引 今天是2018年12月30,虽不是2018年的最后一天,但是却是自己在2018年写的最后一篇博客了,昨天下班在地铁上闲来无事,翻起了关注的一些公众号发的技术博文,里面就提到写博客的重要性,其实这 ...
- Vue 基础篇
Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- vue 复习篇. 注册全局组件,和 组件库
初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...
- vue基础篇---路由的实现《2》
现在我们来实现这样一个功能: 一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换: 编写父组件 index.html <div id="app"> <s ...
- vue基础篇---vue组件《2》
定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <coun ...
- vue基础篇---watch监听
watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-m ...
- Vue 指令篇 案例(输入提交显示 提交数据_列表)
一.文本操作指令 //1.v-text <p v-text="msg"></p> 等价于 <p>{{msg}}</p> //2.v- ...
- vue基础篇---生命周期
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...
随机推荐
- Windows及MAC 安装Python3.7.4
Windows没有Python环境,Mac自带Python 2,所以开发者需要下载Python 3进行开发相关工作,此文章介绍如何安装Python,Mac安装前可以在终端数输入python查看自带版本 ...
- pychrm和linux进行链接上传代码
众享周知:现在在windows文件中我们有pycharm工具帮我们去编辑python脚本,这会省去我们大把的时间让我们进行更多的脚本编辑.有这样的一种方法,我们可以使用pycharm编辑的脚本上传到l ...
- HDFS学习笔记二
文章来源于:https://blog.csdn.net/xuejingfu1/article/details/52554174 文件写入staging(分阶段进行) 一个客户端的创建文件的请求并不直接 ...
- python 读取文件时，精确的保留数据
import numpy as npimport pandas as pd point = pd.read_csv('waypoint21.csv') with pd.option_context(' ...
- mysql查询表的创建时间
mysql查询表的创建时间 查询语句: SELECT table_name,create_time FROM information_schema.TABLES;
- MySQL-常用引擎
来自:https://www.cnblogs.com/xujishou/p/6343431.html :https://www.cnblogs.com/laowenBlog/p/8405614.htm ...
- Java中"String.equals()“和"=="的区别
Do NOT use the `==`` operator to test whether two strings are equal! It only determines whether or n ...
- InnoDB事务之redo log工作原理
Reference:https://time.geekbang.org/column/article/121710 InnoDB是一个事务性的存储引擎,而InnoDB的事务实现是基于事务日志redo ...
- C# ArrayList、HashSet、HashTable、List、Dictionary的区别
在C#中,数组由于是固定长度的,所以常常不能满足我们开发的需求. 由于这种限制不方便,所以出现了ArrayList. ArrayList.List<T> ArrayList是可变长数组,你 ...
- jsp标签的介绍
cankao:http://www.cnblogs.com/xdp-gacl/p/3788369.html jsp常用的标签有以下3个 1.<jsp:include>标签 2.<js ...