Vue.js框架的基础指令
Vue.js
渐进式 javascript 框架,可以独立完成前后端分离式web项目的javascript框架
js是页面脚本语言,用来控制或是辅助页面搭建,vue是js功能的集合体.
三大主流前端框架之一:angular React vue;
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
- 可以控制一个页面中的一个标签
- 可以控制一个页面
- 可以控制整个项目
Vue的优点
1、三大前台框架：Angular React Vue
vue：综合前两个框架的优点(轻量级)、一手文档是中文(上手快)、vue完全开源(免费)
2、单页面web应用 - 服务于移动端 - 客户端只需要问后台索要数据
3、MVVM设计模式
4、数据驱动 - 区别于DOM驱动(DOM加载后才能操作) - 在缓存中根据数据处理dom，再渲染给真实dom
5、虚拟dom - 页面的缓存机制
6、数据的双向绑定 - 页面中变量相同，数据就相同，实时被检测
Vue的引入
- 开发版本：vue.js(使用这个)
- 生产版本：vue.min.js
<div id="app">
{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
挂载点
vue实例(对象)通过挂载点与页面建立关联
挂载点只遍历第一个匹配的结果
html与body标签不可以作为挂载点
挂载点的只一般就采用id选择器(唯一性)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue导入</title>
<style>
h1 {
color: red;
}
h2 {
color: pink;
}
</style>
</head>
<body>
<div id="app">
<div>
<h1>{{ }}</h1>
<h2>{{ }}</h2>
</div>
<div>
<h1>{{ }}</h1>
<h2>{{ }}</h2>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// new Vue({
// // 挂载点：vue实例(对象)通过挂载点与页面建立关联
// el: 'h1'
// });
// new Vue({
// el: 'h2'
// })
new Vue({
// 挂载点只遍历第一个匹配的结果
// html与body标签不可以作为挂载点
// 挂载点的只一般就采用id选择器(唯一性)
el: '#app'
})
</script>
</html>
插值表达式与过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!--插值表达式-->
<h1>{{ msg.split('')[0] }}</h1>
<h2>{{ info + msg }}</h2>
<h3>{{ num * num }}</h3>
<!--num作为过滤器的参数，过滤器的返回值就是表达式的值-->
<h4>{{ num | my_filter }}</h4>
<!--过滤器f1被传递了四个参数a,b,c,d，并将过滤结果做出f2的参数再过滤-->
<!--这里f1相当于传入了四个参数，在过滤器中也可以传值-->
<h4>{{ a, b | f1(c, d) | f2 }}</h4>
<h4>{{ arr | f3 }}</h4>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建过滤器
Vue.filter('my_filter', function (v) {
console.log(v);
return 999
});
Vue.filter('f1', function (a, b, c, d) {
console.log(a, b, c, d);
// return '过滤后的逻辑结果'
return a + b + c + d
});
Vue.filter('f2', function (v) {
console.log(v);
return v * v
});
Vue.filter('f3', function (v) {
let new_arr = [];
for (n of v) {
if (n >= 60) {
new_arr.push(n)
}
}
return new_arr
});
new Vue({
el: '#app',
// data成员用来为vue控制的变量提供值
data: {
msg: 'message',
info: '信息',
num: 10,
a: 1,
b: 2,
c: 3,
d: 4,
arr: [23, 59, 62, 97]
}
})
</script>
</html>
文本指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<p>haha</p>
<div id="app">
<!--文本指令
{{变量表达式}}
v-text='变量表达式'
v-html='html标签可被解析'
v-once='限制的变量',内容还是通过上方三者完成渲染
v-model='变量',输入框和所有带有这个变量的标签关联，同步修改
-->
<!--此时在标签中间写入内容将不会显示，‘插入内容’不会显示-->
<h2 v-text="msg+'!!!'">插入内容</h2>
<!--在其中插入字符串的话，需要加单引号-->
<h2 v-text="msg+'add text'"></h2>
<!--包括标签会全部显示在页面上-->
<h2 v-text="htm"></h2>
<!--文本会变成斜体-->
<h2 v-html="htm"></h2>
<!--会同步修改-->
<h2>{{msg}}</h2>
<!--一次性渲染，差值表达式中的任何一个变量被限制，整个结果就不可变-->
<h2 v-once="msg">{{msg+htm}}</h2>
<!--所有带有msg的标签都会同步修改，除了v-once-->
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'message',
htm:'<i>标签内容是否被解析</i>'
}
})
</script>
</body>
</html>
属性指令
v-bind可以简写成单独的 ':'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.div{
width:200px;
height:200px;
background-color: red;
line-height: 200px;
text-align: center;
color: white;
}
.box{
width:200px;
height: 200px;
}
.blue{
background: blue;
}
.green{
background: green;
}
</style>
</head>
<body>
<div id="app">
<div class="div" style="-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;">123</div>
<!--属性指令：v-bind:属性名='属性值'=>v-bind:可以简写成单独的 ':'
eg:v-bind:style="{color:'red'}"
-->
<!--自定义属性：没有太多的应用场景-->
<div abc="xyz"></div>
<div v-bind:abc="xyz"></div>
<!--title属性-->
<div :title="xyz" class="div" style="border-radius:50%">456</div>
<!--style属性-->
<!--1）变量：变量的值为字典-->
<div :style="my_style"></div>
<!--2)字典中的多个变量-->
<div :style="{width:w,height:h,background:b}"></div>
<!--class属性-->
<!--<div class="box blue"></div>-->
<!--"[]"中的两个值表示属于两个类-->
<div :class="c"></div>
<div :class="[c1,c2]"></div>
<div :class="[c1,'blue']"></div>
<!--x为类名，是否生效有变量y(true|false)值决定-->
<div :class="{x,y}"></div>
<div :class="[{'box':true},c2]"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
xyz:'ABC',
my_style:{
width:'100px',
height:'199px',
background:'cyan',
borderRadius:'50%'
},
w:'50px',
h:'50px',
b:'red',
c:'box blue',
c1:'box',
c2:'green',
y:true,
}
})
</script>
</body>
</html>
事件指令
v-on:事件名=‘fn变量’=>v-on:可以简写成@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.div{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="app">
<!--事件指令 v-on:事件名='fn变量'=>v-on:可以简写为@
v-on:click='clickAction'
@dblclick='dblclickAction'
-->
<!--内容操作：每点一次，内容+1-->
<h2 v-once="num">{{num}}</h2>
<h2>{{num}}</h2>
<div v-on:click="clickAction" class="div">{{num}}</div>
<hr>
<!--样式操作：点击切换背景颜色-->
<div @click="changeColor" class="div" :style="{backgroundColor:bgColor}"></div>
<!--操作样式：点击切换整体样式-->
<div @click="changeStyle" :style="my_style"></div>
</div>
</body>
<script>
let app=new Vue({
el:'#app',
data:{
num:100,
bgColor:'cyan',
my_style:{
width:'100px',
height:'100px',
backgroundColor:'orange'
}
},
//methods三种写法
methods:{
clickAction:function(){
this.num ++
},
changeColor() {//方法的写法
//if (this.bgColor=='cyan'){
// this.bgColor='blue'
// }else{
// this.bgColor='cyan'
// }
//python: this.bgColor='cyan' if this.bgColor !='cyan' else 'blue'
this.bgColor= this.bgColor != 'cyan'?'cyan':'blue'
},
changeStyle:()=>{ //这种写法，内部拿不到this（指向的是window）
app.my_style=app.my_style.backgroundColor=='orange'?
{
width:'200px',
height:'200px',
backgroundColor:'yellow'
}
:
{
width:'100px',
height:'100px',
backgroundColor:'orange'
}
}
}
})
// 外界访问实例内部的数据,需要加$；而且new Vue的时候需要有一个接收值，这里是app：let app=new Vue({})
console.log(app);
console.log(app.$el);
console.log(app.$data.num);
//在实例中，只有data提供数据，所以可以直接省略$data
console.log(app.num);
</script>
</html>
事件指令传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>.
<div id="app">
<!--没有传值默认传 事件对象 -->
<div @click="btnClick1">{{ msg }}</div>
<!--方法()不会直接调用方法，而是在点击触发后进行传参，接收到的参数就是传入的参数,没有参数则不传入参数，没有传入的参数就是undefined-->
<div @click="btnClick2(1, msg)">{{ msg }}</div>
<!--一旦书写 方法() 就不再传入事件对象，通过 $event 手动传入事件对象-->
<div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'box'
},
methods: {
btnClick1(ev) {
console.log(ev);
console.log(ev.clientX);
},
btnClick2(a, b, c) {
console.log(a, b, c)
},
btnClick3(a, b, c) {
console.log(a, b, c)
},
}
})
</script>
</html>
表单指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<form action="">
<!--表单指令：v-model="变量"-->
<!--双向绑定：一个地方修改值，所有地方的数据都会被更新-->
<div>
<input type="text" v-model="info" name="usr">
<input type="password" v-model="info" name="pwd">
<p>{{ info | infoFilter }}</p>
</div>
<div>
<!--单选框：v-model="变量存放的是某个单选框的value值，代表该选框选中"-->
<!--value和v-model的值相配对-->
男<input type="radio" name="sex" value="male" v-model="sex_val">
女<input type="radio" name="sex" value="female" v-model="sex_val">
</div>
<div>
<!--单独的复选框：v-model="true|false代表该选框是否选中"-->
是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
</div>
<div>
<!--群复选框：v-model="存放选中选框value的 数组 "，如果不是数组是字符串的话，会显示true 和false，会一起选中或者一起不选中-->
男<input v-model="cbs_val" value="male" type="checkbox" name="hobby">
女<input v-model="cbs_val" value="female" type="checkbox" name="hobby">
哇塞<input v-model="cbs_val" value="others" type="checkbox" name="hobby">
<p>{{ cbs_val }}</p>
</div>
<div>
<input type="submit">
</div>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('infoFilter', (info) => {
return info ? info : '初始内容'
});
new Vue({
el: '#app',
data: {
info: '',
sex_val: 'female',
cb_val: 0,
cbs_val: ["others"]
}
})
</script>
</html>
条件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn1 { width: 400px; }
.box {
width: 200px;
height: 200px;
float: left;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.red { background-color: red }
.blue { background-color: blue }
</style>
<style>
.btn-wrap { height: 25px }
.btn {
width: 100px;
height: 25px;
float: left;
}
.page {
width: 300px;
height: 150px;
}
.p1 { background-color: pink }
.p2 { background-color: yellow }
.p3 { background-color: green }
</style>
</head>
<body>
<div id="app">
<!--条件指令
v-if="true|false"
v-show="true|false"
-->
<button class="btn1" @click="btnClick">{{ title }}</button>
<div class="wrap">
<!--v-if隐藏时不渲染到页面中，在代码中看不到，一般用这个；v-show隐藏时
用display:none渲染，在代码中还能看到，会被爬虫爬到-->
<!--v-if隐藏时在内存中建立缓存，可以通过key属性设置缓存的键-->
<div class="box red" v-if="is_show" key="box_red"></div>
<div class="box blue" v-show="is_show"></div>
</div>
<div class="btn-wrap">
<button class="btn" @click="changePage('pink')">粉</button>
<button class="btn" @click="changePage('yellow')">黄</button>
<button class="btn" @click="changePage('green')">绿</button>
</div>
<div>
<!--v-if成立会屏蔽下方分支、v-else-if一样f成立会屏蔽下方分支-->
<!--v-if不成立时才看v-else-if、v-else-if成立会屏蔽下方分支-->
<!--v-if、v-else-if都不成立，v-else才成立，三者只会成立一个-->
<div class="page p1" v-if="page == 'pink'"></div><!--page==pink的话为true，显示pink-->
<div class="page p2" v-else-if="page == 'yellow'"></div>
<div class="page p3" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '隐藏',
is_show: true,
// '||'是短路机制，前面成立取前面的值，前面不成立去后面的值
page: localStorage.page || 'pink'
},
methods: {
btnClick() {
this.title = this.title == '隐藏' ? '显示' : '隐藏';
this.is_show = !this.is_show;
},
changePage(page) {
this.page = page;
localStorage.page = page; // 永久缓存，记录操作
// sessionStorage.page = page; // 临时缓存，关闭浏览器消失
}
}
})
</script>
</html>
Vue.js框架的基础指令的更多相关文章
- Vue.JS快速上手（指令和实例方法）
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- Vue的介绍及基础指令
一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...
- vue学前班004（基础指令与使用技巧）
我学vue 的最终目的是为了 做apicloud 和vue 的开发 作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍. (强烈建议 官网案例走一遍) 基础指令的学习(结合aui ...
- vue.js介绍，常用指令，事件，以及制作简易留言版
一.vue是什么? 一个mvvm框架(库).和angular类似,比较容易上手.小巧,让我们的代码更加专注于业务逻辑,而不是去关注DOM操作 二.vue和angular之间的区别 vue--简单易学 ...
- Vue.js——框架
一.什么是VUE vue 是一个构建用户界面的javascript框架 特点:轻量,高效 特性:双向数据绑定,数据驱动视图 二.vue的使用 1.引入vue.js <script src=vue ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- Vue.js学习（常用指令）
Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...
- vue.js的一些模板指令简述
1.模板指令都是写在<template></template>html里面 v-text : value是什么就显示什么,如果value里面有html的标签,也会直接显示出 ...
- html的Vue.js框架概述
前端的三大框架: Augular.js 由Google的研发团队最先写出 React.js 由facebook的团队继Augular.js之后写出 Vue.js ...
随机推荐
- python网络爬虫学习
网络爬虫 Requests官方中文教程地址:http://docs.python-requests.org/zh_CN/latest/user/quickstart.html Beautiful So ...
- img引用网络图片资源无法加载问题解决
近期在自己项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题 解决办法: 在图片显示的界面把meta referrer标签改为never <meta name ...
- java求两个数中的大数
java求两个数中的大数 java中的max函数在Math中 应用如下: int a=34: int b=45: int ans=Math.max(34,45); 那么ans的值就是45.
- Machine Learning 之一，什么是机器学习。
Machine Learning 机器学习,什么是机器学习.我觉得尚学堂的培训老师讲的很不错,就是两个字来介绍.------拟人. 就是模拟人类的思维方式. 老师举的例子: 和女朋友约会,第一次约会, ...
- 基于V8的JsonMapper
<dependency> <groupId>com.eclipsesource.j2v8</groupId> <artifactId>j2v8_win3 ...
- jenkins在pipline中运行后台命令
需求 在jenkin中启动java程序或者python程序的时候,希望程序在后台执行,并在jenkins构建完成之后继续执行.在工作中有两个地方我碰到了这种需求 在shell script输入框中pi ...
- Codeforces 743C - Vladik and fractions (构造)
Codeforces Round #384 (Div. 2) 题目链接:Vladik and fractions Vladik and Chloe decided to determine who o ...
- 大道浮屠诀---NBU7.7.3_oracle11G单机-单机（异机恢复WINDOWS2008平台）
现有环境说明: 一台WINDOWS2008R2:安装有NBU7.7.3,作为服务端 一台WINDOWS2008R2:安装有oracle11.2.0.3,作为数据库服务器 现假设数据库意外崩溃,需要进行 ...
- 不在B中的A的子串数量 HDU - 4416 (后缀自动机模板题目)
题目: 给定一个字符串a,又给定一系列b字符串,求字符串a的子串不在b中出现的个数. 题解: 先将所有的查询串放入后缀自动机(每次将sam.last=1)(算出所有子串个数) 然后将母串放入后缀自动机 ...
- 记一次vue 普通异步请求微信二进制二维码 乱码 问题解决然后渲染
后端压力大,前端分忧. /*用微信小程序token拿二维码*/ async fetchMINIQRcode({commit,state},params){ var instance = axios.c ...