vue框架

易用、灵活、高效

https://cn.vuejs.org/

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框架的更多相关文章

  1. 使用vue框架运行npm run dev 时报错解决

    使用使用vue框架运行npm run dev 时报错 如下: 原因: localhost:8080 有可能其他软件占用了,导致其他问题的出现 我们可以动态修改地址 解决: 进入项目文件的config文 ...

  2. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  3. 前端vue框架 脚手架

    1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...

  4. Vue 框架-10-搭建脚手架 CLI

    Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 脚手架是通过 webpack 搭建的开发环境 使用 ES6 语法 打包和压缩 JS 为一个文件 项目文件在环境中,而不是浏览器 实现页面自动 ...

  5. Vue 框架-02-事件:点击, 双击事件,鼠标移上事件

    Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...

  6. 实践开发:vue框架重点知识分析

    一个VUE项目的主树: assets文件夹是放静态资源: components是放组件: router是定义路由相关的配置; view视图: app.vue是一个应用主组件: main.js是入口文件 ...

  7. 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.数据驱动.双向绑定 ...

  8. VUE框架概括+模块语法使用(上)

    vue是什么 官网(https://cn.vuejs.org/) Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计: Vue 的核心库只关注视图 ...

  9. Vue框架的介绍及使用

    Vue框架 定义:渐进式 JavaScript 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...

随机推荐

  1. ASP.NET微信公众号获取AccessToken

    access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保留512个字符空间.acces ...

  2. xhprof 运行结果名词解释

    Overall Summary Inclusive Time (或子树时间):包括子函数所有执行时间. Exclusive Time/Self Time:函数执行本身花费的时间,不包括子树执行时间. ...

  3. SQLite在.NET中自适应32位/64位系统

    如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...

  4. SpringBoot2.0集成FastDFS

    SpringBoot2.0集成FastDFS 前两篇整体上介绍了通过 Nginx 和 FastDFS 的整合来实现文件服务器.但是,在实际开发中对图片或文件的操作都是通过应用程序来完成的,因此,本篇将 ...

  5. phpStorm中如何不让其自动添加封闭大括号?

    Settings > Editor > General->Smart Keys.

  6. 解析 .Net Core 注入——注册服务

    在学习 Asp.Net Core 的过程中,注入可以说是无处不在,对于 .Net Core 来说,它是独立的一个程序集,没有复杂的依赖项和配置文件,所以对于学习 Asp.Net Core 源码的朋友来 ...

  7. 【C++】C++中类的基本使用

    1.类和成员声明,定义,初始化的基本规则 C++中类的基本模板如下: namespace 空间命名{//可以定义namespace,也可以不定义 class/struct 类名称{ public/pr ...

  8. 网络协议学习(2)---IP地址

    一.IPv4地址 IPv4地址为32bit地址,分为5类(ABCDE,这里不讨论特殊用途的D和E类). 通常我们八位一看,写成4个部分,例如:00000000 00000000 00000000 00 ...

  9. Unity应用架构设计(10)——绕不开的协程和多线程(Part 1)

    在进入本章主题之前,我们必须要了解客户端应用程序都是单线程模型,即只有一个主线程(Main Thread),或者叫做UI线程,即所有的UI控件的创建和操作都是在主线程上完成的.而服务器端应用程序,也就 ...

  10. Django Http请求生命周期

    day54 请求响应Http 1.发送Http请求 2.服务器接收,根据请求头中的的url在路由关系表中进行匹配(从上到下) 3.匹配成功后,执行指定的views函数 4.业务处理 URL----&g ...