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 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...
随机推荐
- SharePoint PowerShell 修改母版页
前言 最近在群里帮忙回答问题,碰到这么一个尴尬的问题,有人创建了一个新母版页,然后引用了新的母版页,不知道怎么的母版页有问题了,再也进不去站点了,希望修改回旧的母版页. 看到问题,想了一下,其实两种方 ...
- Git远程仓库地址变更本地如何修改
以项目test为例: 老地址:http://192.168.1.1:9797/john/test.git 新地址:http://git.xxx.xxx/john/test.git 远程仓库名称: or ...
- ubuntu install google-chrome-stable
google-chrome-stable is available on a 3rd Party Repository: Google Chrome (for Stable). Follow the ...
- iOS实现 webView loadHTMLString加载外部css、js样式
记录一下. webview(或wk)用 loadHTMLString加载内容时 ,如果只是单纯的html内容,样式等都写在内部,直接设置baseURL为nil即可. 不过当html里包含外部样式或调用 ...
- [k8s]debug模式启动集群&k8s常见报错集合(on the fly)
debug模式启动-支持sa 集群内(pod访问api)使用443加密 no1 no2 安装flanneld kubelet/kube-proxy m1 安装etcd/ api/contruller/ ...
- vue及ElementUI环境搭建
1. nodejs安装及npm安装 下载地址:https://nodejs.org/en/download/ 选择windows Installer 下载完成后 运行node-v8.11.1-x64. ...
- 强化学习-时序差分算法（TD）和SARAS法
1. 前言 我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- halcon应用案例探究
14.1 Access 1. get_region_chain 功能:一个对象的轮廓(contour)作为链式码. 2. get_region_contour 功能:查询一个目标的轮廓(contou ...
- java 中 热部署与卸载关系
今天发现早年在大象笔记中写的一篇笔记,之前放在ijavaboy上的,现在它已经访问不了了.前几天又有同事在讨论这个问题.这里拿来分享一下. 在web应用开发或者游戏服务器开发的过程中,我们时时刻刻都在 ...