vue 前端框架
什么是vue.js
1.vue是目前最火的一个前端框架,react 是最流行的前端框架(react除了开发网站,还可以开发手机APP,vue语法也是可以进行手机app开发的,需要借助于weex)
2.vue.js 是前端的主流框架之一,和angular.js react.js 一起 并成为前端三大主流框架
3.vue.js是一套构建用户界面的框架,值关注视图层,不仅易于上手,还可便于第三方库或既有项目整合.(vue有配套的第三方库,可以整合起来做带向项目的开发)
4.前端的主要工作?主要负责MVC 的v这一层 主要工作就是和界面交道
为什么要学习流行框架
企业为了提高开发效率,在企业中,事件就是效率,效率就是金钱
提高开发的发展历程,原生js -> jquery类的类库 -> 前端模板引擎 -> angular/vue/
在vue中,一个核心的概念,就是让用户不在操作DOM操作元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑
增强自己就业时候的竞争力
框架和库 的却别:
框架:是一台完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目
node 中的 express
库(插件):提供某一个小功能,对项目的侵入性小,如果某个库完成某些需求,可以很容易切换到其他库的实现要求.
node(后端) 中的MVC 与 前端 MVVM 之间的区别:
MVC (后端概念)
MVVM 前端概念:
小结:
vue 第一话: 实例化 vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue firstone</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data:{
msg:'hello world!',
},
})
</script>
</body>
</html>
需要引入vue.js
vue第二话: v-cloak v-text v-html v-on v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 文件显示以及解决闪烁问题 cloak/text/html的应用方式 -->
<p v-cloak>00000{{ msg }}0000</p>
<h3 v-text="msg">00000000</h3>
<p v-text="msg"></p>
<p v-html="msg"></p>
<!-- -------------------------------- -->
<!-- 事件绑定 v-bind 绑定js表达式-->
<p>
<input type="button" value="按钮" v-bind:title="msg2" />
<input type="button" value="按钮" v-bind:title="msg2 + '添加字符'" />
<input type="button" value="按钮" :title="msg2 + '简写方式!'" />
</p>
<!-- 事件绑定v-on 绑定methods 事件-->
<p>
<input type="button" value="v-on绑定methods" v-on:click="show" />
<input type="button" value="v-on绑定methods 简写方式" @click="show" />
<input type="button" value="v-on绑定methods 其他事件" v-on:mouseover="show" />
</p>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>hello</h1>',
msg2:'(v-bind属性!)this button!'
},
methods:{
show:function(){
alert("OK")
},
}
})
</script>
</body>
</html>
vue第三话: 跑马灯练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="启动" @click="start" />
<input type="button" value="停止"@click="stop" />
<input type="text" :value="info" /> <h1>{{ info }}</h1>
</div> <script>
var vm = new Vue({
el:'#app',
data:{
info:'hello world !',
Intervalid:null, },
methods:{
start(){
// var _this = this
// setInterval(function(){
// // console.log(this.info)
// var start0 = _this.info.substring(0,1)
// var end0 = _this.info.substring(1)
// _this.info = end0 + start0
// },400) // => 说明函数体外部的this 参数 传递至函数体内部!
if(this.Intervalid != null) return;
this.Intervalid = setInterval( () => {
// console.log(this.info)
var start0 = this.info.substring(0,1)
var end0 = this.info.substring(1)
this.info = end0 + start0
},400) },
stop(){
clearInterval(this.Intervalid);
this.Intervalid = null;
},
}
}) </script>
</body>
</html>
vue第四话 v-on 事件修饰符
.stop 阻止冒泡
.prevent 阻止默认时间
.capture 添加时间侦听器使用事件模式
.self 只当前事件在该元素本身(比如不是子元素)触发时触发回调
.once 事件只触发一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script></script>
<script src="vue.js"></script>
<style>
.inner{
height: 200px;
width: 200px;
background-color: aqua;
}
.inner2{
height: 200px;
width: 200px;
background-color: firebrick;
}
.inner3{
height: 200px;
width: 200px;
background-color:greenyellow;
}
.inner4{
height: 200px;
width: 200px;
background-color:gray;
}
</style>
</head>
<body>
<div id="app">
<!-- 此时点击按钮,同时也会触发div的点击事件. -->
<div class="inner" @click="div0">
<input type="button" value="点击" @click="inp0"/>
<!-- .stop -->
<input type="button" value="点击(.stop)" @click.stop="inp0"/>
<!-- .prevent 阻止默认行为 -->
<p><a href="http://www.baidu.com" @click.prevent="bdclick">百度链接</a></p>
</div> <!-- .capture 捕获机制-->
<div class="inner2" @click.capture="div0">
<input type="button" value="点击" @click="inp0"/>
</div>
<!-- .self 点击当前元素时触发-->
<div class="inner3" @click.self="div0">
<input type="button" value="点击" @click.self="inp0"/>
</div>
<!-- .once只触发一次 -->
<div class="inner4" @click.once="div0">
<input type="button" value="点击" @click.once="inp0"/>
</div> <!-- 方法之间可以相互叠加调用! -->
<!--
.self .stop 区别:
.self只阻止 自己元素上的冒泡,并不阻止自己外层的元素冒泡
.stop阻止除自已以外的其他元素冒泡
-->
</div> <script>
var ve = new Vue({
el:'#app',
data:{
},
methods:{
div0(){
console.log('this div0!')
},
inp0(){
console.log("this inp0!")
},
bdclick(){
console.log('baidu 链接事件!')
}
},
})
</script> </body>
</html>
vue 第五话 双向数据绑定 v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--
使用v-model 可以是先,表单元素和model中数据的双向书绑定
但是注意!
v-model 只能运用在 表单元素中
-->
<input type="text" v-model="msg" />
<h3>{{ msg }}</h3>
</div> <script>
var ve = new Vue({
el:'#app',
data:{
msg:'hello world ! '
},
methods:{ },
}) </script> </body>
</html>
vue第6话 简易计算器练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script></script>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1" />
<select v-model="opt">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="num2" />
<input type="button" value="=" @click='jisuan' />
<input type="text" v-model="result" />
</div> <script>
var ve = new Vue({
el:'#app',
data:{
num1:0,
opt:'+',
num2:0,
result:0,
},
methods:{
jisuan(){
// switch(this.opt){
// case '+':
// this.result = parseInt(this.num1) + parseInt(this.num2)
// break;
// case '-':
// this.result = parseInt(this.num1) - parseInt(this.num2)
// break;
// case '*':
// this.result = parseInt(this.num1) * parseInt(this.num2)
// break;
// case '/':
// this.result = parseInt(this.num1) / parseInt(this.num2)
// break;
// } this.result = eval(this.num1 + this.opt + this.num2) },
},
}) </script> </body>
</html>
vue 第七话 样式选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style>
.st1{
width: 200px;
height: 200px;
}
.st2{
background-color: #ADFF2F;
}
.active{
display: none;
} </style> </head>
<body>
<div id="app">
<input type="button" value="显示" @click='a'/>
<input type="button" value="隐藏" @click='b' /> <p><h1 :class="['st1','st2']">aaaaaaaaaaaa !!!</h1></p> <p><h1 :class="['st1','st2',dis?'active':'']">bbbbbbbbbbbb !!!</h1></p> <p><h1 :class="['st1','st2',{'active':dis}]">cccccccccccc !!!</h1></p> <p><h1 :class="{st1:true,st2:true,active:dis}">dddddddddd !!!</h1></p> <p><h1 :class="sobj">EEEEEEEEEEEEE !!!</h1></p> </div> <script>
var vm = new Vue({
el: '#app',
data: {
dis:false,
sobj:{st1:true,st2:true,active:false},
},
methods: {
a(){
this.dis = false
},
b(){
this.dis = true
},
}
})
</script>
</body>
</html>
vue 第八话 内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<h1 :style="{color:'red','font-weight':200}">asdadsada</h1>
<h1 :style="sty1">asdadsada</h1>
<h1 :style="[sty1 , sty2]">asdadsada</h1> </div> <script>
var vm = new Vue({
el: '#app',
data: {
sty1:{color:'green','font-weight':100},
sty2:{'font-style':'italic'},
},
methods: {
}
})
</script>
</body>
</html>
vue 第九话 v-for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<p>{{ list[0] }}</p>
<p>{{ list[1] }}</p>
<p>{{ list }}</p> <!-- 循环列表 -->
<p v-for='i in list'>{{ i }}</p> <!-- 循环列表,以及列表索引 -->
<p v-for='i,index in list'>{{ i }} - {{ index }}</p> <!-- 循环列表对象 -->
<p v-for='i,j in list2'>{{ i.id }} - {{ i.name }} - {{ j }}</p> <!-- 循环对象 -->
<p v-for='i,j,l in user'>{{ i }}- {{ j }} - {{ l }}</p> <!-- 循环数据 -->
<p v-for='count in 15'>{{ count }}</p> </div> <script>
var vm = new Vue({
el: '#app',
data: {
list:[1,2,3,4,5,6,7,8,9],
list2:[
{id:1,name:'a1'},
{id:2,name:'a2'},
{id:3,name:'a3'},
{id:4,name:'a4'},
{id:5,name:'a5'},
{id:6,name:'a6'},
],
user:{
id:1,
name:'alex',
gender:'男',
},
},
methods: {
}
})
</script>
</body>
</html>
vue 第十话 v-for key 值 数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<p>
<label>id </label><input type="text" v-model="id"/>
<label>name</label> <input type="text" v-model="name"/>
<input type="button" value="add" @click="add" />
</p> <label>序号</label> - <label>姓名</label>
<p v-for='i in info' :key='i.id'><input type="checkbox" />{{ i.id }} ------- {{ i.name }}</p> <!--
注意:!!!
v-for 循环的时候 key属性只能使用num 或 str 数据类型绑定
key在使用的时候,必须要使用v-bind属性绑定的形式,指定key的值
在组件中 使用v-for 循环的时候 或者在一些特殊的情况中
如果v-for有问题 必须在使用v-for的是同时指定唯一的字符串/数字 类型:key值
--> </div> <script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
info:[
{id:1,name:'a1'},
{id:2,name:'a2'},
{id:3,name:'a3'},
{id:4,name:'a4'},
{id:5,name:'a5'},
{id:6,name:'a6'},
],
},
methods: {
add(){
// this.info.push({id:this.id,name:this.name})
this.info.unshift({id:this.id,name:this.name})
},
}
})
</script>
</body>
</html>
vue第十一话 v-if 以及 v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script> </head>
<body>
<div id="app">
<input type="button" value="切换" @click="qiehuan"/>
<h3 v-if="flag">v-if 语句</h3>
<h3 v-show="flag">v-show 语句</h3>
</div> <!--
v-if 特点:每次都会重新删除或创建元素
有较高的切换性能消耗
如果元素设计到频繁的切换,最好不要使用v-if而推荐使用v-show v-show 特点:只是切换了元素的display:none的样式
有较高的初始渲染消耗
如果元素可能永远也不会被显示出来被用户看到,则推荐使用
v-if --> <script>
var vm = new Vue({
el: '#app',
data: {
flag:true,
},
methods: {
qiehuan(){
this.flag = !this.flag
}
}
})
</script>
</body>
</html>
vue 前端框架的更多相关文章
- vue 前端框架 目录
vue 前端框架 目录 vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- 开发基于vue前端框架下的系统的UI自动化，记录总结踩的坑
在使用了pytest完成了一个系统的UI自动化后,因为系统的前端框架,是 基于VUE写的,这就让我编写脚本的时候踩了些坑. 无法用JS 修改标签属性,从而进行的操作 比如上传图片,我们的上传是这样子的 ...
- 自动化测试平台（Vue前端框架安装配置）
Vue简介: 通俗的来说Vue是前端框架,用来写html的框架,可轻量级也可不轻量级 Vue特性: 绑定性,响应性,实时性,组件性 安装软件以及控件: 控件库:element-ui node.js ( ...
- Vue前端框架基础+Element的使用
前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
随机推荐
- python基础杂记
一.编码 1.ACSII 0000 0001 8位 一个字节 2. uncoide ...
- 2013年山东省赛F题 Mountain Subsequences
2013年山东省赛F题 Mountain Subsequences先说n^2做法,从第1个,(假设当前是第i个)到第i-1个位置上哪些比第i位的小,那也就意味着a[i]可以接在它后面,f1[i]表示从 ...
- C# web项目利用docx文档作为模板~为打印专做的解决方案
还是那句话:十年河东,十年河西,莫欺少年穷. 目前,web端打印技术有很多,有收费的专业web打印控件,大家可以参考我的上一篇博客.当然,很多公司不愿意出钱,那么今天咱们就探讨下怎么做免费的打印. w ...
- zcu102 hdmi example（一）
1,概述 有一个计划是打算做一个摄像头的驱动与显示. 但是实际上手上只有一个zcu102开发板,没有摄像头,也没有上位机,自己也不会写.所以就将方案阉割成将录制好的视频放在SD卡里面,然后从SD卡里面 ...
- VUE中使用geetest滑动验证码
一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...
- Map的clear与new Map的区别
对于clear与new Map的区别.我们首先来看一个例子,本例子是我在实际开发中遇到的,需求就是讲map放入到list中,说白了就是list转map,有两种实现方式,分别是: // 方案一 Map& ...
- vultr测速 看看vultr哪个地区节点速度快
很多网友用vultr的机子主要就是为了*** 所以对哪个区域节点的速度就非常在意 网上都说这个区域节点速度快,那个区域节点的速度快. 还是得自己亲自测试才知道哪个区域的速度快! 所以做了个ping本机 ...
- 关于Oracle使用管理员账号登录失败的问题
我在本地建的Oracle数据库在调试自己写的存储过程的时候提示缺少 debug connect session 权限,一般情况下根据这个提示直接用管理员账号登录进去,执行 grant debug co ...
- Jetson TX1 install Opencv3
https://jkjung-avt.github.io/opencv3-on-tx2/ 注意:在编译的时候会遇到内存空间不足的情况,可以插入U盘,将程序拷贝到U盘内编译,然后安装到Jetson上.U ...
- MongoDB启动报错 32-bit servers don't have journaling enabled by default. Please use --journal if you want durability. 【转】
之前MongoDB启动的时候是蛮正常的,不知道后来启动报错了,就把粘贴出来查询了.最后才知道是由于自己不正常的关闭导致的这个情况. --摘录:MongoDB非正常关闭后修复记录 mongod没有后台执 ...