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 实例已经创建完成之 ...
随机推荐
- poj1285 Combinations, Once Again（泛化背包）
题目传送门 Combinations, Once Again Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1897 A ...
- SSL连接出现的问题
客户端向服务器发送数据时,份两种情况,SSL单向验证和SSL双向验证 1.SSL单向验证时 代码如下: import java.io.IOException; import java.util.Has ...
- Razor 保存动态表格
本文转载自 ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html 内容根据评论内容中的方式有所调整 在ASP.NET MVC ...
- 2019HDU多校训练第二场 Longest Subarray
题意:给你一个串,问满足以下条件的子串中最长的是多长:对于每个数字,要么在这个子串没出现过,要么出现次数超过k次. 思路:对于这类问题,常常转化为数据结构的询问问题.我们考虑枚举右端点,对于当前右端点 ...
- vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...
- 容器和Docker
一.容器 1.虚拟机和容器的区别 (1)为什么要用docker 服务器端开发/部署: 实现更轻量级的虚拟化,方便快速部署, 对于部署来说可以极大的减少部署的时间成本和人力成本 Docker支持将应用打 ...
- poj 1144 割点模板题
题目大意: 求割点: 基本思路: tarjan算法,套板子 代码如下: #include<iostream> #include<string> #include<vect ...
- 20.ReenterLock重入锁
import java.util.concurrent.locks.ReentrantLock; /** * 重入锁 ReenterLock 一个线程允许连续获得同一把锁,注意:必须释放相同次数,释放 ...
- JavaSE---System类
1.概述 1.1 System类 代表当前java程序的运行平台: 1.2 System类 提供的类方法: getenv():获取系统所有的环境变量: getenv(String name):获取 ...
- Ubuntu更新完NVIDIA驱动后，重启电脑进入不了系统，一直处于登录界面
如题描述,我的系统是Ubuntu16.04,安装caffe的过程将一些驱动更新了,后来重启电脑时发现我进入不了系统了,输入我的登录密码会发现屏幕一闪,然后又重新跳回到登录界面,就是进入了login l ...