VUE(下)
VUE(下)
VUE指令
表单指令
数据的双向指令
v-model = "变量"
model绑定的变量，控制的是表单元素的value值
- 普通表单元素用
v-model直接绑定控制value值 - 单一复选框，函数中的是
true或false - 多个复选框中，函数中写的是空列表，如果列表中有字符串，表示默认选中这个选项
- 单选框中，函数的值可以为字符串，这个字符串还是value中的值，默认选中
<body>
<div id="app">
<form action="">
<!--属性指令：v-model="变量"，v-model绑定的变量控制的是表单元素的value值 -->
<!--普通表单元素，用v-model直接绑定变量控制value值-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
<p>{{ v1 }}</p>
<hr>
<!--单一复选框-->
同意：
<input type="checkbox" name="agree" v-model="v2">
<hr>
<!--多个复选框-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--单选框-->
中午吃啥：<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
斗篷指令
解决网页加载闪烁
解决方法：
- 可以先加载VUE环境
v-cloak,他就类似于一个属性，有VUE环境，他这个属性就被取消了！！！
<style>
[v-cloak] {
display: none;
}
</style>
条件指令
v-if = "true|false":为假时，在页面上不渲染，可以隐藏标签中的信息
v-sow = "true|false":为假时，页面中用display:none渲染，虽然没有展示，但是仍在页面结构中
v-if是一个家族
v-ifv-else-if
以上两个当为假时，即等于0时，v-else出现，且不需要条件，一旦分值成立，下分支就会被屏蔽
v-else
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
循环指令
语法：
v-for = "成员的容器"
- 字符串循环渲染：可以只遍历值，也可以遍历值与索引
- 数组循环渲染：
- 对象循环渲染：可以遍历值、可以遍历值与key、可以遍历值，key，index
<!--1、字符串循环渲染: 可以只遍历值，也可以遍历值与索引-->
<p>
<span v-for="v in title">{{ v }}</span>
</p>
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p>
<!--2、数组循环渲染: 可以只遍历值，也可以遍历值与索引-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
</div>
<!--3、对象循环渲染: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
<div>
<p v-for="v in people">{{ v }}</p>
</div>
<div>
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div>
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
VUE成员
分隔符成员
用来修改插值表达式符号:delimiters
<script>
new Vue({
el: '#app',
data: {
num: 100
},
delimiters: ['{', ']}'],
})
</script>
计算属性成员
computed:里面是函数
- 他定义的是方法属性，data中定义的也是属性，所以不需要重复定义
- 方法属性的值来源于绑定方法的返回值
- 方法属性必须在页面中渲染后，绑定的方法才会被调用
- 方法中出现的所有变量都会被监听,任何变量发生值更新都会调用一次绑定方法，重新更新一下方法属性的值
- 方法属性值不能手动设置，必须通过绑定的方法进行设置
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
computed: {
res () {
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
属性的监听
watch:
- 给已有属性设置监听方法
- 监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
- 监听方法不需要返回值，返回值只有主动结束方法的作用
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
补充
sessionstorage的生命周期与页面标签绑定，当标签页关闭，数据库被清空eg：刷新页面不会重新开始localstorage：前台永久数据库eg：关闭浏览器不会重新开始，而是停留在浏览的位置数组操作：push、pop、unshift、shift、splice
splice可以完成数组的增删改
let arr[1,2,3,4]
arr.splice(0,0,0) //以索引0开始，操作长度为0、操作的结果为0
VUE(下)的更多相关文章
- vue 下实现 echarts 全国到省份的地图下钻
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo
- checked、disabled在原生、jquery、vue下不同写法
以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- vue下实现input实现图片上传，压缩，拼接以及旋转
背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...
- Vue下路由History mode导致页面无法渲染的原因
用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...
- 八：Vue下的国际化处理
p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...
- vue下拉搜索
vue版本是1.0.21 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 八：前端---Vue下的国际化处理
1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...
- vue下assets下的静态资源和static下的静态资源的区别
区别一(最终位置) assets文件是src下的,所以最后运行是需要进行打包,而static文件不需要打包直接放在最终的文件中了 区别二(引用方式) assets中的文件在vue中的template/ ...
随机推荐
- RabbitAdmin
RabbitAdmin底层实现就是从Spring容器中获取Exchange.Binding.Routingkey以及Queue的@声明然后使用RabbitTemplate的execute方法执行对应的 ...
- [CSP-S模拟测试]:Drink（模拟）
题目传送门(内部题10) 输入格式 输入第一行三个数$N,M,Q$分别表示棋盘的行数.列数和操作个数.接下来$N$行每行$M$个数表示一开始棋盘上宝物的价值.接下来$Q$行每行$3$个数$x,y,c$ ...
- Android学习_Fragment
Fragment 使用Fragment 我们可以把屏幕划分成几块,然后进行分组,进行一个模块化的管理.从而可以更加方便的在运行过程中动态地更新Activity的用户界面.另外Fragment并不能单独 ...
- Android学习_服务
一. 服务1. Android多线程 每一个Android应用程序都会分别运行在一个独立的Dalvik(或ART?)虚拟机中,而每个虚拟机在启动时会运行一个UI主线 ...
- Android学习_7/26
四种基本布局 1. 线性布局(LinearLayout) android:layout_gravity:指定控件在布局中的对齐方式 android:gravity:指定文字在控件中的对齐方式 andr ...
- AWS EC2 PV Drivers 驱动升级
问题 从2019-10-23起,我的AWS实例不断的重启(大概6个小时左右),或者连接不上(远程连接不上并PING不通IP),但控制台显示running. 分析与解决方法 通过查看dump文件,发现是 ...
- JavaScript 高级系列之节流 [throttle] 与防抖 [debounce]
一.概念 这两个东西都是为了项目优化而出现的,官方是没有具体定义的,他们的出现主要是为了解决一些短时间内连续执行的事件带来性能上的不佳和内存的消耗巨大等问题:像这类事件一般像 scroll keyup ...
- navicat for mysql安装
搜索一款navicat for mysql然后进行下载. 步骤阅读 2 当我们下载完成之后首先进行数据包的解压,同时可以运行navicat for mysql程序. 破解工具下载:https://pa ...
- tp5分页，一看就懂，简单明了（附带额外参数）
php 代码: $result = $jjModel->where($wheres)->paginate(10,false,['query' => ['peytype'=>$p ...
- Boost无锁队列
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/okiwilldoit/article/details/50970408 在开发接收转发agent时, ...