10.vue框架
vue框架
易用、灵活、高效
mvc
M model 数据 模型
V view 视图 dom操作
C controller 控制器 路由
C
oBtn.onclick = function(){
$.ajax(...
success:function(data){//data M
//DOM操作 V
}
);
}
mvc mvvm mvp mv*
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
指令
v-开头的自定义属性
v-model 数据
v-text 纯文本 简写 {{数据}}
v-html 会转义html标签
exp：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#div1", //选择器
data:{
a:"abc" //定义
}
});
};
</script>
</head>
<body>
<div id="div1">
<input v-model="a" type="text" value=""/><br />
<span v-text="a"></span> <br />
<span v-html="a"></span> <br />
{{a}}
</div>
</body>
</html>
v-text/{{}}区别
{{}} 如果使用过程中出现错误，会显示花括号， v-text不会显
想要不想显示{{}}
1、把所有的{{}}——> v-text 不推荐
2、v-cloak 需要和样式进行配合
外层div设置[v-cloak]{display:none;}
网络延迟的问题也会显示 {{}}
如果在使用vue的过程中没有出现错误，vue会把v-cloak给删除
推荐用花括号 {{xxx}}
v-bind 操纵属性
注意： el不能选择body或者html
v-bind:
属性名称="值" 简写 :属性名称="值"
跟对象:v-bind="对象"
data:{
a:"width:200px; heigth:200px;background:red"
}
v-bind:style="a"
v-bind:style="'width:200px; heigth:200px;background:red'"
json
v-bind:style="{width:'200px', heigth:'200px',;background:'red'}"
数组
data:{
width:{width:"200px"},
heigth:{heigth:"200px"},
background:{background:"200px"},
}
v-bind:style="[width,height,background]"
class
data:{
a:"box1 box2 box3"
}
v-bind:class="a"
v-bind:class="'box1 box2 box3'"
json: 必须跟布尔值
data:{
box1:true,
box2:false,
box3:"dsafsa"
}
v-bind:class="{box1:box1,box2:box2,box3:box3}"
数组,元素是变量名
data:{
box1:"box1",
box2:"box2",
box3:"abc"
}
v-bind:class="[box1,box2,box3]"
方法：
methods:{
方法名(){
}
}
事件：
v-on:click="方法名" 简写 @click="方法名"
显示隐藏:
v-show: 控制的是style:none/block
v-if: 控制的真实dom节点的创建和删除
v-if 条件判断
v-if
v-else-if
v-else
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="a==1">1</span>
<span v-else-if="a==2">2</span>
<span v-else>其他</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
a:1
}
});
</script>
</body>
</html>
循环：v-for/v-of
数组
v-for="item in arr"
v-for="(v,k) in arr"
v-for="v,k in arr"
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
<script>
/*
for in
for of
*/
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
arr:["aaa","bbb","ccc"]
}
});
};
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<ul>
<li v-for="item of arr">{{item}}</li>
</ul>
</div>
</body>
</html>
res:
对象
v-for="item in json"
v-for="(v,k,i) in json"
v-for="v,k,i in json"
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{width:200px; height:200px; background:#ccc;}
</style>
<script src="vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
/*
for in
for of
*/
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{
json:{
name:"翠花",
age:18,
sex:0
}
}
});
};
</script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
<ul>
<li v-for="v,k,i of json">{{v}}----{{k}}----{{i}}</li>
</ul>
</div>
</body>
</html>
res:
数据更新
数组
arr.push/pop/shift/unshift/splice....
直接操纵索引 无效 vm.arr[index] = xxxx;
vm.$set(vm.arr/json,index/key,value);
Vue.set(vm.arr/json,index/key,value);
vm.arr[index] = xxxx; 无效
强制更新:
vm.$forceUpdate();
对象
必须先定义 再修改！
事件对象
@click="函数名" 事件函数的第一个参数就是事件对象ev
@click="函数名($event)" 在函数里面可以直接使用ev
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(ev){
alert(ev.clientX);
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show($event)" type="button" value="按钮" />
</div>
</body>
</html>
原生
onclick="show(event)"
冒泡：
子元素的事件可以传播到父元素上，最终传播到document
var oEvent = ev || event;
oEvent.cancelBubble = true;
oEvent.stopPropagation();
vue阻止事件冒泡:
@click.stop="btn"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
div(){
alert("div");
},
btn(){
//var oEvent = ev || event;
//oEvent.cancelBubble = true;
//oEvent.stopPropagation();
alert("btn");
}
}
});
};
</script>
</head>
<body>
<div id="app">
<div id="div1" @click="div" >
div1
<input @click.stop="btn" type="button" value="按钮" />
</div>
</div>
</body>
</html>
默认事件
浏览器自带的行为就是默认事件
原生:
ev.preventDefault();
//return false;
vue:
(原生和.prevent都可以)
@click.prevent="show"
vue阻止默认事件:
@click.prevent="show"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(ev){
alert(1);
//ev.preventDefault();
//return false;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<!--vue阻止默认事件-->
<a @click.prevent="show" href="http://www.baidu.com/">百度</a>
</div>
</body>
</html>
事件修饰符：
https://cn.vuejs.org/v2/guide/events.html
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.config.keyCodes.enter = 37;将将回车设成37
window.onload = function(){
var vm = new Vue({
el:"#app",
data:{},
methods:{
left(){
alert("left");
},
right(){
alert("right");
}
}
});
};
</script>
</head>
<body>
<div id="app">
<!--
@click.left鼠标左键,
@click.right鼠标右键,
@click.right.prevent阻止右键默认事件
-->
<input @click.left="left" type="button" value="left" />
<input @click.right.prevent="right" type="button" value="right" />
</div>
</body>
</html>
模板：template
模板里面只能有一个根节点，不能有兄弟节点
new Vue({
template:" 选择器"、oTmp
});
<div id="tmp" style="display:none">
模板内容
</div>
<template id="tmp" >
模板内容
</template>
type="text/x-template"
type="x-template"
<script id="tmp" type="text/x-template" >
模板内容
</script>
生命周期 【created/mounted】/updated/destroyed
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
8 个函数
1、初始化
vm.beforeCreate 没有 $el/$data
vm.created 没有 $el 有 $data
2、挂载
vm.beforeMount 有 $el 原始dom 有 $data
vm.mounted 有 $el 虚拟dom 有 $data
3、数据更新
vm.beforeUpdate
vm.updated
4、销毁
vm.beforeDestroy
vm.destroyed
生命周期图示
下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm = new Vue({
//el:"#app",
data:{a:12,b:5},
template:`<span> {{a}}---{{b}}</span>`,
beforeCreate(){// undefined undefined
console.log("beforeCreate",this.$el,this.$data);
},
created(){//undefined {数据}
console.log("created",this.$el,this.$data);
},
beforeMount(){ //原始dom {数据}
console.log("beforeMount",this.$el,this.$data);
},
mounted(){//虚拟dom {数据}
console.log("mounted",this.$el,this.$data);
},
//vm.a = xxxx;
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
////vm.$destroy();
beforeDestroy(){
console.log("beforeDestroy");
},
destroyed(){
console.log("destroyed");
},
});
vm.$mount("#app");
</script>
</body>
</html>
10.vue框架的更多相关文章
- 使用vue框架运行npm run dev 时报错解决
使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- 前端vue框架 脚手架
1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...
- Vue 框架-10-搭建脚手架 CLI
Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中,而不是浏览器 实现页面自动 ...
- Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...
- 实践开发：vue框架重点知识分析
一个VUE项目的主树: assets文件夹是放静态资源: components是放组件: router是定义路由相关的配置; view视图: app.vue是一个应用主组件: main.js是入口文件 ...
- Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)
Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...
- VUE框架概括+模块语法使用（上）
vue是什么 官网(https://cn.vuejs.org/) Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计: Vue 的核心库只关注视图 ...
- Vue框架的介绍及使用
Vue框架 定义:渐进式 JavaScript 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...
随机推荐
- HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性、非功能性、关键约束)-下篇
一.开篇 上一篇<HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性.非功能性.关键约束)-上篇>我们详细分析了在架构分析过程中我们需要注意的内容,架构过程的方法论及 ...
- SSE图像算法优化系列二十二：优化龚元浩博士的曲率滤波算法，达到约1000 MPixels/Sec的单次迭代速度
2015年龚博士的曲率滤波算法刚出来的时候,在图像处理界也曾引起不小的轰动,特别是其所说的算法的简洁性,以及算法的效果.执行效率等方面较其他算法均有一定的优势,我在该算法刚出来时也曾经有关注,不过 ...
- Chrome 开发者控制台中，你可能意想不到的功能
Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...
- dubbo请求报文实例
dubbo请求报文实例: ============================================= Request [ id=6723668, // 消息ID,Long类型 vers ...
- Linux 搭建git 自己拉取本地 git pull，其他地方的git仓库拉取代码
Linux 下建立 Git 与 GitHub 的连接 Git 是一款开源的分布式版本控制系统,而 GitHub 是依托 Git 的代码托管平台. GitHub 利用 Git 极其强大的克隆和分支功能, ...
- redmine在linux上的mysql性能优化方法与问题排查方案
iredmine的linux服务器mysql性能优化方法与问题排查方案 问题定位: 客户端工具: 1. 浏览器inspect-tool的network timing工具分析 2. 浏览 ...
- npm安装教程
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
- 15.翻译系列：EF 6中的级联删除【EF 6 Code-First 系列】
原文链接:https://www.entityframeworktutorial.net/code-first/cascade-delete-in-code-first.aspx EF 6 Code- ...
- Apache Spark as a Compiler: Joining a Billion Rows per Second on a Laptop（中英双语）
文章标题 Apache Spark as a Compiler: Joining a Billion Rows per Second on a Laptop Deep dive into the ne ...
- Django Http请求生命周期
day54 请求响应Http 1.发送Http请求 2.服务器接收,根据请求头中的的url在路由关系表中进行匹配(从上到下) 3.匹配成功后,执行指定的views函数 4.业务处理 URL----&g ...